vue3.0中的双向数据绑定方法
2024-10-19 06:24:21
熟悉vue的人都知道在vue2.x之前都是使用object.defineProperty来实现双向数据绑定的
而在vue3.0中这个方法被取代了
1. 为什么要替换Object.defineProperty
替换不是因为不好,是因为有更好的方法使用效率更高
Object.defineProperty的缺点:
1. 在Vue中,Object.defineProperty无法监控到数组下标的变化,
导致直接通过数组的下标给数组设置值,不能实时响应。
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
目前只针对以上方法做了hack处理,所以恰数组属性是检测不到的,有局限性。
2. Object.defineProperty只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。
Vue里,是通过递归以及遍历data对象来实现对数据的监控的,
如果属性值也是对象那么需要深度遍历,显然如果能劫持一个完整的对象,不管是对操作性还是性能都会有一个很大的提升。
而要取代它的Proxy有以下两个优点:
1. 可以劫持整个对象,并返回一个新对象
2. 有13种劫持操作
2. 什么是Proxy
Proxy是 ES6 中新增的一个特性,翻译过来意思是"代理",用在这里表示由它来“代理”某些操作。 Proxy 让我们能够以简洁易懂的方式控制外部对对象的访问。其功能非常类似于设计模式中的代理模式。 Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。 使用 Proxy 的核心优点是可以交由它来处理一些非核心逻辑(如:读取或设置对象的某些属性前记录日志;设置对象的某些属性值前,需要验证;某些属性的访问控制等)。 从而可以让对象只需关注于核心逻辑,达到关注点分离,降低对象复杂度等目的。
基本用法:
let p = new Proxy(target, handler);
参数:
target: 是用Proxy包装的被代理对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。
handler: 是一个对象,其声明了代理target 的一些操作,其属性是当执行一个操作时定义代理的行为的函数。
p是Proxy对象,当其他操作对p进行更改的时候,会执行handler对象的方法。Proxy有13种数据劫持的操作,常用的handler处理方法:
get: 读取值,
set: 获取值,
has: 判断对象是否拥有该属性,
construct: 构造函数
举个例子:
let obj = {};
let handler = {
get(target, property) {
console.log(`${property} 被读取`);
return property in target ? target[property] : 3;
},
set(target, property, value) {
console.log(`${property} 被设置为 ${value}`);
target[property] = value;
}
} let p = new Proxy(obj, handler);
p.name = 'tom' //name 被设置为 tom
p.age; //age 被读取 3
更多的Proxy属性方法参考MDN Proxy
3. Proxy实现数据劫持
observe(data) {
const that = this;
let handler = {
get(target, property) {
return target[property];
},
set(target, key, value) {
let res = Reflect.set(target, key, value);
that.subscribe[key].map(item => {
item.update();
});
return res;
}
}
this.$data = new Proxy(data, handler);
}
这段代码里把代理器返回的对象代理到this.$data,即this.$data是代理后的对象,外部每次对this.$data进行操作时,实际上执行的是这段代码里handler对象上的方法。
注:这儿用到了reflect属性,这也是ES6里面的,不知道的去这儿看看吧。reflect属性
最新文章
- silverlight导出excel
- hdu1141(二进制数位,二分,打表)
- Objective-C语言Foundation框架
- Hash哈希(一)
- VS2012窗口及编辑文本框背景颜色变黑
- Android之ScrollView嵌套ListView
- WebService是什么?
- spring+mybatis管理多个数据源(非分布式事务)
- PAT 1006
- 隐藏NavigationBar 带来的坑
- ArcGIS Server JavaScript API 各命名空间的含义【转】
- 编写类String的构造函数、拷贝构造函数、析构函数和赋值函数
- UIImageView之我的动画为什么停了?UIImageView, highLighted,animationImages
- C#中的多线程使用 -- Thread 类详解(转)
- Number Sequence(快速幂矩阵)
- Ext中setVersion和getVersion
- jq封装
- 离线安装Cloudera Manager 5和CDH5(最新版5.9.3) 完全教程(六)CM的安装
- 【巷子】---fetch---基本使用
- OC 对象和函数
热门文章
- 《Spring Cloud》学习(一) 服务治理!
- Spark学习之路(五)—— Spark运行模式与作业提交
- java源码解析之String类(二)
- feign之间传递oauth2-token的问题和解决
- 【Shell学习笔记3》实践项目自动部署脚本】shell中获取返回值、获取当前sh文件路径
- CSS清除默认样式代码
- 深入理解Java类加载
- BFS(五):八数码难题 (POJ 1077)
- HDU 3938:Portal(并查集+离线处理)
- Appium+python自动化(十九)- 猴哥失散多年的混血弟弟还是妹妹- Monkey(猴子)参数(超详解)