vue2和vue3双向绑定的区别是什么-Vue.js-PHP中文网

vue2和vue3双向绑定的区别是什么

WBOY

发布： 2022-03-17 14:36:50

原创

8518人浏览过

vue2和vue3中双向绑定的区别是：vue2中使用“Object.defineProperty”对象以及对象属性的劫持实现双向绑定；而vue3中的响应式采用了ES6中的“Proxy”方法实现双向绑定。

vue2和vue3双向绑定的区别是什么

本文操作环境：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方法

例子：

稿定AI社区

在线AI创意灵感社区

查看详情

 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

登录后复制

Vue3.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属性

登录后复制