vue的生命周期

 

vue生命周期分为四个阶段（常用的有8个）

在beforCreate之前

vue做了两件事：methos声明，生命周期钩子函数声明

在创建阶段

data数据注入，data数据劫持

1.遍历递归data选项，给每个声明式变量添加setter/getter

2.把劫持过变量都放在组件实例上

第二阶段（挂载阶段）：beforeMount，mounted

在beforeMount之前

会寻找是否有template/el的模板，组件的试图模板

把找到的template视图（带有指令的HTML字符串），编译成render（）渲染函数

在挂载阶段

vue做了下面的事（vue引擎第一次工作）

1.根据render()渲染函数，生成“抽象语法树AST”（此时还是带有指令的），再把AST第一次创建成“虚拟DOM（VNode1）”（Vnode是真实DOM的一种数据描述，它本质上是json格式的数据）

2.根据Vnode1创建真实DOM（第一次接触，收集依赖，watcher发生在此处）把那些声明式变量全部替换成真实数据，DOM渲染完成

第三阶段（更新阶段）：beforeUpdate，updated

在beforeUpdate之前

当被劫持的data数据发生变化时，这将经入更新阶段

在更新阶段

vue做了以下事情：

1.当vue上下文的data发生变化时，使用render（）渲染函数在生成一新的Vnode2

2.使用大名鼎鼎的Diff运算，patch（old Vnode，new Vnode），找出两个Vnode最小差异，合并Vnode，生成新的Vnode，删除旧的Vnode

3.notify通过Watcher根据"依赖收集"在此更新真实DOM

第四阶段（销毁阶段）：beforeDestroy/destroyed

相当于人生中，死亡的过程

在调用destroy（）或路由切换时，组件经入销毁阶段

在销毁阶段中，vue做了如下事情

1.拆卸掉了Watcher，所以DOM不可能再发生更新

2.拆卸掉当前组件的所有子组件，所以这些子组件也会经入销毁阶段

3.卸载掉当前组件中的事件处理器