Vue 生命周期
生命周期
又名：生命周期回调函数、生命周期函数、生命周期钩子。
是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
生命周期函数中的this指向是vm 或 组件实例对象。
Vue 实例创建阶段
-
var vm=new Vue()，创建出一个 Vue 实例对象 -
beforeCreat，当 Vue 实例被完全创建出来之前，就会执行该函数，这是表示刚初始化了一个空的 Vue 对象，还未进行数据代理**注意:**在 beforeCreat 生命周期函数执行的时候，data 和 methods 等中的数据还没有初始化，所以在这里面调用这些 data 或 methods 等中的属性和方法会报错
-
created，在该函数中，data 和 methods 等数据已经被初始化好了，如果要调用 methods 中的方法或者 data 中的数据，最早只能在 created 中进行操作**注:**如果要发 Ajax 请求尽量在这个阶段发送
-
在这两个生命周期函数之间（create，beforeMount）进行 Vue 的编译模板，把 Vue 代码中的那些指令进行执行，最终在内存中生成一个编译好的最终模板字符串(虚拟 DOM)，然后把这个字符串渲染为内存中的 DOM，但是此时只是在内存中渲染 DOM，还没有将其挂载到页面中去
-
beforeMount，在该函数中模板已经在内存中了，但是还没有把模板渲染到页面中，也就是说{{}}中的内容还没有被解析，页面中的元素还没有真正被替换，只是写了一些模板字符串 将内存中的 DOM 挂载到页面中去 -
mounted，表示内存中的 DOM 已经挂载到页面中了，用户已经可以看到渲染好的页面了注意: mounted 是实例创建期间执行的最后一个生命周期函数，当执行完 mounted 就表示实例已经完全被创建好了 如果要通过某些插件操作页面上的 DOM 节点，最早要在 mounted 中进行
Vue 实例运行阶段
下面两个生命周期必须要数据发生改变时才会进行，会根据 data 数据的改变触发 0 次或多次
-
beforeUpdate，这个函数表明 Vue 实例在运行时数据已经被更新，而页面还没有被更新的时间节点，当执行该函数时，页面中显示的数据还是没有更新前的数据，而 data 中的数据是最新的，页面还没有和数据实现同步 -
在这两个函数之间(beforeUpdate， updated)，会根据 data 中的最新数据，重新渲染出一份最新的内存 DOM 树(虚拟DOM)，当最新的内存 DOM 树被更新之后，会把最新的内存 DOM 树重新渲染到真实的页面中去，完成数据从 data 到页面视图的更新
-
updated，当这个函数执行时证明 data 中的数据已经和页面中的数据保存同步更新了
Vue 实例销毁阶段
beforeDestroy， 当执行该函数时，Vue 实例就已经从运行阶段进入到了销毁阶段，实例上的所以属性如 data，methods 等都还是处于可用状态，还没有真正的执行销毁destroyed，当执行到该函数时，Vue 实例已经被完全销毁，此时所有实例中的属性都不可用了
注意
-
常用的生命周期钩子：
mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
-
关于销毁Vue实例
- 销毁后借助Vue开发者工具看不到任何信息。
- 销毁后自定义事件会失效，但原生DOM事件依然有效。
- 一般不会在
beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
文章分享
如果这篇文章对你有帮助，欢迎分享给更多人！