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.卸载掉当前组件中的事件处理器