vue的生命周期

生命周期介绍

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。

通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。

1.别称：生命周期回调函数、生命周期函数、生命周期钩子。

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

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

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

5.vue中内置的方法 属性和vue生命周期的运行顺序（methods、computed、data、watch、props)

  props => methods =>data => computed => watch; 

 

vue生命周期的八个阶段

1.beforeCreate

会在实例初始化完成、props 解析之后、data() 和 computed 等选项处理之前立即调用。

此时不能获得DOM节点（this还不能使用，data中的数据、methods中的方法，以及watcher中的事件都不能获得）

2.created

在这个阶段vue实例已经创建，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。然而，此时挂载阶段还未开始，因此 $el 属性仍不可用。

这个时候可以操作vue中的数据和方法，但是仍然不能操作DOM元素。

3.beforeMount

在组件内容被渲染到页面之前自动执行的函数（render 函数首次被调用）组件已经完成了其响应式状态的设置

但还没有创建 DOM 节点（$el属性已存在，是虚拟dom）

4.mounted（重要的钩子）

在组件被渲染之后自动执行的函数。一般我们的异步请求都写在这里。（注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick替换掉 mounted）

在这个阶段，数据和DOM都已被渲染出来，dom操作在此时能正常进行

5.beforeUpdate

数据变化的时候自动执行的函数（发生在虚拟 DOM 打补丁之前）

此时变化后的数据还未渲染到页面之上。

6.updated

数据变化之后自动执行的函数 （注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick替换掉 updated：）

此时变化后的数据已经渲染到页面之上。

7.beforeDestroy（重要的钩子）

 当 Vue 应用被销毁时，自动执行的函数。在这一步，实例仍然完全可用。

8.destroyed

当 Vue 应用被销毁后，且 dom 完全销毁之后，自动执行的函数

执行destroy方法后，对data的改变不会再触发周期函数，此时的vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

生命周期示意图：

常用的生命周期钩子：

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

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

关于销毁Vue实例

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

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

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