vue3和2响应式对比

2021-09-26 20:04:53 阅读：164 来源： 互联网

标签：count console log 响应 key vue3 obj 对比 target

vue2中, 数据响应式通过getter和setter来对对象的读取和写入劫持
并且对于对象是递归进行绑定的, 因此可以进行深层次的绑定
但是对于数组, 是通过重写数组方法对数组内数据劫持

Object.defineProperty(obj, count, {
     get(){},
     set () {}
   })
console.log(obj.count)

vue3中, 数据响应不再是通过getter和setter劫持的, 而是通过h5的proxy数据代理
对象和数组都是如此, 数据不用再使用重写后的方法才能实现响应式, 可以直接操作数组
代理会返回一个代理对象

<script>
  let obj = {
    count: 1
  }
  const pro = new Proxy(obj, {
    /*
    代理内部需要结合Reflect反射对象来使用
    代理上对应的方法和反射的方法几乎都有对应, 代理可以结合反射来使用
    反射同样也会对数据劫持, 并且上面只有静态方法, 不能被创建实例
    */
    get (target, key) {
      console.log('读取了')
      return Reflect.get(target, key)
    },
    set (target, key, val) {
      console.log('写入了')
      Reflect.set(target, key, val)
    },
    deleteProperty (target, key) {
      console.log('删除了')
      Reflect.deleteProperty(target, key)
    }
  })
  // obj.count += 1 // 不能操作原对象, 只能操作代理对象
  pro.count += 1
  console.log(pro.count)
   delete obj.count // 直接操作原对象并不会走代理的方法
  console.log(obj, pro)
  delete pro.count // 操作代理对象, 会走代理里面设置的方法
</script>
</body>
</html>

标签：count,console,log,响应,key,vue3,obj,对比,target
来源： https://blog.csdn.net/qq_50646256/article/details/120495911

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue3和2响应式对比