双向绑定原理 / MVVM实现

实现 视图模型 必须要用到 ES5 中的 Object.defineProperty (vue2) 或者是 ES6 提供的 Proxy (vue3) .这两个都能做到 数据劫持.

【前端面试必备】Vue2与Vue3核心之『响应式原理』_哔哩哔哩_bilibili

1. 他们都是做代理，definedProperty 是对 对象中的属性 进行代理，Proxy 是直接把 对象 就代理了.

2. defineProperty 相对于 Proxy ,  他所代理的属性 能生成的属性很少(约5.6个) , Proxy的属性很多(约11个) , 配置选项很少 . 

3. Proxy支持数组的代理,defineProperty 不支持

4. defineProperty 兼容更好,IE8以上 , Proxy 需要支持ES6的浏览器,比如IE11.

1. definedProperty 是劫持对象的属性，不能监听属性的添加和删除，新增元素需要再次 definedProperty

2. Proxy 劫持的是整个对象，不需要做特殊处理

3. 使用 defineProperty 时，我们修改原来的 obj 对象就可以触发拦截，而使用 Proxy，就必须修改代理对象，即 Proxy 的实例才可以触发拦截

4. 使用 defineProperty 需要遍历对象的每一个属性，对于性能会有一定的影响

5. Proxy 可以对数组基于下标的修改的检测，长度修改的监测，而且对 Map、Set、WeakMap 和 WeakSet 的支持

 ————————————————
版权声明：本块引用CSDN博主「AvengerDrJ」的原创文章
原文链接：https://blog.csdn.net/qq_44818085/article/details/118275518