vue2和vue3区别数据双向绑定（vue3数据双向绑定原理）



前言：

新的响应式机制采用了ES6的ProxyApi，抛弃了Object.defineProperty()

Vue2双向数据绑定存在的问题：

关于对象： Vue 无法检测 的添加或移除。由于 Vue 会在初始化实例时对执行 转化，所以必须在 对象上存在才能让 Vue 将它转换为响应式的。

关于数组： Vue 不能检测以下数组的变动：

在官网深入响应式原理一章有较详细阐述，针对以上两种情况解决方法，官网也有给出答案，那就是使用方法。

原理：

Vue2.0使用对象以及对象属性的劫持+发布订阅模式，只要数据发生变化直接通知变化 并驱动视图更新。

vue3.0双向数据绑定Proxy

Vue3.0中的响应式采用了ES6中的Proxy方法。

Proxy 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）

语法：

参数表示要使用包装的对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）

参数是一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 的行为

以上代码中是我们要代理的目标对象，，方法是参数的两个属性，具体如下：

接收三个参数，第一个参数为代理的目标对象，第二个参数是代理的目标对象的属性，第三个参数是或者继承的对象，通常是本身。

接收四个参数，其中三个参数都与方法相同，唯独多出来一个表示新的属性值。

上述代码表示当访问的属性时，进行拦截判断，该属性是否是目标对象的属性，如果是那么就将其值返回出来，否则就返回。

当对上的属性进行重写时，将重写的该属性赋值为。

注意： 此时对数据的劫持，只是劫持了代理对象，而跟原对象没有任何关系，对进行操作，也不会监听到。

用实现一个简易版的数据响应：

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/sjkxydsj/41130.html