vue基础-vue的生命周期&计算属性&监听器

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

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

计算属性

+ 作用
	+ 1.把复杂的表达式从视图模板抽离出来，以便于视图代码的维护，提升可阅读性
	+ 2.计算属性可以封装业务方法，它会根据相关的声明式变量的变化而变化
+ 特点
	+ 1.计算属性要定义在computed中，它本质上是一个函数
	+ 2.计算属性可以当作一个响应式变量来访问，在js中使用this访问
	3.计算属性默认是get操作，所以计算属性可以用在指令上
	4.计算属性与多个声明式变量相关时，只要有任何一个声明式变量发生变化时。计算属性都会重新进行计算。反之，与其相关的声明式变量没有变化，无论其他变量如何变化，当前计算属性都不会重新运算。
	+.**5.计算属性还可以用在v-model上，单v-model还具有set的功能，所以计算属性要拆分陈get/set的写法** 
**总结:当我们感觉指令的表达式有点复杂时，建议将其封装成计算属性，我们不得不在指令使用“函数调用”时，建议封装计算属性（不建议封装methods方法）**
           

监听器（侦听器）

• 误解：这个侦听器watch，是vue组件的一个选项，不是响应式原理里面的Watcher。
• 作用：用于监听一个响应式变量（带有--ob--）的变化。比如工作中，我们要监听data，计算属性，vuex，$route等的变化
• 总结：当我们需要根据某个变量的变化时，做另外一件事，这里的watch就大有所为了