『Hello Vue』生命周期

103 阅读1分钟

beforeCreate => created

flowchart TD
init 
---
id4[initLifecycle <br> initEvents <br> initRender]
--> id1(beforeCreate)
---
id5[initInjections <br> initState <br> initProvide]
--> id2(created)

init --- id3[初始化生命周期与事件 <br> 初始化$listeners $attr] --> id1

beforeMount => mounted

flowchart TD
created
---
id4[template to render]
--> id1(beforeMount)
---
id5[vm._render <br> vm._update <br>  renderWatcher]
--> id2(mounted)

created --- id3[准备好render函数] --> id1

beforeUpdate => updated

flowchart TD
mounted
---
id4[dep.notify]
--> id1(beforeUpdate)
---
id5[renderWatcher options.before <br> updateComponent <br>  patch]
--> id2(updated)

mounted --- id3[依赖的数据变得触发notify] --> id1

beforeDestroy => destroyed

flowchart TD
mounted
---
id4[componentVNodeHooks.destroy <br> componentInstance.$destroy]
--> id1(beforeDestroy)
---
id5[remove parent.$children <br> vm._watcher.teardown <br> vm._watchers i.teardown <br> vm.__patch__ vm._vnode, null]
--> id2(destroyed)

mounted --- id3[patch中调用invokeDestroyHook <br> 继而调用data.hook.destroy] --> id1