Vue的生命周期分为三个阶段,分别为:
beforeCreate
- 组件创建前触发,目的是为了组件的生命周期 和 组件中的事件做准备
- 数据没有获得,真实dom也没有渲染出来
- 可以进行数据请求,提供了一次数据修改的机会
- 执行一次
created
- 组件创建结束
- 数据得到了,真实dom没有渲染出来
- 可以进行数据请求,提供了一次数据修改的机会
- 执行了一次
beforeMount
6. 组件挂载前
7. 任务: 判断el 判断 template
如果el没有,那么我们需要手动挂载,如果有,那么判断template
如果template有,那么进行render函数
如果template没有,那么通过 outerHTML 手动书写模板
8. 数据可以获得,但是真实dom还没有渲染
9. 可以进行数据请求,也提供了一次数据修改的机会
10. 执行一次
mounted
11. 组件挂载结束
12. 数据获得了,真实dom也获得了
13. 可以进行数据请求,也就可以修改数据
14. 执行了一次
15. 可以进行真实dom的操作了( 可以进行第三方库的实例化了 )
综上总结:
1. 数据请求一般写在created里面
2. 第三方库实例化我们一般会往mounted中写
第三方库的实例化要求,必须真实dom已经存在
运行中
触发条件:数据更新
beforeUpdate
1. 更新前
2. 重新渲染 VDOM , 然后通过diff算法比较两次vdom,生成patch 补丁对象
3. 这个钩子函数更多的是内部进行一些操作,我们就不在多干预了
4. 可以触发多次
updated
-
更新结束
-
真实dom得到了,数据也得到了( 更新后的 )
-
动态数据获取( 第三方库实例化 )
总结: 第三方动态数据请求一般放在updated,然后进行第三方库实例化的优化 1.理由: 将动态数据的第三方库实例化放在updated中是有弊端的,弊端是第三方库会重复实例化 2.解决: 将实例化放到异步队列中去 将实例化放在created的数据请求中,然后放在setTimeout中 vue提供了一个它认为是最好的方案: **nextTick** 使用: Vue.nextTick this.$nextTick nextTick表示组件渲染结束之后这个方法才会调用
销毁中
触发条件:当组件销毁时
beforeDestroy
- 销毁前
Destroy
- 销毁完成
这两个钩子功能一致
-
用来做善后的,比如计时器的关闭 第三方实例的删除
-
Vue的销毁有两种形式
-
通过开关的形式 - 外部销毁
- 外部销毁不仅能销毁组件,也能销毁该组件的dom结构
-
通过调用 $destroy 方法 - 内部销毁
- 内部销毁只能销毁组件,不能销毁组件的dom结构
-
最后在用几张网上找到图概括下
Vue.js官网上的生命周期: