vue2和vue3双向绑定实例分析
这篇文章主要介绍“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双向绑定实例分析”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。
文章题目:vue2和vue3双向绑定实例分析
文章来源:http://scyanting.com/article/pdgdoh.html