标签：劫持 Vue 绑定 proxy 双向 数据 监听 属性

一 Vue数据双向绑定原理：

Vue数据双向绑定原理是通过数据劫持结合发布者-订阅者模式的方式来实现的，首先是对数据进行监听，然后当监听的属性发生变化时则告诉订阅者是否要更新，若更新就会执行对应的更新函数从而更新视图。

二 在vue2.x版本中，数据劫持是用过Object.defineProperty这个API来实现：

Object.defineProperty的一些问题

• 递归遍历所有的对象的属性，这样如果我们数据层级比较深的话，是一件很耗费性能的事情
• 只能应用在对象上，不能用于数组
• 只能够监听定义时的属性，不能监听新加的属性，这也就是为什么在vue中要使用Vue.set的原因，删除也是同理 

三 在vue3版本中，使用了proxy去实现对象的监听，避免了以上问题的出现，下面我们用proxy实现一个简易版本的数据劫持：Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

• proxy可以直接监听数组的修改
• proxy可以直接监听属性的新增和删除
• 在实现深度监听的时候，只有在data对象的属性被访问的时候，才去对这个属性做监听处理，而不是一次性递归所有的。

推荐阅读：

Vue如何实现数据劫持：https://zhuanlan.zhihu.com/p/111591503

标签：劫持,Vue,绑定,proxy,双向,数据,监听,属性
来源： https://www.cnblogs.com/terrymin/p/14702962.html

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