废话不多说直接上表格分析
8个生命周期的描述以及适用场景
生命周期 | 描述 | 场景 |
---|---|---|
beforeCreate | 组件实例被创建之前 | 组件实例未被创建,通常用于插件开发中进行舒适化任务 |
created | 组件实例已经被创建 | 组件初始化完毕,各种数据可以用,常用于异步数据请求 |
beforeMount | 组件挂载之前 | dom未创建 |
mounted | 组件挂载完成 | 初始化结束,dom已创建,可用于获取访问数据和dom元素 |
deforeUpdate | 组件数据更新前 | 用于获取更新前的状态 |
updated | 组件数据更新后 | 获取最新状态 |
deforeDestroy | 销毁前 | 用于一些定时器和订阅的取消 |
destroy | 组件已销毁 | 用于一些定时器和订阅的取消 |
具体分析
beforeCreate -> created
-
初始化vue实例,进行数据观测
created -
完成数据观测,属性与方法的运算,watch、event事件回调的配置
-
可调用methods中的方法,访问和修改data数据触发响应式渲染dom,可通过computed和watch完成数据计算
-
此时vm.$el 并没有被创建
created -> beforeMount
- 判断是否存在el选项,若不存在则停止编译,直到调用vm.$mount(el)才会继续编译
- 优先级:render > template > outerHTML
- vm.el获取到的是挂载DOM的
beforeMount
- 在此阶段可获取到vm.el
- 此阶段vm.el虽已完成DOM初始化,但并未挂载在el选项上
beforeMount -> mounted
- 此阶段vm.el完成挂载,vm.$el生成的DOM替换了el选项所对应的DOM
mounted
- vm.el已完成DOM的挂载与渲染,此刻打印vm.$el,发现之前的挂载点及内容已被替换成新的DOM
beforeUpdate
-
更新的数据必须是被渲染在模板上的(el、template、render之一)
-
此时view层还未更新
-
若在beforeUpdate中再次修改数据,不会再次触发更新方法
updated
-
完成view层的更新
-
若在updated中再次修改数据,会再次触发更新方法(beforeUpdate、updated)
beforeDestroy
- 实例被销毁前调用,此时实例属性与方法仍可访问
destroyed
- 完全销毁一个实例。可清理它与其它实例的连接,解绑它的全部指令及事件监听器
并不能清除DOM,仅仅销毁实例
数据请求在created和Mounted的区别
created是在组件实例一旦创建完成的时候立刻调用,这时候页面dom节点并未生成,mounted是在页面dom节点渲染完毕之后就立刻执行的,触发时机上created是比mounted要更早的。
两者相同点:都能拿到实例对象的属性和方法
讨论这个问题本质就是触发的时机,放在mounted请求有可能导致页面闪动(页面dom结构已经生成),但如果在页面加载前完成则不会出现此情况
建议:放在create生命周期当中