本文共 1043 字，大约阅读时间需要 3 分钟。

生命周期钩子=生命周期函数=生命周期事件

主要的生命周期函数 1.创建期间的生命周期函数 在创建实例期间，会先初始化一个空的vue对象，这时候，这个对象身上只有默认的一些生命周期函数的默认事件，其他东西都未创建 创建实例之后会执行beforecreate函数，这是遇到第一个生命周期函数，在执行这个函数时，data和methods中的数据还都未被初始化 之后向下通过依赖注入导入依赖项 向下执行createed函数，这是第二个生命周期函数，这个时候data和methods中的数据都被初始化好了，最早可以在create函数中操作 检查vue配置，即new Vue{}里面的el项是否存在，有就继续检查template项。没有则等到手动绑定调用vm.$mount()，之后进行编译模板，把vue中的指令进行执行，最终在内存中生成一个编译好的最终模板字符串，然后把这个模板字符串渲染为内存中的dom，此时只是在内存中渲染好了模板，并没有把模板挂载到真正的页面中 之后会执行beforemount函数，这是第三个生命周期函数，在这个函数执行的时候，模板已经在内存中编译好了，但是尚未挂载到页面中去，此时页面还是旧的 mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示，只要执行完了mounted函数，就表示整个vue实例创建初始化完成，此时进入运行期间阶段 2.运行期间的生命周期函数 + beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点（此时data中的数据被改变，但是页面上的显示还是旧数据） 执行过beforupdate后，根据data中的数据重新渲染出一个新的内存dom树，当最新的dom树生成后，会把内存中最新的dom树重新渲染到页面中，此时就完成了data(model层)到视图(view层)的更新 + updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！ 3.销毁期间的生命周期函数 + beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。就相当于在销毁前的准备工作 + destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 生命周期实例

转载地址：http://raxui.baihongyu.com/