vue源码解析之MVVM原理实现

小咪咪 2023-07-03 06:07 4阅读 0赞

#### 一、MVVM的原理分析 ####

1.  **Observer对象**

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

1.  **Dep(Depend)对象**

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

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

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

1.  **Compiler对象**

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

1.  **Watcher对象**

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

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

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

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

1.  **更新数据阶段**：

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