vue源码解析之MVVM原理实现

一、MVVM的原理分析

1. Observer对象

• 用来对 data 所有属性数据进行劫持的构造函数
• 给 data 中所有属性重新定义属性描述(get/set)
• 为 data 中的每个属性创建对应的 dep 对象

2. Dep(Depend)对象

• data 中的每个属性(所有层次)都对应一个 dep 对象
• 创建的时机:
  • 在初始化 define data 中各个属性时创建对应的dep对象
  • 在 data中的某个属性值被设置为新的对象时
• 对象的结构

{ 
  id, // 每个 dep 都有一个唯一的 id 
  subs //包含 n 个对应 watcher 的数组(subscribes 的简写) 
} 

• subs 属性说明
  • 当 watcher 被创建时, 内部将当前 watcher 对象添加到对应的 dep 对象的 subs 中
  • 当此 data 属性的值发生改变时, subs 中所有的 watcher 都会收到更新的通知,从而最终更新对应的界面

3. Compiler对象

• 用来解析模板页面的对象的构造函数(一个实例)
• 利用 compile 对象解析模板页面
• 每解析一个表达式(非事件指令)都会创建一个对应的 watcher 对象, 并建立 watcher 与 dep 的关系
• complie 与 watcher 关系: 一对多的关系

4. Watcher对象

• 模板中每个非事件指令或表达式都对应一个 watcher 对象
• 监视当前表达式数据的变化
• 创建的时机: 在初始化编译模板时
• 对象的组成

{ 
    vm, //vm 对象 
    exp, //对应指令的表达式 
    cb, //当表达式所对应的数据发生改变的回调函数 value, //表达式当前的值 
    depIds //表达式中各级属性所对应的 dep 对象的集合对象 
        //属性名为 dep 的 id, 属性值为 dep 
}

5. MVVM的实现实际上是分为两个阶段，第一个阶段是初始化阶段，第二个阶段是更新数据阶段。
6. 初始化阶段：

• 第一步，在new MVVM()的过程中，会创建两个实例对象，分别是Observer实例和Compile实例。
• 第二步， Observer实例主要是监视和劫持data中所有层次的属性，Observer也依赖于Dep，会创建一个Dep对象，与data中的属性一一对应，里面的结构是subs，里面保存n个watcher的数组容器。
• 第三步，Compile实例主要是解析指令属性和大括号表达式，Compile会初始化视图创建Updater对象，同时为表达式创建对应的Watcher对象，指定更新的函数，Watcher对象会与Dep对象建立关系，添加订阅者给Dep对象

7. 更新数据阶段：

• vm的数据在发生变化以后，比如vm.name = "张三"，data中的数据也会发生变化的，在data的属性中有一个set的方法，会进行劫持，通知变化给对应的Dep对象
• Dep对象就会通知所有相关的Watcher对象，Watcher对象调用Updater方法更新视图