2025年vue2生命周期函数（vue生命周期函数详解）

大家好，我是讯享网，很高兴认识大家。

 <p id="main-toc"><strong>目录</strong></p>

讯享网

1，生命周期概念

1.1概念：

1.2生命周期图解：

2.生命周期过程解读

2.1创建阶段

2.2更新阶段

2.3销毁阶段

3.完整代码

4，总结：

1.1概念：

所谓生命周期指的是vue实例的从创建到更新再到销毁的这么一个过程，就如同我们人类的一生一样，说起来就莫名有点伤感，从出生，到成长，到辉煌顶峰，最后到死亡……（自己的见解）

生命周期函数别名‘钩子函数’，类似a(){} b(){} 这种在vue中为生命周期函数，重点的为mounted（创建完成函数），beforeDestroy（销毁前善后工作），这两个钩子常用。

1.2生命周期图解：

讯享网直接看图肯定是一脸懵逼的，所以我们坐下来慢慢说

2.1创建阶段

讯享网

beforeCreate() vue实例创造之前，没有解析模板，没有挂载，data数据

created() vue实例创建完成，但并未挂载，没有解析模板

beforeMount() 在挂载渲染前最后一次更改数据的机会，这个阶段操作dom不奏效

mounted() vue实例挂载完成，解析模板，初始化

2.2更新阶段

beforeUpdate() （data中数据已发生变化，view层数据变化之前），后vue的虚拟dom机制会从新构建虚拟dom 与上一次的虚拟dom树利用diff算法进行对比以后从新渲染。

updated()更新完成，页面渲染也完成{{num}}为101

2.3销毁阶段

讯享网

执行两个销毁函数

beforeDestroy() 这里善后:清除计时器、清除非指令绑定的事件等等…’)。

destroyed()销毁后（Dom元素存在，只是再也不受vue控制）

this指向还是vue，vue存在，只是销毁后，断开vue和dom的联系，无法操作dom

beforeCreate初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

vue实例中的el，data，data中的message都为undefined。

created实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，\(el 属性目前不可见。主要应用：调用数据，调用方法，调用异步函数 beforeMount载入前（完成了data和el数据初始化），可是页面中的内容仍是vue中的占位符，data中的message信息没有被挂在到Bom节点中，在这里能够在渲染前最后一次更改数据的机会，不会触发其余的钩子函数，通常能够在这里作初始数据。这个阶段操作DOM是不奏效的。 mounted载入后html已经渲染(ajax请求能够放在这个函数中)，把vue实例中的data里的message挂载到BOM节点中去。 beforeUpdate状态完成更新之前（data中数据已发生变化，view层数据变化之前），后vue的虚拟dom机制会从新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比以后从新渲染。 updated数据已经更改完成，dom也从新render完成。 Vm.\)destroy()：销毁后自定义事件会失效，但原生DOM事件依然有效。销毁后会调用下面两个钩子。

beforeDestroy销毁前执行（$destroy方法被调用的时候就会执行）,通常在这里善后:清除计时器、清除非指令绑定的事件等等…’)。

destroyed销毁后（Dom元素存在，只是再也不受vue控制）,卸载watcher，事件监听，子组件

常用的生命周期钩子：

mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。

beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例：

1.销毁后借助Vue开发者工具看不到任何信息。

2.销毁后自定义事件会失效，但原生DOM事件依然有效。

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

2025年vue2生命周期函数（vue生命周期函数详解）

1.1概念：

1.2生命周期图解：

2.1创建阶段

2.2更新阶段

2.3销毁阶段

相关推荐