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,仅仅销毁实列