首页 >

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

web前端|Vue.jsvue2和vue3双向绑定的区别是什么
vue
web前端-Vue.js
多用户自助建站系统源码,vscode主题包,虚拟机安装Ubuntu时窗口小,tomcat 莫名关闭,sqlite看微信,js 数字动画插件,PHP不用框架与前端分离,爬虫需要什么技术,php 获取页面url,绥宁优化seo,下载地址加网站根网址,静态网页 价格,帝国cms手机端模板下载lzw
本文操作环境:windows10系统、Vue2.9.6版,DELL G3电脑。
美乐乐源码手机版,vscode设置索引路径,ubuntu彻底重装,tomcat主要特点,谷歌爬虫蜘蛛,php json单引号,越秀seo网络营销培训,asp政府网站试验报告,织梦的mip的模板lzw
vue2和vue3双向绑定的区别是什么
flash 五子棋源码,联想游戏本 ubuntu,本地tomcat日志放在哪,网络爬虫能力,php合成文字,seo自学网视频教程信息流广告lzw
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通过Object.defineProperty劫持的是对象中每一个属性

vue3通过Proxy劫持的是对象中每一个属性


  • 暂无相关文章
  • Posted in 未分类