Vue3都使用Proxy了,你更应该了解Proxy
vue3.0的pre-alpha版代码已经开源了,就像作者之前放出的消息一样,其数据响应这一部分已经由ES6的Proxy
来代替Object.defineProperty
实现,感兴趣的同学可以看其实现源码,同样Mobx5也使用Proxy来实现数据响应式。vue和mobx都开始使用Proxy来实现数据的响应式了,所以有必要抽点时间了解下Proxy。
Object.defineProperty的缺陷
说到Proxy,就不得不提Object.defineProperty
,我们都知道,vue3.0之前的版本都是使用该方法来实现数据的响应式,具体是:
通过设定对象属性getter/setter方法来监听数据的变化,同时getter也用于依赖收集,而setter在数据变更时通知订阅者更新视图。
大概如下代码所示:
function defineReactive(obj, key, value) {
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get() {
collectDeps() // 收集依赖
return value
},
set(newVal) {
observe(newVal); // 若是对象需要递归子属性
if (newVal !== value) {
notifyRender() // 通知订阅者更新
value = newVal;
}
}
})
}
function observe(obj) {
if (!obj || typeof obj! === 'object') {
return
}
Object.keys(obj).forEach(key => {
defineReactive(obj, key, obj[key]);
})
}
var data = {
name: 'wonyun',
sex: 'male'
}
observe(data)
虽然Object.defineProperty通过为属性设置getter/setter能够完成数据的响应式,但是它并不算是实现数据的响应式的完美方案,某些情况下需要对其进行修补或者hack,这也是它的缺陷,主要表现在两个方面:
无法检测到对象属性的新增或删除
由于js的动态性,可以为对象追加新的属性或者删除其中某个属性,这点对经过Object.defineProperty方法建立的响应式对象来说,只能追踪对象已有数据是否被修改,无法追踪新增属性和删除属性,这就需要另外处理。
目前Vue保证响应式对象新增属性也是响应式的,有两种方式:
Vue.set(obj, propertName/index, value)
响应式对象的子对象新增属性,可以给子响应式对象重新赋值
data.location = {
x: 100,
y: 100
}
data.location = {...data, z: 100}
响应式对象删除属性,可以使用
Vue.delete(obj, propertyName/index)
或者vue.$delete(obj, propertyName/index)
; 类似于删除响应式对象子对象的某个属性,也可以重新给子对象赋值来解决。不能监听数组的变化
vue在实现数组的响应式时,它使用了一些hack,把无法监听数组的情况通过重写数组的部分方法来实现响应式,这也只限制在数组的
push/pop/shift/unshift/splice/sort/reverse
七个方法,其他数组方法及数组的使用则无法检测到,例如如下两种使用方式:vm.items[index] = newValue
vm.items.length--
那么vue怎么实现数组的响应式呢,并不是重写数组的
Array.prototype
对应的方法,具体来说就是重新指定要操作数组的prototype,并重新该prototype中对应上面的7个数组方法,通过下面代码简单了解下实现原理:const methods = ['pop','shift','unshift','sort','reverse','splice', 'push'];
// 复制Array.prototype,并将其prototype指向Array.prototype
let proto = Object.create(Array.prototype);
methods.forEach(method => {
proto[method] = function () { // 重写proto中的数组方法
Array.prototype[method].call(this, ...arguments);
viewRender() // 视图更新
}
}) function observe(obj) {
if (Array.isArray(obj)) { // 数组实现响应式
obj.__proto__ = proto; // 改变传入数组的prototype
return;
}
if (typeof obj === 'object') {
... // 对象的响应式实现
}
}
Proxy的使用
Proxy,字面意思是代理,是ES6提供的一个新的API,用于修改某些操作的默认行为,可以理解为在目标对象之前做一层拦截,外部所有的访问都必须通过这层拦截,通过这层拦截可以做很多事情,比如对数据进行过滤、修改或者收集信息之类。借用proxy的巧用的一幅图,它很形象的表达了Proxy的作用。
ES6原生提供的Proxy构造函数,用法如下:
var proxy = new Proxy(obj, handler)
其中obj为Proxy要拦截的对象,handler用来定制拦截的操作,返回一个新的代理对象proxy;Proxy代理特点:
Proxy直接代理整个对象而非对象属性
Proxy的代理针对的是整个对象,而不是像Object.defineProperty针对某个属性。只需做一层代理就可以监听同级结构下的所有属性变化,包括新增属性和删除属性
Proxy也可以监听数组的变化
例如上面vue使用的Object.defineProperty实现响应式方式用Proxy来实现则相对比较简单:
let handler = {
get(target, key){
if (target[key] === 'object' && target[key]!== null) {
// 嵌套子对象也需要进行数据代理
return new Proxy(target[key], hanlder)
}
collectDeps() // 收集依赖
return Reflect.get(target, key)
},
set(target, key, value) {
if (key === 'length') return true
notifyRender() // 通知订阅者更新
return Reflect.set(target, key, value);
}
}
let proxy = new Proxy(data, handler);
proxy.age = 18 // 支持新增属性
let proxy1 = new Proxy({arr: []}, handler);
proxy1.arr[0] = 'proxy' // 支持数组内容变化
上面的Proxy的构造函数中的
get/set
为Proxy定义的13种的trap
中的其中两种,它共有13种代理操作方法:trap 描述 handler.get 获取对象的属性时拦截 handler.set 设置对象的属性时拦截 handler.has 拦截 propName in proxy
的操作,返回booleanhandler.apply 拦截proxy实例作为函数调用的操作, proxy(args)
、proxy.call(...)
、proxy.apply(..)
handler.construct 拦截proxy作为构造函数调用的操作 handler.ownKeys 拦截获取proxy实例属性的操作,包括 Object.getOwnPropertyNames
、Object.getOwnPropertySymbols
、Object.keys
、for...in
handler.deleteProperty 拦截 delete proxy[propName]
操作handler.defineProperty 拦截 Objecet.defineProperty
handler.isExtensible 拦截 Object.isExtensible
操作handler.preventExtensions 拦截 Object.preventExtensions
操作handler.getPrototypeOf 拦截 Object.getPrototypeOf
操作handler.setPrototypeOf 拦截 Object.setPrototypeOf
操作handler.getOwnPropertyDescriptor 拦截 Object.getOwnPropertyDescriptor
操作
Proxy代理目标对象,是通过操作上面的13种trap来完成的,这与ES6提供的另一个apiReflect
的13种静态方法一一对应。二者一般是配合使用的,在修改proxy代理对象时,一般也需要同步到代理的目标对象上,这个同步就是用Reflect
对应方法来完成的。例如上面的Reflect.set(target, key, value)
同步目标对象属性的修改。需要补充一点:
13种trap操作方法中,若初始化时handler没设置的方法就直接操作目标对象,不会走拦截操作
Proxy的使用场景
Proxy因为在目标对象之前架设了一层拦截,外部对该目标对象的访问都必须经过这次拦截。那么通过这层拦截,可以做很多事情,例如控制过滤、缓存、数据验证等等,可以说Proxy的使用场景比较广,下面简单列举几个使用场景,更多实用场景可以参考Proxy的巧用。
Vue3的数据响应
vue3中利用Proxy实现数据读取和设置时进行拦截,在拦截trap中实现数据的依赖收集以及触发视图更新操作,vue3该部分实现的主要伪码如下:
function get(target, key, receiver) { // handler.get的拦截实现
const res = Reflect.get(target, key, receiver)
if(isSymbol(key) && builtInSymbols.has(key)) return res
if (isRef(res)) return res.value
track(target, OperationTypes.GET, key) // 收集依赖
return isObject(res) ? reactive(res) : res
}
// handler.set的拦截操作
function set(target, key, value, receiver) {
value = toRaw(value) // 获取缓存响应数据
oldValue = target[key]
if (isRef(oldValue) && !isRef(value)) {
oldValue.value = value
return true
}
const result = Reflect.set(target, key, value, receiver)
if (target === toRaw(receiver)) { //set拦截只限对象本身
... // 不同环境操作处理,并省略下面trigger方法第二参数获取逻辑
trigger(target, OperationTypes.x, key) // 触发视图更新
}
return result
}
获取属性对应的值,无该属性或者属性为空返回默认值
在项目中经常遇到这样的需求,在前端拿到后端返回的数据时,获取某些可选字段时,如果其值为空或者不存在该属性时,可以设置一个默认值,类似loadsh库的get方法
_.get(object, path, [defaultValue])
。下面就对象形式下_.get用Proxy来实现,代码如下:function getValueByPath(object, path, defaultValue) {
let proxy = new Proxy(object, {
get(target, key) {
if (key.startsWith('.')) {
key = key.slice(1);
}
if (key.includes('.')) {
path = path.split('.');
let index = 0, len = path.length;
while(target != null && index < len) {
target = target[path[index++]]
}
return target || defaultValue;
}
if (!(key in target) || !target[key]) {
return defaultValue
}
return Reflect.get(target, key)
}
});
return proxy[path]
}
需要注意的是,参数path若有类似
a.b.c
这样嵌套的路径时,我们是直接在Proxy的handler.get
中处理的,如果在proxy对象实例上调用如proxy.a.b.c
则需要在Proxy的handler.get
对返回对象的属性还需要创建其Proxy实例,类似如下:function getValueByPath(object, path, defaultValue) {
return proxy = new Proxy(object, {
get(target, key) {
if (isObject(target[key])){
return new Proxy(target[key], {get(){}})
}
... // 其他省略
}
})
}
实现数组负数索引的访问
正常的数组,如果访问数组的负数索引会得到undefined,现在要实现类似字符串的
substr
方法,传递负数索引index,表示从倒数第index开始读取,实现拦截如下:function getArrItem(arr) {
return new Proxy(arr, {
get(target, key, receiver) {
let index = Number(key);
if (index < 0) {
key = String(target.length + index);
}
return Reflect.get(target, key, receiver)
}
});
}
Proxy的劣势
虽然Proxy相对于Object.defineProperty有很有优势,但是并不是说Proxy就没有劣势,这主要表现在以下两个方面:
兼容性问题,无完全polyfill
Proxy为ES6新出的API,浏览器的对其支持情况可以在caniuse查到,如下图所示:
可以看出虽然大部分浏览器支持Proxy特性,但是一些浏览器或者其低版本不支持Proxy,其中IE、QQ浏览器、百度浏览器等完全不支持,因此Proxy有兼容性问题。那能否像ES6其他特性那样有对应的polyfill解决方案呢,答案并不那么乐观。其中作为ES6转换的翘楚babel,在其官网明确做了说明:
Due to the limitations of ES5, Proxies cannot be transpiled or polyfilled.
也就是说,由于ES5的限制,ES6的Proxy没办法被完全polyfill,所以babel没有提供对应的转换支持,Proxy的实现是需要JS引擎级别提供支持,目前大部分主要的JS引擎提供了支持,可以查看ES6 Proxy compatibilit。
然而,截止目前2019年10月,Google开发的Proxy polyfill:proxy-polyfill,其实现也是残缺的,表现在:
只支持Proxy的4个trap:
get
、set
、apply
和construct
部分支持的trap其功能也是残缺的,如
set
不支持新增属性该polyfill不能代理数组
性能问题
Proxy的另一个就是性能问题,为此有人专门做了一个对比实验,原文在这里thoughts-on-es6-proxies-performance,对应的中文翻译可以参考ES6 Proxy性能之我见。Proxy的性能比Promise还差,这就要需要在性能和简单实用上进行权衡。例如vue3使用Proxy后,其对对象及数组的拦截很容易实现数据的响应式,尤其对数组来说。
另外,Proxy作为新标准将受到浏览器厂商重点持续的性能优化,性能这块相信会逐步得到改善。
参考文献
Vue3都使用Proxy了,你更应该了解Proxy的更多相关文章
- MySQL select * 和把所有的字段都列出来,哪个效率更高?
MySQL select * 和把所有的字段都列出来,哪个效率更高 答案是:如何,都不推荐使用 SELECT * FROM (1)SELECT *,需要数据库先 Query Table Metadat ...
- 2019 .NET China Conf:路一直都在,社区会更好
这个周末,我从成都飞到了上海参加了首届由社区组织而非官方(比如Microsoft)组织的.NET开发者峰会(.NET Conf).为此,我特意请了两天的假(周五+周六,对,我们是大小周,这周六要上班) ...
- Differences Between 3 Types Of Proxy Servers: Normal, Transparent And Reverse Proxy
What is a Proxy Server? A Proxy server is an intermediary machine, between a client and the actual s ...
- Vue3 为何使用 Proxy 实现数据监听
博客地址:https://ainyi.com/93 vue3 响应式数据放弃了 Object.defineProperty,而使用Proxy来代替它 我们知道,在 vue2 中,实现数据监听是使用Ob ...
- vue3中的通过proxy实现双向数据绑定的原理
1.什么是Proxy?它的作用是? 据阮一峰文章介绍:Proxy可以理解成,在目标对象之前架设一层 "拦截",当外界对该对象访问的时候,都必须经过这层拦截,而Proxy就充当了这种 ...
- Vue3.0 响应式数据原理:ES6 Proxy
Vue3.0 开始用 Proxy 代替 Object.defineProperty了,这篇文章结合实例教你如何使用Proxy 本篇文章同时收录[前端知识点]中,链接直达 阅读本文您将收获 JavaSc ...
- 深入理解Proxy 及 使用Proxy实现vue数据双向绑定
阅读目录 1.什么是Proxy?它的作用是? 2.get(target, propKey, receiver) 3.set(target, propKey, value, receiver) 4.ha ...
- 好久没发文了,一篇Vue3的Composition API使用奉上
Composition API Composition API是Vue3中推荐的组件代码书写方式,相较于传统的Options API来说,它能让业务逻辑处理和后期代码维护变的更加简单. 首先我们来看O ...
- 告别Vuex,发挥compositionAPI的优势,打造Vue3专用的轻量级状态
Vuex 的遗憾 Vuex 是基于 Vue2 的 option API 设计的,因为 optionAPI 的一些先天问题,所以导致 Vuex 不得不用各种方式来补救,于是就出现了 getter.mut ...
随机推荐
- FreeSql (十)更新数据
FreeSql支持丰富的更新数据方法,支持单条或批量更新,在特定的数据库执行还可以返回更新后的记录值. var connstr = "Data Source=127.0.0.1;Port=3 ...
- FreeSql (十三)更新数据时忽略列
var connstr = "Data Source=127.0.0.1;Port=3306;User ID=root;Password=root;" + "Initia ...
- .Net基础篇_学习笔记_第六天_for循环的几个练习
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- 连环清洁工之特殊任务--java资源如何关闭?
小C是一名特殊的黑客,他专门为黑客提供服务,扫除黑客攻击的痕迹,避免被查到为何人攻击. 今天他正兴致勃勃的玩游戏<连环清洁工>,连环清洁工是由iFun4all S.A.制作发行的一款犯罪题 ...
- linux iconv 转换文件编码
查看文件编码file -i filename 递归转换(包括子文件夹)find default -type d -exec mkdir -p utf/{} \;find default -type f ...
- [Spark] 05 - Spark SQL
关于Spark SQL,首先会想到一个问题:Apache Hive vs Apache Spark SQL – 13 Amazing Differences Hive has been known t ...
- [c++] 面试题之犄角旮旯 第壹章
记录C/C++语言相关的问题. 算法可视化:https://visualgo.net/en <data structure and algorithm in c++> By Adam 有免 ...
- ECSHOP完美解决Deprecated: preg_replace()报错的问题
随着PHP5.5 的普及,ECSHOP系统又爆出了新的错误.PHP发展到PHP5.5版本以后,有了很多细微的变化.而ECSHOP官方更新又太慢,发现这些问题后也不及时升级,导致用户安装使用过程中错误百 ...
- selenium-01-简介
一.Selenium是什么? Selenium是ThroughtWorks公司一个强大的开源Web功能测试工具系列,本系列现在主要包括以下4款: 1.Selenium Core:支持DHTML的测试案 ...
- 解决行内块元素(inline-block)之间的空格或空白问题
一.问题产生 由于html代码格式化后,标签会缩进或者换行.由于浏览器默认处理导致元素在页面显示中出现单个空格问题,尤其在行内或者行内块元素布局时影响比较明显 例如: 代码 页面显示 二.解决方案 这 ...