生命周期 | 描述 |
---|---|
beforeCreate | 执行时组件实例还未创建,通常用于插件开发中执行一些初始化任务 |
created | 组件初始化完毕,各种数据 ,常用于异步数据获取 |
beforeMount | 未执行渲染、更新,dom未创建 |
mounted | 初始化结束,dom已创建,可用于获取访问数据和dom元素 |
beforeUpdate | 更新前,可用于获取更新前各种状态 |
updated | 更新后,所有状态已是最新 |
beforeDestroy | 销毁前,可用于一些定时器或订阅的取消 |
destroyed | 组件已销毁,作用同上 |
具体分析
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
,仅仅销毁实例