vue生命周期过程做了什么

vue实例被创建

mixin初始化

实例的事件和生命周期初始化

beforeCreate

data，methods,props,computed, watch等初始化

通过Object.property数据劫持，给data每个属性，添加一个dep,setter被调用时通过dep通知此属性的所有watcher，getter触发添加新watcher到dep

created

虚拟dom生成:

是否有el，有则往下走，无则等待el的赋值(vm.$mount（el）被调用)

是否有template，有则使用，无则使用el的outHtml做为template

解析template：

标签名，标签内容，标签属性为虚拟dom数据

｛{}｝会newwatcher（watcher添加到data属性的dep中）

v-on

1. 会添加对应的事件监听

v-model

1. 会newwatcher，watcher会被添加到data属性的dep中
2. 会给此节点添加input事件监听，事件处理是input的值赋值给绑定的data属性

beforeMount

根据虚拟dom，使用document.createHtmlFragment()创建一个fragment，在其上进行局部dom结构的构建，替换el

mounted

……当data发生变化

beforeUpdate

生成新的虚拟dom

新旧虚拟dom比较生成diff算法结果

创建一个fragment截取el上dom，根据diff算法的结果更新dom：

•   从data取值替换文本节点带｛{}｝
•   从data取值更新输入框内容
•   将fragment替换el

渲染

1.  html分析器，分析dom结构，创建dom树
2. css分析器，分析css文件和inlinestyle，形成样式表
3. dom树和样式表相关联，形成render树
4. 浏览器进行页面布局，计算出节点在页面中精确位置
5. 浏览器绘制页面

updated

……

当vm. $destroy()被调用

beforeDestroy

销毁数据劫持，子组件实例，事件监听等

destoryed

……

当使用<keep-alive></keep-alive>包裹组件

当keepalive缓存的组件被激活时调用activated

activated

当keepalive组件被停用时调用deactivated

deativated

根据以上步骤：

创建过程

父组件beforeCreate->父组件created->子组件beforeCreate->子组件created->父组件beforemount->子组件beforemount->子组件mounted->父组件的mounted

更新过程

父组件beforeUpate->子组件beforeUpdate->子组件updated->父组件updated

销毁过程

父组件beforeDestory->子组件beforeDestroy->子组件destroyed->父组件destroyed