模拟Vue响应式原理

头像
HeiYanjing
    阅读 11 分钟
    1

    当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。
    image.png

    数据劫持

    vue2中数据劫持使用了Object.defineProperty来实现
    Object.defineProperty(obj, prop, descriptor)

    参数

    • obj要定义属性的对象。
    • prop要定义或修改的属性的名称或 Symbol 。
    • descriptor要定义或修改的属性描述符。

    返回值

    被传递给函数的对象。

    模拟vue中的data选项

      // 模拟 Vue 中的 data 选项
    let data = {
      msg: 'hello'
    }

    // 模拟 Vue 的实例
    let vm = {}

    // 数据劫持：当访问或者设置 vm 中的成员的时候，做一些干预操作
    Object.defineProperty(vm, 'msg', {
      // 可枚举（可遍历）
      enumerable: true,
      // 可配置（可以使用 delete 删除，可以通过 defineProperty 重新定义）
      configurable: true,
      // 当获取值的时候执行
      get () {
        console.log('get: ', data.msg)
        return data.msg
      },
      // 当设置值的时候执行
      set (newValue) {
        console.log('set: ', newValue)
        if (newValue === data.msg) {
          return
        }
        data.msg = newValue
        // 数据更改，更新 DOM 的值
        document.querySelector('#app').textContent = data.msg
      }
    })

    // 测试
    vm.msg = 'Hello World'
    console.log(vm.msg)

    image.png
    当data对象中有多个属性时，此时需要遍历vm,把每一个属性都转换成vm中的getter和setter

     // 模拟 Vue 中的 data 选项
    let data = {
      msg: 'hello',
      count: 10
    }

    // 模拟 Vue 的实例
    let vm = {}

    proxyData(data)

    function proxyData(data) {
      // 遍历 data 对象的所有属性
      Object.keys(data).forEach(key => {
        // 把 data 中的属性，转换成 vm 的 setter/setter
        Object.defineProperty(vm, key, {
          enumerable: true,
          configurable: true,
          get () {
            console.log('get: ', key, data[key])
            return data[key]
          },
          set (newValue) {
            console.log('set: ', key, newValue)
            if (newValue === data[key]) {
              return
            }
            data[key] = newValue
            // 数据更改，更新 DOM 的值
            document.querySelector('#app').textContent = data[key]
          }
        })
      })
    }

    // 测试
    vm.msg = 'Hello World'
    console.log(vm.msg)

    image.png
    vue3中的数据劫持使用了ES6中的Proxy来实现,他可以代理一整个对象
    const p = new Proxy(target, handler)
    参数

    • target要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
    • handler一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。即执行代理行为的函数

    MDN代码示例

    const handler = {
    get: function(obj, prop) {
        return prop in obj ? obj[prop] : 37;
    }
};

const p = new Proxy({}, handler);
p.a = 1;
p.b = undefined;

console.log(p.a, p.b);      // 1, undefined
console.log('c' in p, p.c); // false, 37

    测试示例

     <div id="app">
    hello
  </div>
  <script>
    // 模拟 Vue 中的 data 选项
    let data = {
      msg: 'hello',
      count: 0
    }

    // 模拟 Vue 实例
    let vm = new Proxy(data, {
      // 执行代理行为的函数
      // 当访问 vm 的成员会执行
      get (target, key) {
        console.log('get, key: ', key, target[key])
        return target[key]
      },
      // 当设置 vm 的成员会执行
      set (target, key, newValue) {
        console.log('set, key: ', key, newValue)
        if (target[key] === newValue) {
          return
        }
        target[key] = newValue
        document.querySelector('#app').textContent = target[key]
      }
    })

    // 测试
    vm.msg = 'Hello World'
    console.log(vm.msg)

    模拟VUE中的发布订阅模式
    发布/订阅模式

    • 订阅者
    • 发布者
    • 信号中心

    我们假定，存在一个"信号中心"，某个任务执行完成，就向信号中心"发布"（publish）一个信
    号，其他任务可以向信号中心"订阅"（subscribe）这个信号，从而知道什么时候自己可以开始执
    行。这就叫做"发布/订阅模式"（publish-subscribe pattern）

        // 事件触发器
    class EventEmitter {
      constructor () {
        // { 'click': [fn1, fn2], 'change': [fn] }
        this.subs = Object.create(null)
      }

      // 注册事件
      $on (eventType, handler) {
        this.subs[eventType] = this.subs[eventType] || []  // 初始化为数组,方便后面的push操作
        this.subs[eventType].push(handler)
      }

      // 触发事件
      $emit (eventType) {
        if (this.subs[eventType]) {
          this.subs[eventType].forEach(handler => {
            handler()
          })
        }
      }
    }

    // 测试
    let em = new EventEmitter()
    em.$on('click', () => {
      console.log('click1')
    })
    em.$on('click', () => {
      console.log('click2')
    })

    em.$emit('click')

    模拟VUE中的观察者模式
    观察者(订阅者) -- Watcher

    • update()：当事件发生时，具体要做的事情

    目标(发布者) -- Dep

    • subs 数组：存储所有的观察者
    • addSub()：添加观察者
    • notify()：当事件发生，调用所有观察者的 update() 方法

    没有事件中心
    代码模式实现

        // 发布者-目标
    class Dep {
      constructor () {
        // 记录所有的订阅者
        this.subs = []
      }
      // 添加订阅者
      addSub (sub) {
        if (sub && sub.update) {
          this.subs.push(sub)
        }
      }
      // 发布通知
      notify () {
        this.subs.forEach(sub => {
          sub.update() // 调用订阅者方法
        })
      }
    }
    // 订阅者-观察者
    class Watcher {
      update () {
        console.log('update')
      }
    }

    // 测试
    let dep = new Dep()
    let watcher = new Watcher()

    dep.addSub(watcher)

    dep.notify()
    • 观察者模式是由具体目标调度，比如当事件触发，Dep 就会去调用观察者的方法，所以观察者模式的订阅者与发布者之间是存在依赖的。

    • 发布/订阅模式由统一调度中心调用，因此发布者和订阅者不需要知道对方的存在。
      image.png

      Vue 响应式原理模拟

    • Vue.把 data 中的成员注入到 Vue 实例，并且把 data 中的成员转成 getter/setter
    • Observer.能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知 Dep
    • Compiler.解析每个元素中的指令/插值表达式，并替换成相应的数据
    • Dep.添加观察者(watcher)，当数据变化通知所有观察者
    • Watcher.数据变化更新视图

    image.png

    Vue类

    功能

    • 负责接收初始化的参数(选项)
    • 负责把 data 中的属性注入到 Vue 实例，转换成 getter/setter
    • 负责调用 observer 监听 data 中所有属性的变化

    • 负责调用 compiler 解析指令/插值表达式
      image.png

      class Vue {
constructor(options) {
  //   1，通过属性保存选项的数据
  this.$options = options || {}; // 初始化
  this.$data = options.data || {};
  this.$el =
    typeof options.el === "string"
      ? document.querySelector(options.el)
      : options.el;
  //   2，把data中的成员转换成getter和setter，注入到vue实例中
  this._proxyData(this.$data);
  //   3，调用observer对象，监听数据变化
  //   4，调用compiler对象，解析指令和差值表达式
}
_proxyData(data) {
  //   遍历data中的所有属性
  Object.keys(data).forEach((key) => {
    //   把data中的属性注入到vue实例中
    Object.defineProperty(this, key, {
      enumerable: true,
      configurable: true,
      get() {
        return data[key];
      },
      set(newVal) {
        if (newVal === data[key]) {
          return;
        }
        data[key] = newVal;
      },
    });
  });
}
}

      测试代码

      <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>myVue</title>
</head>

<body>
  <div class="app">
      <h1>差值表达式</h1>
      <h3>{{ msg }}</h3>
      <h3>{{ count }}</h3>
      <h1>v-text</h1>
      <div v-text="msg"></div>
      <h1>v-model</h1>
      <input type="text" v-model="msg">
      <input type="text" v-model="count">
  </div>
  <script src="./myVue.js"></script>
  <script>
      let vm = new Vue({
          el: "#app",
          data: {
              msg: "my vue",
              count: 1
          }
      })
  </script>
</body>

</html>

      image.png

    Observer类

    功能

    • 负责把 data 选项中的属性转换成响应式数据
    • data 中的某个属性也是对象，把该属性转换成响应式数据

    • 数据变化发送通知
      image.png
      功能初步实现

      class Observer {
constructor(data) {
  this.walk(data);
}
// 遍历对象所有属性
walk(data) {
  // 1，判断data是否是对象
  if (!data || typeof data !== "object") {
    return;
  }
  // 2，遍历data对象的所有属性
  Object.keys(data).forEach((key) => {
    this.defineReactive(data, key, data[key]);
  });
}
// 调动Object.defineProperty把属性转换为getter和setter
defineReactive(obj, key, val) {
  let that = this;
  // Dep类在Observer类做了两件事，先收集依赖，然后通知。
  let dep = new Dep(); //  负责收集依赖，并发送通知
  this.walk(val); // 解决问题一， data属性是对象类型， 如果val是对象，将val内部属性转换成响应式数据，
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get() {
      // 收集依赖
      Dep.target && dep.addSub(Dep.target);
      return val; // 这里如果是return obj[key]会发生死递归，返回的就是obj本身
    },
    set(newVal) {
      if (newVal === val) {
        return;
      }
      val = newVal;
      that.walk(newVal); // 解决问题二， 如果新赋值类型是对象类型，也需要循环处理，转换成响应式数据
      // 发送通知
      dep.notify();
    },
  });
}
}

      在vue.js中引入observer

      //   3，调用observer对象，监听数据变化
  new Observer(this.$data);

      控制台打印vm对象，对应的data对象属性已经转化为getter和setter
      image.png

    Compiler类

    功能(操作DOM)

    • 负责编译模板，解析指令/插值表达式
    • 负责页面的首次渲染
    • 当数据变化后重新渲染视图

    image.png

    class Compiler {
  constructor(vm) {
    this.el = vm.$el;
    this.vm = vm;
    this.compile(this.el);
  }
  //   编译模板，处理文本节点和元素节点
  compile(el) {
    let childNodes = el.childNodes;
    Array.from(childNodes).forEach((node) => {
      //   对节点类型进行判断
      // 处理文本节点
      if (this.isTextNode(node)) {
        this.compileText(node);
      } else if (this.isElementNode(node)) {
        // 处理元素节点
        this.compileElement(node);
      }
      // 判断node节点是否有子节点，有子节点判断递归compiler
      if (node.childNodes && node.childNodes.length) {
        this.compile(node);
      }
    });
  }
  //   编译元素节点，处理指令,这里处,理v-text,v-model
  compileElement(node) {
    console.log(node.attributes);
    // 遍历所有的属性节点
    Array.from(node.attributes).forEach((attr) => {
      // 判断是否是指令
      let attrName = attr.name;
      if (this.isDirective(attrName)) {
        // 处理指令
        //v-text ==>text
        attrName = attrName.substr(2); // 属性名
        let key = attr.value; // 属性值
        this.update(node, key, attrName);
      }
    });
  }

  update(node, key, attrName) {
    let updateFn = this[attrName + "Update"];
    // 使this指向compiler对象
    updateFn && updateFn.call(this, node, this.vm[key], key);
  }

  // 处理 v-text 指令
  textUpdate(node, value, key) {
    node.textContent = value;
    // 这里如法炮制，在创建指令的时候创建watcher对象
    new Watcher(this.vm, key, (newValue) => {
      node.textContent = newValue;
    });
  }

  // 处理v-model指令
  modelUpdate(node, value, key) {
    node.value = value;
    // 这里如法炮制，在创建指令的时候创建watcher对象
    new Watcher(this.vm, key, (newValue) => {
      node.value = newValue;
    });
    // 双向绑定，文本框值修改，视图改变，修改数据
    node.addEventListener("input", () => {
      this.vm[key] = node.value;
    });
  }

  //   编译文本节点，处理差值表达式
  compileText(node) {
    // console.dir(node)
    let reg = /\{\{(.+?)\}\}/;
    let value = node.textContent;
    if (reg.test(value)) {
      let key = RegExp.$1.trim();
    //   把msg中的值取出来，替换差值表达式，赋值给 node.textContent
      node.textContent = value.replace(reg, this.vm[key]);

      // 在创建实例的时候， 创建watcher对象，当数据改变更新视图
      new Watcher(this.vm, key, (newVal) => {
        node.textContent = newVal;
      });
    }
  }
  //   判断元素节点是否是指令
  isDirective(attrName) {
    return attrName.startsWith("v-");
  }
  //   判断节点是否是文本节点
  isTextNode(node) {
    return node.nodeType === 3;
  }
  // 判断节点是否是元素节点
  isElementNode(node) {
    return node.nodeType === 1;
  }
}

    Vue中的响应式，Vue负责把data中的属性存储到实例，并且调用Observer和Compiler,Observer负责数据劫持，监听数据变化，把data中的数据转换为getter和setter。Compiler负责解析差值表达式和指令，这里面需要使用观察者模式监听数据的变化
    image.png

    创建Dep和Watcher

    image.png

    Dep类

    功能

    • 收集依赖，添加观察者(watcher)

    • 通知所有观察者

      class Dep {
constructor() {
  // 存储所有的观察者
  this.subs = [];
}
// 添加观察者
addSub(sub) {
  //   判断是否为观察者对象
  if (sub && sub.update) {
    this.subs.push(sub);
  }
}
// 发送通知
notify() {
  this.subs.forEach((sub) => {
    sub.update();
  });
}
}

    Watcher类

    功能

    • 当数据变化触发依赖， dep 通知所有的 Watcher 实例更新视图

    • 自身实例化的时候往 dep 对象中添加自己
      image.png
      image.png

      class Watcher {
constructor(vm, key, cb) {
  this.vm = vm;
  // data中的属性名称
  this.key = key;
  // 回调函数负责更新视图
  this.cb = cb;
  // 把watcher对象记录到Dep类的静态属性target
  Dep.target = this;
  // 触发get方法，在get方法中会调用addSub
  this.oldValue = vm[key];
  Dep.target = null; // 防止重复添加
}
//   当数据发生变化时更新视图
update() {
  let newValue = this.vm[this.key];
  if (this.oldValue === newValue) {
    return;
  }
  this.cb(newValue);
}
}

    总结
    image.png

    vue.js
    HeiYanjing
    45 声望1 粉丝

    生活本就很艰难，且行且珍惜。

    « 上一篇
    VueRouter模拟实现
    下一篇 »
    Vue2中虚拟DOM和Snabbdom

    引用和评论

    推荐阅读
    头像
    vue3 动态绑定背景图片

    HeiYanjing阅读 1.8k

    头像
    更强大、更灵活！ defineModel 重新定义双向绑定

    南玖赞 3阅读 743

    头像
    TypeScript中的Omit与Pick：何时使用

    倔强青铜三赞 1阅读 1.2k

    头像
    原生electron起步-从零到一完成构建和打包

    兔子先森赞 1阅读 1.1k

    头像
    7天撸完KTV点歌系统,含后台管理系统(完整版)

    大卫talk赞 2阅读 6.8k

    头像
    如何将豆瓣观影记录实时同步至博客中

    Meng小羽阅读 4.2k

    头像
    vue3使用百度地图

    兔子先森赞 1阅读 1k

    0 条评论
    得票最新