首页 > 编程札记 > 编程

Vue2生命周期详解

阅读：评论：0

Vue2生命周期详解

1，生命周期概念

1.1概念：

1.2生命周期图解：

2.生命周期过程解读

2.1创建阶段

2.2更新阶段

2.3销毁阶段

3.完整代码

4，总结：

1，生命周期概念

1.1概念：

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

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

1.2生命周期图解：

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

2.生命周期过程解读

2.1创建阶段

<!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="./vue.js"></script>
</head><body><div id="app">计算器：{{num}}</div>
</body>
<script>new Vue({el: '#app',data() {return {num: 0,};},
//生命周期，，钩子函数a(){}  b(){}  此类型为生命周期函数beforeCreate() {//vue实例创造之前，没有解析模板，没有挂载，data数据console.log(this.num)//undefind// debugger;打断点},created() {//vue实例创建完成，但并未挂载，没有解析模板console.log(this.num)//0// debugger;},beforeMount() {//在挂载渲染前最后一次更改数据的机会，这个阶段操作dom不奏效this.num = 100;console.log('beforeMount', this.num)//beforeMount 100// debugger;},mounted() {//vue实例挂载完成，解析模板，初始化console.log(this.num)setInterval(() => {this.num++}, 1000)},})</script>

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

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

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

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

2.2更新阶段

 // 2，更新状态阶段beforeUpdate() {//（data中数据已发生变化，view层数据变化之前），后vue的虚拟dom机制会从新构建虚拟dom//  与上一次的虚拟dom树利用diff算法进行对比以后从新渲染。console.log('beforeUpdate', this.num)//打印num为101,视图层{{num}}未渲染，只是占位符// debugger;},updated() {//完成更新console.log('updated', this.num)//updated 101  ,更新完成，页面渲染也完成{{num}}为101// debugger;},

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

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

2.3销毁阶段

  beforeDestroy() {//这里善后:清除计时器、清除非指令绑定的事件等等…’)。console.log('beforeDestroy', '处理善后工作');},destroyed() {//销毁后（Dom元素存在，只是再也不受vue控制）console.log(' destroyed', this)//this指向还是vue，vue存在，只是销毁后，断开vue和dom的联系，无法操作dom},

执行两个销毁函数

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

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

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

3.完整代码

<!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="./vue.js"></script>
</head><body><div id="app">计算器：{{num}}<button @click="add">点我加1</button><button @click="destroy">点我销毁</button></div>
</body>
<script>new Vue({el: '#app',data() {return {num: 0,};},methods: {add() {this.num++},destroy() {console.log('即将销毁');this.$destroy()//Vm.$destroy()：销毁后自定义事件会失效，但原生DOM事件依然有效。销毁后会调用销毁阶段的两个钩子。}},//生命周期，，钩子函数a(){}  b(){}  此类型为生命周期函数beforeCreate() {//vue实例创造之前，没有解析模板，没有挂载，data数据console.log(this.num)//undefind// debugger;  打断点},created() {//vue实例创建完成，但并未挂载，没有解析模板console.log(this.num)//0// debugger;},beforeMount() {//在挂载渲染前最后一次更改数据的机会，这个阶段操作dom不奏效this.num = 100;console.log('beforeMount', this.num)//beforeMount 100// debugger;},mounted() {//vue实例挂载完成，解析模板，初始化console.log(this.num)// debugger;setInterval(() => {this.num++}, 1000)},// 2，更新状态阶段beforeUpdate() {//（data中数据已发生变化，view层数据变化之前），后vue的虚拟dom机制会从新构建虚拟dom//  与上一次的虚拟dom树利用diff算法进行对比以后从新渲染。console.log('beforeUpdate', this.num)//打印num为101,视图层{{num}}未渲染，只是占位符// debugger;},updated() {//完成更新console.log('updated', this.num)//updated 101  ,更新完成，页面渲染也完成{{num}}为101// debugger;},//3,销毁阶段beforeDestroy() {//这里善后:清除计时器、清除非指令绑定的事件等等…’)。console.log('beforeDestroy', '处理善后工作');},destroyed() {//销毁后（Dom元素存在，只是再也不受vue控制）console.log(' destroyed', this)//this指向还是vue，vue存在，只是销毁后，断开vue和dom的联系，无法操作dom},})</script></html>

4，总结：

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事件依然有效。