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使用相同

修饰符	可用版本	说明
.lazy	所有	将用户输入的数据赋值于变量的时间有输入时延迟到数据改变时
.number	所有	自动转换用户输入为数值类型
.trim	所有	自动过滤用户输入的首尾的空白字符

<template>
  <div>
    <!-- 它会自动将输入的值自动转成number 类型（可以通过parseFloat转成数值，则会自动转，转不成功的返回原始：asdf123） -->
    <input type="text" v-model.number="number">
    <!-- 去除左右空格 -->
    <input type="text" v-model.trim="trim">
    <!-- 使用 .lazy 修饰符后，当改变数据失去焦点-触发change事件来进行更新数据  -->
    <input type="text" v-model.lazy="lazy">
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: null,
      lazy: null,
      trim: null,
    }
  }
};
</script>

2.2、子组件中使用

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