VUE的生命周期简述

94 阅读1分钟

VUE生命周期就是vue实例从创造到销毁的过程,大致可以分为四个阶段,

每个阶段又各有两个钩子函数:

1.创建、初始化

beforeCreate -> created

初始化vue实例,进行数据观测

created

完成数据观测,属性与方法的运算,watch、event事件回调的配置

可调用methods中的方法,访问和修改data数据触发响应式渲染dom,可通过computed和watch完成数据计算

此时 vm.$el并没有被创建

2.编译、挂载, creted -> beforeMount

判断是否存在el选项,若不存在则停止编译,直到调用 vm.$mount()el才会继续编译

vm.el获取到的是挂载DOM的

beforeMount

在此阶段可以获取到vm.el

在此阶段 vm.el虽然已经完成DOM初始化,但并未挂载在el选项上

beforeMount -> mounted

在此阶段vm.el挂载完成,生成的DOM替换了el选项所对应的DOM

mounted

vm.el已完成DOM挂载与渲染,此刻打印vm.$el,发现之前的挂载点及内容已被替换成新的DOM

3.更新、渲染

beforeUpdate

更新的数据必须是被渲染在模板上的(el、template、render之一)

此时view层还未更新

若在beforeUpdate中再次修改数据,不会再次触发更新方法

updated

完成 view层的更新

在updated中再次修改数据,会再次触发更新方法 (beforeUpdate、updated)

4.卸载、销毁

beforeDestroy

实例被销毁前的调用,此时是咧属性与方法仍可访问

destroyed

完全销毁一个实例,可清理它与其它实例的链接,解绑它的全部指令及事件监听器

并不能抢出DOM,仅仅销毁实列