<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <h4>前言：</h4> 讯享网
新的响应式机制采用了ES6的ProxyApi，抛弃了Object.defineProperty()
Vue2双向数据绑定存在的问题：
关于对象： Vue 无法检测 的添加或移除。由于 Vue 会在初始化实例时对执行 转化，所以必须在 对象上存在才能让 Vue 将它转换为响应式的。
关于数组： Vue 不能检测以下数组的变动：
在官网深入响应式原理一章有较详细阐述，针对以上两种情况解决方法，官网也有给出答案，那就是使用方法。
原理：
Vue2.0使用对象以及对象属性的劫持+发布订阅模式，只要数据发生变化直接通知变化 并驱动视图更新。
讯享网
vue3.0双向数据绑定Proxy
Vue3.0中的响应式采用了ES6中的Proxy方法。
Proxy 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）
语法：
讯享网
参数表示要使用包装的对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）
参数是一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 的行为
以上代码中是我们要代理的目标对象，，方法是参数的两个属性，具体如下：
接收三个参数，第一个参数为代理的目标对象，第二个参数是代理的目标对象的属性，第三个参数是或者继承的对象，通常是本身。
接收四个参数，其中三个参数都与方法相同，唯独多出来一个表示新的属性值。
上述代码表示当访问的属性时，进行拦截判断，该属性是否是目标对象的属性，如果是那么就将其值返回出来，否则就返回。
当对上的属性进行重写时，将重写的该属性赋值为。
注意： 此时对数据的劫持，只是劫持了代理对象，而跟原对象没有任何关系，对进行操作，也不会监听到。
用实现一个简易版的数据响应：
讯享网
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/176633.html