当前位置：首页 > news >正文

引出生命周期、生命周期_挂载流程、生命周期_更新流程、生命周期_销毁流程、生命周期_总结——Vue

news 2026/2/7 23:03:43

一、引出生命周期

二、生命周期_挂载流程

三、生命周期_更新流程

四、生命周期_销毁流程

五、生命周期_总结

一、引出生命周期

生命周期：

1.又名：生命周期回调函数、生命周期函数、生命周期钩子。

2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。

3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

4.生命周期函数中的this 指向是vm 或 组件实例对象。

Vue完成模板的解析并把初始的真实的DOM元素放入页面后（挂载完毕）调用mounted

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>	
</head>
<body>	<div id="root"><h2 v-if="a">你好啊</h2><!-- {opacity}为{opacity: opacity}的简写形式，第一个opacity为属性，第二个为属性值 --><h2 :style="{opacity}">欢迎学习Vue</h2><!-- {{change()}} --></div><script type="text/javascript">	Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{opacity:1,a:false,},methods:{/* change(){setInterval(()=>{this.opacity -= 0.01if(this.opacity <= 0) this.opacity = 1},16)}, */},// Vue完成模板的解析并把初始的真实的DOM元素放入页面后(挂载完毕)调用mountedmounted() {console.log('mounted',this);//此处的this是vue实例setInterval(()=>{vm.opacity -= 0.01if(vm.opacity <= 0) vm.opacity = 1},16)},			})// 通过外部的定时器实现（不推荐）/* setInterval(()=>{vm.opacity -= 0.01if(vm.opacity <= 0) vm.opacity = 1},16) */</script>
</body>
</html>

二、生命周期_挂载流程

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/vue.js"></script></head>
<body><!-- 准备好一个容器 --><div id="root"><h2 v-if="false">你好啊</h2><h2 :style="{opacity}">欢迎学习 Vue</h2><h2>当前的n值是：{{n}}</h2><button @click="add">点我 n+1</button></div><script type="text/javascript">const vm = new Vue({el: '#root',// template: ` //     <div>//         <h2>当前的n值是：{{n}}</h2>//         <button @click="add">点我 n+1</button>//     </div>// `,data: {opacity:1,n: 1},methods: {add(){this.n++}},beforeCreate() {console.log('beforeCreate')// console.log(this);// debugger},created() {console.log('created')// console.log(this);// debugger},beforeMount() {console.log('beforeMount')// console.log(this);// debugger               },mounted(){console.log('mounted')// console.log(this);// debugger   /* setInterval(() => {this.opacity -= 0.01if (this.opacity < 0) {this.opacity = 1}}, 16) */}})    </script>
</body>
</html>

三、生命周期_更新流程

在哪个生命周期钩子中页面与数据尚未不同步： beforeUpdate

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/vue.js"></script></head>
<body><!-- 准备好一个容器 --><div id="root"><h2 v-if="false">你好啊</h2><h2 :style="{opacity}">欢迎学习 Vue</h2><h2>当前的n值是：{{n}}</h2><button @click="add">点我 n+1</button></div><script type="text/javascript">const vm = new Vue({el: '#root',// template: ` //     <div>//         <h2>当前的n值是：{{n}}</h2>//         <button @click="add">点我 n+1</button>//     </div>// `,data: {opacity:1,n: 1},methods: {add(){this.n++}},beforeCreate() {console.log('beforeCreate')// console.log(this);// debugger},created() {console.log('created')// console.log(this);// debugger},beforeMount() {console.log('beforeMount')// console.log(this);// debugger               },mounted(){console.log('mounted',this.$el,this.$el instanceof HTMLElement)// console.log(this);// debugger   /* setInterval(() => {this.opacity -= 0.01if (this.opacity < 0) {this.opacity = 1}}, 16) */},beforeUpdate() {console.log('beforeUpdate')// console.log(this.n);  //点击按钮 此时已变成 2// debugger},updated() {console.log('updated')debugger},})    </script>
</body>
</html>

四、生命周期_销毁流程

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/vue.js"></script></head>
<body><!-- 准备好一个容器 --><div id="root"><h2 v-if="false">你好啊</h2><h2 :style="{opacity}">欢迎学习 Vue</h2><h2>当前的n值是：{{n}}</h2><button @click="add">点我 n+1</button><button @click="bye">点我销毁vm</button></div><script type="text/javascript">const vm = new Vue({el: '#root',// template: ` //     <div>//         <h2>当前的n值是：{{n}}</h2>//         <button @click="add">点我 n+1</button>//     </div>// `,data: {opacity:1,n: 1},methods: {add(){console.log('add');this.n++},bye(){console.log('bye');this.$destroy()}},beforeCreate() {console.log('beforeCreate')// console.log(this);// debugger},created() {console.log('created')// console.log(this);// debugger},beforeMount() {console.log('beforeMount')// console.log(this);// debugger               },mounted(){console.log('mounted',this.$el,this.$el instanceof HTMLElement)// console.log(this);// debugger   /* setInterval(() => {this.opacity -= 0.01if (this.opacity < 0) {this.opacity = 1}}, 16) */},beforeUpdate() {console.log('beforeUpdate')// console.log(this.n);  //点击按钮 此时已变成 2// debugger},updated() {console.log('updated')// debugger},beforeDestroy() {console.log('beforeDestroy')console.log(this.n)this.add()  //仍可使用 add，但对数据触发的操作不再更新，所以页面中 的n不会改变},destroyed() {console.log('destroyed')},})         </script>
</body>
</html>

五、生命周期_总结

上面一共讲了8 个生命周期，也就是4 对生命周期

beforeCreate 与 created 指数据检测与数据代理创建之前和之后

beforeMount 与 Mounted

beforeUpdate 与 updated

beforeDestroy 与 destroy

常用的生命周期钩子：
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例
1. 销毁后借助Vue开发者工具看不到任何信息。
2. 销毁后自定义事件会失效，但原生DOM事件依然有效。

3. 一般不会在beforeDestroy 操作数据，因为即便操作数据，也不会再触发更新流程了。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/vue.js"></script></head>
<body><!-- 准备好一个容器 --><div id="root"><!-- 需求：点击按钮停止变换 --><h2 :style="{opacity}">欢迎学习 Vue</h2><button @click="opacity = 1">透明度设置为1</button><button @click="stop">停止变换</button></div><script type="text/javascript">const vm = new Vue({el: '#root',data: {opacity:1,},methods: {stop(){this.$destroy()}},mounted(){  this.timer = setInterval(() => {this.opacity -= 0.01console.log('定时器');if (this.opacity < 0) {this.opacity = 1}}, 16)},beforeDestroy() {console.log();clearInterval(this.timer)},           })         </script>
</body>
</html>

引出生命周期、生命周期_挂载流程、生命周期_更新流程、生命周期_销毁流程、生命周期_总结——Vue

目录一、引出生命周期二、生命周期_挂载流程三、生命周期_更新流程四、生命周期_销毁流程五、生命周期_总结一、引出生命周期生命周期： 1.又名：生命周期回调函数、生命周期函数、生命周期钩子。 2.是什么：Vue在关键时刻帮我们调…...

编程日记 2023/3/12 0:40:41

C++ STL学习之【vector的使用】

✨个人主页： Yohifo 🎉所属专栏： C修行之路 🎊每篇一句： 图片来源 The power of imagination makes us infinite. 想象力的力量使我们无限。文章目录📘前言📘正文1、默认成员函数1.1、默认构造…...

编程日记 2023/3/12 0:39:37

方差分析与单因素方差分析

研究分类型自变量对数值型因变量的影响。检验统计的设定和检验方法与变量间的方差是否相等有关。例如研究行业、服务等级对投诉数的影响：如表格中给出4个行业、每个行业有3个服务等级、样本容量为7、观测值为投诉数。则构成一个3维的矩阵。在上述基础上&#xf…...

编程日记 2023/3/12 0:38:35

分布式链路追踪组件skywalking介绍

SkyWalking组件概念一个开源的可观测平台, 用于从服务和云原生基础设施收集, 分析, 聚合及可视化数据。SkyWalking 提供了一种简便的方式来清晰地观测分布式系统, 甚至横跨多个云平台。SkyWalking 更是一个现代化的应用程序性能监控(Application Performance Monitoring)系统…...

编程日记 2023/3/12 0:37:31

SUBMIT的用法

SUBMIT的用法一、简介系统MB52/MB51/MB5B等类似的报表 ，虽然数据很全面，执行效率也够快，但是经常会不满足用户需求（增添字段、添加查询条件等），很多ABAP 会选择去COPY出标准程序，然后去做修改…...

编程日记 2023/3/12 0:36:29

网页基本标签、图像标签、链接标签、块内元素和块元素、列表标签、表格标签

一、网页基本标签标题标签段落标签未写段落标签前，文本没有按照想要的格式排列显示写段落标签后： 每句都是一段，所以句与句距离比较宽换行标签同一段，只是把文字换行，所以比较紧凑水平线标签字体样式标签 …...

编程日记 2023/3/12 0:35:27

RxJava操作符变换过程

要使用Rxjava首先要导入两个包，其中rxandroid是rxjava在android中的扩展 implementation io.reactivex:rxandroid:1.2.1implementation io.reactivex:rxjava:1.2.0我们在使用rxjava的操作符时都觉得很方便，但是rxjava是怎么实现操作符的转换呢&#xff0…...

编程日记 2023/3/12 0:34:25

开放平台订单接口

custom-自定义API操作注册开通 taobao.custom 公共参数名称类型必须描述 key String 是调用key（必须以GET方式拼接在URL中） secret String 是调用密钥 api_name String 是 API接口名称（包括在请求地址中&a…...

编程日记 2023/3/12 0:33:22

CDN相关知识点

1、什么是CDN？CDN的作用是什么？ CDN（Content Delivery Network，内容分发网络）是一种通过在多个节点上分布内容以提高网络性能、可靠性和可扩展性的网络解决方案。CDN通过在不同的地理位置部署服务器，使用户…...

编程日记 2023/3/12 0:31:09

【论文阅读】注意力机制与二维 TSP 问题

前置知识注意力机制见这篇二维 TSP 问题给定二维平面上 nnn 个点的坐标 S{xi}i1nS\{x_i\}_{i1}^nS{xi}i1n，其中 xi∈[0,1]2x_i\in [0,1]^2xi∈[0,1]2，要找到一个 1∼n1\sim n1∼n 的排列 π\piπ ，使得目标函数 L(π∣s)∥xπ…...

编程日记 2023/3/12 0:30:06