Vue生命周期
Init Event&lifecycle初始化事件和生命周期(没有数据代理)
beforeCreate 此时无法通过vm访问到data中的数据,和methods中的方法(因为没有数据代理)
__Init injection&reactivity__初始化数据代理和数据监测
created 此时可以通过vm访问到data中的数据,和methods中的方法(因为有了数据代理)
接下来阶段Vue开始解析模板,生成虚拟DOM(虚拟DOM在内存中),页面还不能显示解析好的内容
beforeMount 此时页面呈现的是未经和Vue编译的DOM 结构,对DOM的所有操作,最终都不奏效
Create vm.$el and replace “el” with it 此时vm.$el中存了一个真实DOM,这一步 将内存中的虚拟DOM转为真实的DOM插入页面
mounted 此时页面中呈现的是经过Vue编译的DOM,此时对DOM的操作均有效(但是尽可量避免),至此初始化过程结束,一般再此进行,开启定时器,发送网络请求,订阅消息,绑定自定义事件,初始化等操作
Mounted When data changes 进行 beforeUpdate
beforeUpdate 此时,数据是新的,但是页面是旧的,即页面尚未和数据保持同步
__Virtual DOM re-render and patch__根据新数据生成的虚拟DOM,随后与旧的虚拟DOM比较,最终完成页面更新,即完成Model->View的更新
updated 此时,数据是新的,页面也是新的,即数据和页面是同步的
when vm.$destory() is called
beforeDestory
Teardown watchers,child Components and event listeners 拆除监听,拆除子组件和事件监听器
Destroyed
destroyed vm销毁,但工作成果还在,完全销毁一个实例,清理它与其他实例的连接,解绑它的全部指令及事件监听器,解绑的事件是自定义事件而非DOM事件
以下给出Vue官网生命周期图示
Vue生命周期图示