[JavaScript知识库]基于数据劫持实现的双向绑定 proxy与defineproperty的区别

Vue三要素
响应式: 例如如何监听数据变化,其中的实现方法就是我们提到的双向绑定
模板引擎: 如何解析模板
渲染: Vue如何将监听到的数据变化和解析后的HTML进行渲染
双向数据绑定是vue三要素之一
下面是我们常见的基于数据劫持的双向绑定
常见的基于数据劫持的双向绑定有两种实现,一个是目前Vue在用的Object.defineProperty,另一个是ES2015中新增的Proxy,而在Vue3.0版本后加入Proxy代替了Object.defineProperty

基于数据劫持实现的双向绑定的特点

1.什么是数据劫持?

数据劫持比较好理解,通常我们利用Object.defineProperty劫持对象的访问器,在属性值发生变化时我们可以获取变化,从而进行进一步操作。

// 这是将要被劫持的对象
const data = {
  name: '',
};

function say(name) {
  if (name === '古天乐') {
    console.log('给大家推荐一款超好玩的游戏');
  } else if (name === '渣渣辉') {
    console.log('戏我演过很多,可游戏我只玩贪玩懒月');
  } else {
    console.log('来做我的兄弟');
  }
}

// 遍历对象,对其属性值进行劫持
Object.keys(data).forEach(function(key) {
  Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    get: function() {
      console.log('get');
    },
    set: function(newVal) {
      // 当属性值发生变化时我们可以进行额外操作
      console.log(`大家好,我系${newVal}`);
      say(newVal);
    },
  });
});
data.name = '渣渣辉';

2.数据劫持的优势

1. 无需显示调用: 例如Vue运用数据劫持+发布订阅,直接可以通知变化并驱动视图,
2. 可精确得知变化数据

3.基于数据劫持双向绑定的实现思路

基于数据劫持的双向绑定离不开Proxy与Object.defineProperty等方法对对象/对象属性的"劫持",我们要实现一个完整的双向绑定需要以下几个要点。

1. 利用Proxy或Object.defineProperty生成的Observer针对对象/对象的属性进行"劫持",在属性发生变化后通知订阅者
2. 解析器Compile解析模板中的Directive(指令)，收集指令所依赖的方法和数据,等待数据变化然后进行渲染
3. Watcher属于Observer和Compile桥梁,它将接收到的Observer产生的数据变化,并根据Compile提供的指令进行视图渲染,使得数据变化促使视图变化

proxy与defineproperty的区别

vue的数据劫持有两个缺点:

• 无法监听通过索引修改数组的值的变化
• 无法监听object 也就是对象的值的变化
  所以vue2.x中才会有$set 属性的存在
  proxy是 es6中推出的新 api，可以弥补以上两个缺点，所以 vue3.x版本用 proxy 替换object.defineproperty。

Vue 的响应式原理中 Object.defineProperty 有什么缺陷?

• Object.defineProperty 无法监控到数组下标的变化，导致通过数组下标添加元素，不能实时响应；
• Object.defineProperty只能劫持对象的属性，从而需要对每个对象，每个属性进行遍历，如果，属性值是对象，还需要深度遍历。Proxy 可以劫持整个对象，并返回一个新的对象
• Proxy 不仅可以代理对象，还可以代理数组。还可以代理动态增加的属性

Proxy 相比于 defineProperty 的优势?

• 数组变化也能监听
• 不需要深度遍历监听