Vue2和Vue3区别的理解和学习2-数据绑定原理

数据绑定原理

vue 2使用ES5的Object.defineProperty实现数据的双向绑定，而Vue 3则采用ES6的Proxy来实现数据代理。
下面用代码实现两种数据绑定原理，来更直接的学习和理解它们。

Object.defineProperty

Object.defineProperty只能监听某个属性，不能对全对象进行监听。
接收三个参数：obj(需要在其上定义属性的对象)，key(需要定义的属性名)，描述符对象。
以下介绍描述符对象：

1. value – 属性对应的值,可以使任意类型的值，默认为undefined

<script setup>
  import { reactive } from 'vue'
  const obj = reactive({});
  Object.defineProperty(obj, 'keyname', {
    value: '添加属性'
  });
  console.log(obj.keyname); // 输出 添加属性
<script>

2. writable – 属性的值是否可以被重写。默认为false。

<template>
  <button @click="changedObj">changedObj</button>
</template>
<script setup>
  import { reactive } from 'vue'
  const obj = reactive({  })
  
  Object.defineProperty(obj, 'keyname', {
    value: '默认值',
    writable: true // or false
  });

  function changedObj() {
    obj.keyname = '新属性'
  }
</script>

结果
writable为true时，obj.keyname的值会被修改为‘新属性’；
writable为false时，报错如下

**注意：value / writable不能与get / set一起使用**

3. enumerable – 此属性是否可以被枚举。默认为false。

<template>
  <button @click="ergodicObj">ergodicObj</button>
</template>
<script setup>
  import { reactive } from 'vue'
  const obj = reactive({  })

  Object.defineProperty(obj, 'keyname', {
    value: '默认值',
    writable: true,
    enumerable: true // or false
  });

  function ergodicObj() {
    console.log(obj,'ooooo')
    for(let k in obj){
      console.log(obj[k]);
    }
  }
</script>

结果
enumerable 为true时，obj会被正常遍历输出值‘默认值’；
enumerable 为false时，obj不会被遍历，控制台无任何输出,如下图。

4. configurable – 是否可以删除目标属性或是否可以再次修改属性的特性(writable,configurable,enumerable),默认为false，值一旦被设置不能被修改。

<template>
  <button @click="deleteAttr">deleteAttr</button>
</template>
<script setup>
  import { reactive } from 'vue'
  const obj = reactive({  })

  Object.defineProperty(obj, 'keyname', {
    value: '默认值',
    writable: true,
    enumerable: true,
    configurable: true // or false
  });

  function deleteAttr() {
    delete obj.keyname
    console.log(obj.keyname)
  }
</script>

结果
configurable为true时，可以正常删除keyname属性，控制台输出undefined;
configurable为false时， 报错如下：

5. get / set – 取值 / 赋值

<template>
  <div>
    <button @click="addCount">addCount</button>
    <p>{{ obj.count }}</p>
  </div>
</template>
<script setup>
  function fun(obj, key, val) {
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get: function reactiveGetter() {
        return val;
      },
      set: function reactiveSetter(newVal) {
        if (newVal === val) return;
        val = newVal;
        console.log('当数据变化时，可以触发视图更新等操作')
      }
    });
  }

  import { reactive } from 'vue'
  const obj = reactive({ count: 1 })
  fun(obj, 'count', obj.count);

  function addCount() {
    obj.count++;
    fun(obj, 'count', obj.count);
  }
</script>

结果
当属性值发生变化时会触发get / set；如果get / set和value / writable同时使用时会报错如下:

Proxy

Proxy可以省去for in、闭包等操作来提升效率，并且能够直接绑定整个对象，同时也能监听数组的变化，无需使用this.$set()方法。

<template>
  <div>
    <button @click="changedProxy">修改代理对象的值</button>
    <p>原对象：{{ data.count }} --- 代理对象：{{ proxy.count }}</p>
   </div>
</template>
<script setup>
  import { reactive } from 'vue'
  const data = reactive({ count: 1 });

  const proxy = new Proxy(data, {
    get(target, property) {
      return Reflect.get(target, property);
    },
    set(target, property, value) {
      return Reflect.set(target, property, value);
    },
    deleteProperty(target, prop) {
      return Reflect.deleteProperty(target, prop);
    }
  });

  function changedProxy(){
    proxy.count++;
  }
</script>

参数

1. data – 需要代理的对象
2. 配置Proxy行为的对象。可指定get / set / deleteProperty等方法来定义属性被访问、修改或删除时的行为。
3. get / set / deleteProperty方法的参数，target(要读取的属性所在的对象)，property(要读取的属性名)，value(属性的值)。

总结

使用Proxy解决Object.defineProperty的以下问题：

1. 依赖跟踪有限：Vue 2 使用 Object.defineProperty 来跟踪依赖，但它不能监听数组的变化。
2. 不兼容性：Object.defineProperty 不能监听属性被删除或者在原型上添加新属性的变化。
3. 性能问题：大量使用 Object.defineProperty 会导致性能下降，因为它会递归地对所有属性进行定义。
4. 无法原生监听数组索引和长度的变化。