vue2与vue3双向数据绑定的区别

2023-11-16 14:06:16

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

Vue2双向数据绑定存在的问题：
关于对象： Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对property执行 getter/setter转化，所以property必须在 data对象上存在才能让 Vue 将它转换为响应式的。

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

当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

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

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

vue3.0双向数据绑定Proxy
Vue3.0中的响应式采用了ES6中的Proxy方法。

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

语法：

const p = new Proxy(target, handler)

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

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

let obj = {
    a: 1,
    b: 2
}
const proxy = new Proxy(obj, {
    get: function(target, prop, receiver) {
        return prop in target ? target[prop] : 0
    },
    set: function(target, prop, value, receiver) {
        target[prop] = 666
    }
})
console.log(proxy.a) // 1
console.log(proxy.c) // 0
proxy.a = 10
console.log(proxy.a) // 666
obj.b = 10
console.log(proxy.b) // 不是666 而是10

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

handler.get()接收三个参数，第一个参数target为代理的目标对象，第二个参数prop是代理的目标对象的属性，第三个参数是Proxy或者继承Proxy的对象，通常是proxy本身。

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

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

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

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

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

<body>
    <h2 id="app"></h2>
  <input id="input" type="text" />
</body>

码农公寓

相关文章