vue生命周期图
2021-09-02 12:06:40 3 举报vue生命周期图
作者其他创作
大纲/内容
beforeCreated
⑥
YES
在内存中，基于数据和模板生成 HTML 结构
⑰
Create vm.$eland replace\"el\" with it
此时组件内部的 props，data，methods，页面 DOM 结构都没有，啥都干不了
⑨
updated
此时页面已经渲染完成，用户可以看到视图到此时，组件离开创建阶段，进入运行阶段如果使用第三方插件，在 mounted 中来初始化插件
Mounted
new 了一个 Vue 实例，进入组件创建过程
⑮
组件已经销毁，组件无法使用，data，methods 等不可访问
将内存中的页面渲染到视图上
Has\"el\" options?
⑫
⑤
⑦
Initinjections & reactivity
created
Has\"template\" options?
⑩
⑯
①
销毁过程：拆卸监视程序、子组件和事件侦听器
beforeUpdate
whenvm.$destroy()is called
NO
beforeDestroy
⑪
Compile el'souterHTMLas template *
初始化组件的事件和生命函数，执行完以后，所有的生命函数已经执行完毕，等待依次调用
Compile templateintorender function *
③
挂载之前调用，相关 render 函数被调用
当该函数被调用，说明已经渲染完成，视图已经是最新数据
mounted
已经完成数据观察（data observer）就是 data 里的数据要是有改动就能被观察到，并响应到视图上props，data，methods 已经可以使用，但是还没挂载，对于页面 DOM 不可见，即获取不到，操作不了页面 DOM 元素
⑭
Destroyed
when datachanges
根据最新的数据，重新渲染内存中的模板结构，并渲染到视图
⑧
⑬
运行
④
组件销毁之前，此时组件仍然可用，data，methods 等仍然可以正常访问
初始化 props，data，methods
whenvm.$mount(el)is called
②
destroyed
组件更新之前，此时数据已经是最新的，但是页面上数据还是旧的
new Vue()
InitEvents & Lifecycle
beforeMount
Virtual DOMre-renderand patch
0 条评论
下一页
