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