温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue2和vue3双向绑定实例分析

发布时间:2022-03-17 15:03:22 来源:亿速云 阅读:230 作者:iii 栏目:编程语言

这篇文章主要介绍“vue2和vue3双向绑定实例分析”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue2和vue3双向绑定实例分析”文章能帮助大家解决问题。

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

本文操作环境: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";//触发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属性

关于“vue2和vue3双向绑定实例分析”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue
AI