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



目录

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操作数据，因为即便操作数据，也不会再触发更新流程了。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/15671.html