Vue2.0 与 Vue3.0 双数据绑定对比

<script>
    // Vue2.0使用Object.defineProperty()   
  /*
   * 原理：通过使用 Object.defineProperty 来劫持对象属性的 geter 和 seter 操作，当数据发生改变发出通知
   * 三个参数：劫持的对象，劫持的对象属性，对象（里面有两个重要的方法 get 和set）
   * 通过get方法获取属性值；
   * 通过set方法设置属性值;(一个参数：新的属性值)
   */
  /*  let obj = {};
   Object.defineProperty(obj, "prop", {
     get: function () {
       return val;
     },
     set: function (newValue) {
       console.log(`属性值发生了变化，变成了${newValue}`)
       val = newValue;
       document.getElementById('text').innerHTML = val;
     }
   })
   document.addEventListener("keyup", function (e) {
     obj.prop = e.target.value
   }) */

  // Vue3.0使用new Proxy()  
  /*
   * 原理：通过使用 new Proxy 来对目标对象进行拦截； 外界对该目标对象进行访问时，都必须先通过这层拦截，再通过这层拦截前，对目标对象进行拦截和改写
   * 两个参数：拦截的对象，对象（里面有两个重要的方法 get 和set）
   * 通过get方法获取属性值（三个参数：目标对象，目标对象属性，proxy对象也就是返回的对象）；
   * 通过set方法设置属性值（四个参数：目标对象，目标对象属性，新的属性值,proxy对象也就是返回的对象）
   */
  var obj = {};
  var newObj = new Proxy(obj, {
    // target就是第一个参数obj, receive就是返回的obj(返回的proxy对象)
    get: function (target, key, receive) {
      // 返回该属性值
      return target[key];
    },
    set: function (target, key, newVal, receive) {
      // 执行赋值操作
      console.log("newValue===", newVal)
      target[key] = newVal;
      document.getElementById('text').innerHTML = target[key];
　　　 console.log(newObj)
    }
  })
  document.addEventListener('keyup', function (e) {
    newObj['prop'] = e.target.value;
  });

</script>

　总结：

　　vue2.0中检测不到对象下标的变化（操作的是属性值）

　　vue3.0中监测整个对象并返回，可以检测到对象下标的变化（操作的是对象及对象的属性）

　　　　

 

ps：vue.use()方法和在prototype挂载的区别

vue.use实际上是调用了ininUse方法，这个方法有一个参数就是传递的组件，这个参数（plugin）必须是array或者object；

在这个方法里面会有一个install方法，用来注册组件，但是只有没有注册过的组件才会被注册（会有一个变量instatedPlugins来判断组件是否在该变量中存在）；

而prototype只能挂载一些方法