生命周期钩子
1. beforeCreate
1)实例被创建之前的函数
2)为实例的创建以及实例的事件初始化和整个生命周期做一个准备
3)数据是无法获得的
4)真实DOM获取不到
2.created
1)表示组件创建结束
2)初始化数据 【 给data的数据做数据劫持,实现深入响应式原理 】
3)可以得到数据
4)可以进行数据修改
3.beforeMount
1)表示组件加载前执行
2)任务:
a. 判断实例或是组件是否有el选项,若有,则继续判断是否有template选项,若没有,则需要在实例创建结束之后通过$mount手动进行加载
b. 判断是否有template选项
1> 有,使用render函数来编译template中jsx结构,同时也会解析jsx结构中的数据
2> 没有,使用outerHTML作为template编译
3)这个函数前有了Virtual DOM
4)可以获得数据
5)可以进行数据修改
4.mounted
1)表示组件加载结束
2)也就意味着真实DOM代替了Virtual DOM
3)可以获得数据
4)可以进行数据修改
5.beforeUpdate
1)监听data中数据是否改变,若改变就执行更新阶段
6.updated
1)表示更新结束
2)任务:
a. 重新生成DOM,并通过diff算法比对新旧Virtual DOM,获得patch补丁对象,然后渲染成真实DOM
3)真实DOM操作 -> 第三方类似实例化
7.destroyed、beforeDestroy
1)在组件销毁之前执行
2)任务:
a. 把一些vue无法自动清除的东西清除掉(例如:计时器、自定义事件【 滚轮事件】)
8.activated、deactivated
keep-alive专用的
9.errorCaptured
捕获子组件的错误