vue3双向数据绑定原理

概念

什么是双向数据绑定，这里就不做赘述了，vue的双向数据绑定是什么大家都很了解了，这里主要讲vue2和vue3中双向绑定的区别。

vue2中使用“Object.defineProperty”对象以及对象属性的劫持实现双向绑定；而vue3中的响应式采用了ES6中的“Proxy”方法实现双向绑定。

为什么要替换vue2的双向数据绑定

问题

关于对象： Vue 无法检测 property 的添加或移除。
关于数组：不能利用索引直接设置一个数组项,也不能修改数组的长度。

总结来说Object.defineProperty方法存在一定的局限性

1. 在Vue中，Object.defineProperty无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应。 为了解决这个问题，经过vue内部处理后可以使用以下几种方法来监听数组（ Vue为什么不能检测数组变动）

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

2. Object.defineProperty只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。Vue里，是通过递归以及遍历data对象来实现对数据的监控的，如果属性值也是对象那么需要深度遍历,显然如果能劫持一个完整的对象，不管是对操作性还是性能都会有一个很大的提升。

vue3双向绑定原理

什么是Proxy

Proxy 是ES6中新增的一个特性，可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

基本用法：

//ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。
var proxy = new Proxy(target, handler);

参数解释

1. target: 是用Proxy包装的被代理对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
2. handler: 是一个对象，其声明了代理target 的一些操作，其属性是当执行一个操作时定义代理的行为的函数。
   Proxy 对象的所有用法，都是上面这种形式，不同的只是handler参数的写法

Proxy的13种拦截

• get(target, propKey, receiver)：拦截对象属性的读取，比如proxy.foo和proxy[‘foo’]。
• set(target, propKey, value, receiver)：拦截对象属性的设置，比如proxy.foo = v或proxy[‘foo’] = v，返回一个布尔值。
• has(target, propKey)：拦截propKey in proxy的操作，返回一个布尔值。
• deleteProperty(target, propKey)：拦截delete proxy[propKey]的操作，返回一个布尔值。
• ownKeys(target)：拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for…in循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
• getOwnPropertyDescriptor(target, propKey)：拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。
• defineProperty(target, propKey, propDesc)：拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。
• preventExtensions(target)：拦截Object.preventExtensions(proxy)，返回一个布尔值。
• getPrototypeOf(target)：拦截Object.getPrototypeOf(proxy)，返回一个对象。
• isExtensible(target)：拦截Object.isExtensible(proxy)，返回一个布尔值。
• setPrototypeOf(target, proto)：拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。
• apply(target, object, args)：拦截 Proxy 实例作为函数调用的操作，比如proxy(…args)、proxy.call(object, …args)、proxy.apply(…)。
• construct(target, args)：拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(…args)。

例子

// #注：Proxy 实例也可以作为其他对象的原型对象。
var proxy = new Proxy({}, {
  get: function(target, property) {
    return 35;
  }
});

let obj = Object.create(proxy);
obj.time // 35

var handler = {
  get: function(target, name) {
    if (name === 'prototype') {
      return Object.prototype;
    }
    return 'Hello, ' + name;
  },

  apply: function(target, thisBinding, args) {
    return args[0];
  },

  construct: function(target, args) {
    return {value: args[1]};
  }
};

var fproxy = new Proxy(function(x, y) {
  return x + y;
}, handler);

fproxy(1, 2) // 1
new fproxy(1, 2) // {value: 2}
fproxy.prototype === Object.prototype // true
fproxy.foo === "Hello, foo" // true

Proxy实现数据劫持

observe(data) {
  const that = this;
  let handler = {
   get(target, property) {
      return target[property];
    },
    set(target, key, value) {
      let res = Reflect.set(target, key, value);
      that.subscribe[key].map(item => {
        item.update();
      });
      return res;
    }
  }
  this.$data = new Proxy(data, handler);
}