MVVM实现原理

知识准备

[].slice.call(lis): 将伪数组转换为真数组
node.nodeType: 得到节点类型
Object.defineProperty(obj, propName, {}): 给对象添加/修改属性(指定描述符)
- configurable: true/false 是否可以重新 define
- enumerable: true/false 是否可以枚举(for..in / keys())
- value: 指定初始值
- writable: true/false value 是否可以修改
- get: 回调函数, 用来得到当前属性值
- set: 回调函数, 用来监视当前属性值的变化
Object.keys(obj): 得到对象自身可枚举的属性名的数组
DocumentFragment: 文档碎片(高效批量更新多个节点)
obj.hasOwnProperty(prop): 判断 prop 是否是 obj 自身的属性

然后了解

数据代理
模板解析
数据绑定

数据代理

数据代理:通过一个对象代理对另一个对象(在前一个对象内部)中属性的操作(读/写)
vue 数据代理:通过 vm 对象来代理 data 对象中所有属性的操作

基本实现流程

a. 通过 Object.defineProperty()给 vm 添加与 data 对象的属性对应的属性描述符
b. 所有添加的属性都包含 getter/setter
c. getter/setter 内部去操作 data

// 对指定属性实现代理
  _proxy: function (key) {
    // 保存vm
    var me = this;
    // 给vm添加指定属性名的属性(使用属性描述)
    Object.defineProperty(me, key, {
      configurable: false, // 不能再重新定义
      enumerable: true, // 可以枚举
      // 当通过vm.name读取属性值时自动调用
      get: function proxyGetter() {
        // 读取data中对应属性值返回(实现代理读操作)
        return me._data[key];
      },
      // 当通过vm.name = 'xxx'时自动调用
      set: function proxySetter(newVal) {
        // 将最新的值保存到data中对应的属性上(实现代理写操作)
        me._data[key] = newVal;
      }
    });
  }

模板解析

将 el 的所有子节点取出, 添加到一个新建的文档 fragment 对象中
对 fragment 中的所有层次子节点递归进行编译解析处理

对大括号表达式文本节点进行解析
对元素节点的指令属性进行解析
- 事件指令解析
- 一般指令解析

将解析后的 fragment 添加到 el 中显示

function Compile(el, vm) {
  // 保存vm
  this.$vm = vm;
  // 保存el元素
  this.$el = this.isElementNode(el) ? el : document.querySelector(el);
  // 如果el元素存在
  if (this.$el) {
    // 1. 取出el中所有子节点, 封装在一个framgment对象中
    this.$fragment = this.node2Fragment(this.$el);
    // 2. 编译fragment中所有层次子节点
    this.init();
    // 3. 将fragment添加到el中
    this.$el.appendChild(this.$fragment);
  }
}

image.png

数据绑定

一旦更新了 data 中的某个属性数据, 所有界面上直接使用或间接使用了此属性的节点都会更新

数据劫持

通过 defineProperty()来监视 data 中所有属性(任意层次)数据的变化, 一旦变化就去更新界面

MVVM原理

数据绑定_Dep与Watcher之间的关系

dep 与data中的属性一一对应
watcher 与模板中一般指令/大括号表达式一一对应

什么时候一个dep中关联多个watcher?

多个指令或表达式用到了当前同一个属性 {{name}} {{name}}

什么时候一个watcher中关联多个dep?

多层表达式的watcher对应多个dep {{a.b.c}}

执行过程

vw.name = 'abc' --> data中的name属性值变化 ---> name的set() 调用 --> dep --> 相关的所有watcher --> cb() ---> updater

dep 与 watcher 的关系

多对多的关系
data属性--> Dep -- > n个Watcher[模板中有多个表达式使用了此属性] 例如：{{a}} v-text="a"
表达式 --> Watcher --> n个Dep[多层表达式] 例如：a.b.c

如何建立？

data中属性的get()中建立
什么时候建立？
初始化的解析模板中的表达式创建watcher对象时

实现过程

Observer

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

Compiler

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

Dep(Depend)

data 中的每个属性(所有层次)都对应一个 dep 对象
创建的时机：在初始化 define data 中各个属性时创建对应的 dep 对象;在 data 中的某个属性值被设置为新的对象时
对象的结构
{ 
 id, // 每个 dep 都有一个唯一的 id
 subs //包含 n 个对应 watcher 的数组(subscribes 的简写)
}
subs 属性说明

当 watcher 被创建时, 内部将当前 watcher 对象添加到对应的 dep 对象的 subs 中

当此 data 属性的值发生改变时, subs 中所有的 watcher 都会收到更新的通知,从而最终更新对应的界面

Watcher

模板中每个非事件指令或表达式都对应一个 watcher 对象
监视当前表达式数据的变化
创建的时机: 在初始化编译模板时
对象的组成
{ 
 vm, //vm 对象 
 exp, //对应指令的表达式 
 cb, //当表达式所对应的数据发生改变的回调函数 
 value, //表达式当前的值 
 depIds //表达式中各级属性所对应的 
 dep 对象的集合对象 //属性名为 dep 的 id, 属性值为 dep
 }

我的理解

首先，从两个方面来说，
页面初始化时，需要对数据进行劫持监听，所以需要设置个Observer,用来监听data所有属性数据，给data中所有的属性重新定义属性描述get/set，并且创建对应的dep对象；如果属性发生变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理。然后,通过Compile解析指令属性/大括号表达式，初始化视图，并为表达式创建对应的watcher。
更新数据时，先触发监听器Observer,然后通知相应属性变化，Dep通知所有相关的watcher,此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图,并在相应Dep中添加订阅者。

MVVM结构图

黑线表示页面初始化
红线表示更新数据时