Vue.js设计与实现-Proxy和Reflect

开发 前端
我们可以看到打印的receiver并不等于state对象。这是因为get方法的第三个参数receiver,可以传递对象get调用者指向,即可以正确传递上下文。

1.写在前面

我们知道Vue2的响应式是使用Object.defineProperty来实现的,在实现对象响应式数据比较友好,但是对于实现数组的响应式数据就存在一些问题。而Vue.js3中的对象数据的响应式实现是通过Proxy对原始对象的代理,这样就能够在进行取值和设值操作时进行拦截,并对对象数据进行重新定义。那么Proxy是如何实现代理的呢?

2.Proxy代理

Proxy代理就是通过Proxy对一个原始对象进行基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)。

const p = new Proxy(target, handler);

在上面代码片段中,Proxy可以接收两个参数target、handler:

  • target:表示要进行代理的原始对象(可以是任意类型对象,函数、数组等)。
  • handler:通常以函数作为属性的对象,该对象是一组夹子(trap),各属性中的函数分别定义了在执行各种操作时代理 p 的行为。

那么接下来,我们就来使用下吧。

const data = {
name:"pingping",
age:18
}

const state = new Proxy(data, {
//拦截属性取值操作
get(target, key){
//在这里拦截打印数据
console.log(`我的${key}是:${target[key]}`);
return target[key];
},
//拦截属性设置操作
set(target, key, value){
//在这里拦截设置数据
target[key] = value;
console.log(`我的${key}数据更改为${target[key]}`);
return value
}
});

state.name;

state.name = "onechuan"

打印数据为:

控制台打印数据

在上面代码中,我们只用到了get的前两个参数target和target,分别表示代理的原始对象、被获取的属性名。其实Proxy的get方法中还可以传入第三个参数receiver,表示Proxy代理之后的对象或继承Proxy的对象。

  • target:被代理的原始对象。
  • property:被获取的属性名。
  • receiver:Proxy代理后的对象或者继承Proxy的对象。
const p = new Proxy(target, {
get: function(target, property, receiver) {
}
});

我们进行个简单的实践:

const data = {
name:"pingping",
age:18
}

const state = new Proxy(data, {
get: function(target, property, receiver) {
console.log(state === receiver);
return target[property];
}
});

state.name;

此时,看到控制台打印的结果是:

控制台打印结果

在上面举的例子中,的确receiver指的是Proxy代理之后的对象state,当然receiver也可以指向的是继承Proxy的对象。

const data = {
name:"pingping",
age:18
}

const state = new Proxy(data, {
get: function(target, property, receiver) {
console.log(state === receiver);
return target[property];
}
});

const obj = {
name:"onechuan"
}

//将obj对象原型设置为state对象,即obj继承state
Object.setPrototypeOf(obj, state);

obj.name;

控制台打印结果:

设置继承的打印结果

在上述代码和打印结果中,我们可以看到打印的receiver并不等于state对象。这是因为get方法的第三个参数receiver,可以传递对象get调用者指向,即可以正确传递上下文。

receiver不仅表示Proxy代理后的对象state本身,也会表示继承Proxy的对象。

const data = {
name:"pingping",
age:18,
get value(){
return this.name;
}
}

const state = new Proxy(data, {
get: function(target, property, receiver) {
console.log(this === receiver);//false
console.log(state === receiver);//false
console.log(obj === receiver);//true
return target[property];
}
});

const obj = {
name:"onechuan"
}

//将obj对象原型设置为state对象,即obj继承state
Object.setPrototypeOf(obj, state);

obj.value;

我们看到控制台的打印结果如下:

控制台打印结果

我们分析下上面代码,在访问obj.value时,在obj对象上本身是没有value属性的,它会通过原型去查找proxy对象state上的value属性取值器,会去触发state对象上的get value()操作符。此时,会触发state对象的取值拦截器,返回target[property]的值,这样使用obj.value取值就变成了data.value,最终返回的结果就是pingping。

具体的Proxy的一些API见MDN文档吧。

3.Reflect反射

在了解了Proxy后,我们再来讨论下Proxy的好兄弟Reflect,它们是如何配合工作的。

Reflect是一个全局内置的对象,它提供拦截JavaScript操作的方法。但是,Reflect本身不是个函数对象,因此其不是一个构造函数,不能使用new进行调用。Reflect的所有属性和方法都是静态的。

Reflect.get(target, propertyKey[, receiver])
  • target:需要取值的目标对象
  • propertyKey:需要获取的值的键值
  • receiver:如果target对象中指定了getter,receiver则为getter调用时的this值

那么,我们就使用Reflect来获取对象的属性吧:

const state = new Proxy(data, {
get: function(target, property, receiver) {
console.log(this === receiver);//false
console.log(state === receiver);//false
console.log(obj === receiver);//true
return Reflect.get(target, property);
// 等价于return target[property];
}
});

在控制台可以看到,打印结果是一样的:

控制台打印结果

在这里,使用Reflect.get(target, property)是等价于return target[property]的,this在Proxy.get拦截器中将this的指向了原始数据data对象,这样obj.value打印结果自然也是pingping。

如果我们要获取obj对象自身的name属性,应该怎么办?

onst state = new Proxy(data, {
get: function(target, property, receiver) {
console.log(this === receiver);//false
console.log(state === receiver);//false
console.log(obj === receiver);//true
return Reflect.get(target, property, receiver);
// 等价于return target[property];
}
});

打印结果:

打印结果

我们将Proxy.get的第三个参数receiver传入Reflect.get中,此时我们发现打印结果就变成了onechuan。这是因为Proxy.get的第三个参数receiver,可以表示代理对象state还可以表示继承代理对象state的对象obj。而在Reflect.get中传入了Proxy.get的第三个参数receiver,即obj对象作为参数,此时Reflect.get会把this的指向改为obj。

Reflect.get(target, key, receiver)其实可以理解为target[key].call(receiver),而Reflect.get的参数receiver作用:修改属性访问时this的指向receiver。

4.参考文章

《为什么Proxy一定要配合Reflect使用?》

《MDN文档关于Proxy的描述》

《MDN文档关于Reflect的描述》

《了解学习 Proxy 的好朋友 - Reflect,为什么需要 Reflect》

5.写在最后

在Vue.js3中使用Proxy来实现响应式数据,具体就是通过Proxy代理原始对象,通过拦截和修改对象的基本操作。在代理过程中,会出现取值器的this指向问题,此时需要使用Reflect的方法第三个参数receiver来解决。

责任编辑:武晓燕 来源: 前端一码平川
相关推荐

2022-04-04 16:53:56

Vue.js设计框架

2022-04-12 08:08:57

watch函数options封装

2022-04-25 07:36:21

组件数据函数

2022-04-01 08:08:27

Vue.js框架命令式

2022-05-03 21:18:38

Vue.js组件KeepAlive

2022-04-26 05:55:06

Vue.js异步组件

2022-04-18 08:09:44

渲染器DOM挂载Vue.js

2022-04-03 15:44:55

Vue.js框架设计设计与实现

2022-04-11 08:03:30

Vue.jscomputed计算属性

2022-04-05 16:44:59

系统Vue.js响应式

2021-11-26 05:59:31

Vue3 插件Vue应用

2022-04-17 09:18:11

响应式数据Vue.js

2022-04-09 17:53:56

Vue.js分支切换嵌套的effect

2017-07-20 11:18:22

Vue.jsMVVMMVC

2022-04-16 13:59:34

Vue.jsJavascript

2022-04-19 23:01:54

Vue.jsDOM节点DOM树

2019-04-01 19:38:28

Vue.jsJavascript前端

2022-04-20 09:07:04

Vue.js的事件处理

2018-04-04 10:32:13

前端JavascriptVue.js

2017-07-04 17:55:37

Vue.js插件开发
点赞
收藏

51CTO技术栈公众号