vue2和vue3的数据双向绑定差异整理

1、底层实现比较

Vue 2： 使用其自定义的Object.defineProperty对象以及对象属性的劫持+发布订阅模式来实现双向数据绑定。只要数据发生变化直接通知变化 并驱动视图更新。

Object.defineProperty(obj, "name", { get:()=> {}, set:()=> {})

参数一： obj:劫持对象，参数二："name":劫持对象属性 , 参数三：给属性添加set,get方法

let obj = { name: "tom", age: 10 };
Object.defineProperty(obj, "name", {
get: () => {
console.log("访问了name属性");
},
set: (newVule) => {
console.log("设置了name属性");
},
});
obj.name; //触发get
obj.name = "jack";//触发set

Vue 3：V对底层进行了大量优化，包括使用了 ES6 的 Proxy 进行数据劫持，从而使得双向数据绑定更加高效。

let p =new Proxy(obj,{get:(target,prop,p)=>{},set:(target, prop, vaule, p)=>{}})

参数一： target:劫持对象，参数二：prop:劫持对象属性 , 参数三：vaule:新的属性值, p:本身

let p = new Proxy(obj, {
get: (target, prop, p) => {
console.log("获取");
return prop in target ? target[prop] : "默认值";
},
set: (target, prop, vaule, p) => {
console.log("设置");
target[prop] = vaule;
},
});
console.log(p.name); //访问了name属性
console.log((p.name = "java")); //设置了name属性

小结:

vue2通过Object.defineProperty劫持的是对象中每一个属性。由于使用发布-订阅模式，当数据变化时，所有订阅者都需要被通知，这可能导致性能问题，尤其是在大型应用中。关于对象： Vue 无法检测 property 的添加或移除。  关于数组：不能利用索引直接设置一个数组项,也不能修改数组的长度。

vue 3 引入了全新的响应式系统，基于 Proxy 对象实现，通过Proxy劫持的是对象中每一个属性。这种系统比 Vue 2 中的 Object.defineProperty() 更加高效和灵活。Proxy 能够直接拦截对象的操作，无需定义 getter 和 setter。可以更精确地检测到数据何时发生变化，从而减少不必要的更新，提高性能

2、vue语法:数据的双向绑定之v-model

2.1、v-model与修饰符 

vue2和vue3使用相同

2.2、子组件中使用

参考文章：vue2与vue3 v-model的区别