本文操作环境：windows10系统、Vue2.9.6版，DELL G3电脑。
vue2和vue3双向绑定的区别是什么
Vue2双向数据绑定存在的问题：
关于对象： Vue 无法检测 property 的添加或移除。
关于数组：不能利用索引直接设置一个数组项,也不能修改数组的长度。
Vue2.0
原理：使用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";//触发setVue3.0
原理：Vue3.0中的响应式采用了ES6中的 Proxy 方法。Proxy 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）
语法：
let p =new Proxy(obj,{get:(target,prop,p)=>{},set:(target, prop, vaule, p)=>{}})参数一： target:劫持对象，参数二：prop:劫持对象属性 , 参数三：vaule:新的属性值, p:本身
例子：
// vue3 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劫持的是对象中每一个属性
vue3通过Proxy劫持的是对象中每一个属性
【相关推荐：《vue.js教程》】
以上就是vue2和vue3双向绑定的区别是什么的详细内容，更多请关注php中文网其它相关文章！
