vue的生命周期

• vue生命周期分为四个阶段（常用的有8个，实际上有11个）
  • 第一阶段（创建阶段）：beforeCreate，created
    • 相当于人一生中：准备出生之前的阶段，精子+卵子，细胞组合-十月怀胎-出生
  • 在beforCreate之前
    • vue做了两件事：methos声明，生命周期钩子函数声明
  • 在创建阶段
    • data数据注入，data数据劫持
      • 1.遍历递归data选项，给每个声明式变量添加setter/getter
      • 2.把劫持过变量都放在组件实例上
  • 第二阶段（挂载阶段）：beforeMount，mounted
    • 相当于人一生中：找结婚证，出生证-上户口的过程
  • 在beforeMount之前
    • 会寻找是否有template/el的模板，组件的试图模板（带有指令的HTML字符串）
    • 把找到的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
      【为什么要有虚拟DOM这个“玩意”?】
      • 虚拟DOM存在的价值，大大降低了“Jquery时代，认为寻找DOM变化差异”的不足（因为每个人的主观不同，寻找的差异不同），最小化的去更新DOM（尽可能的减少DOM操作）。所以虚拟DOM是MVVM的本质，VM代表的就是虚拟DOM
  • 第四阶段（销毁阶段）：beforeDestroy/destroyed
    • 相当于人生中，死亡的过程
  • 在调用destroy（）或路由切换时，组件经入销毁阶段
    • 在销毁阶段中，vue做了如下事情
    • 1.拆卸掉了Watcher，所以DOM不可能再发生更新
    • 2.拆卸掉当前组件的所有子组件，所以这些子组件也会经入销毁阶段
    • 3.卸载掉当前组件中的事件处理器

  （生命周期的钩子函数，代表的是生命周期的某一时刻）