2024年Web前端最全Vue3和Mobx5都使用Proxy了，你更应该了解Proxy_vue3 mobx，web开发发展趋势

读者福利

========

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）

name: 'wonyun',
sex: 'male'

}
observe(data)

虽然Object.defineProperty通过为属性设置getter/setter能够完成数据的响应式，但是它并不算是实现数据的响应式的完美方案，某些情况下需要对其进行修补或者hack，这也是它的缺陷，主要表现在两个方面：


1. **无法检测到对象属性的新增或删除**

 由于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)`; 类似于删除响应式对象子对象的某个属性，也可以重新给子对象赋值来解决。
2. **不能监听数组的变化**

 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的巧用](https://bbs.csdn.net/topics/618166371)的一幅图，它很形象的表达了Proxy的作用。


![](https://img-blog.csdnimg.cn/img_convert/e33f8021b35921f567c4145b18b46699.png)


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](https://bbs.csdn.net/topics/618166371) | 获取对象的属性时拦截 |
| [handler.set](https://bbs.csdn.net/topics/618166371) | 设置对象的属性时拦截 |
| [handler.has](https://bbs.csdn.net/topics/618166371) | 拦截`propName in proxy`的操作，返回boolean |
| [handler.apply](https://bbs.csdn.net/topics/618166371) | 拦截proxy实例作为函数调用的操作，`proxy(args)`、`proxy.call(...)`、`proxy.apply(..)` |
| [handler.construct](https://bbs.csdn.net/topics/618166371) | 拦截proxy作为构造函数调用的操作 |
| [handler.ownKeys](https://bbs.csdn.net/topics/618166371) | 拦截获取proxy实例属性的操作，包括`Object.getOwnPropertyNames`、`Object.getOwnPropertySymbols`、`Object.keys`、`for...in` |
| [handler.deleteProperty](https://bbs.csdn.net/topics/618166371) | 拦截`delete proxy[propName]`操作 |
| [handler.defineProperty](https://bbs.csdn.net/topics/618166371) | 拦截`Objecet.defineProperty` |
| [handler.isExtensible](https://bbs.csdn.net/topics/618166371) | 拦截`Object.isExtensible`操作 |
| [handler.preventExtensions](https://bbs.csdn.net/topics/618166371) | 拦截`Object.preventExtensions`操作 |
| [handler.getPrototypeOf](https://bbs.csdn.net/topics/618166371) | 拦截`Object.getPrototypeOf`操作 |
| [handler.setPrototypeOf](https://bbs.csdn.net/topics/618166371) | 拦截`Object.setPrototypeOf`操作 |
| [handler.getOwnPropertyDescriptor](https://bbs.csdn.net/topics/618166371) | 拦截`Object.getOwnPropertyDescriptor`操作 |


Proxy代理目标对象，是通过操作上面的13种trap来完成的，这与ES6提供的另一个api[Reflect](https://bbs.csdn.net/topics/618166371)的13种静态方法一一对应。二者一般是配合使用的，在修改proxy代理对象时，一般也需要同步到代理的目标对象上，这个同步就是用`Reflect`对应方法来完成的。例如上面的`Reflect.set(target, key, value)`同步目标对象属性的修改。需要补充一点：



> 
> 13种trap操作方法中，若初始化时handler没设置的方法就直接操作目标对象，不会走拦截操作
> 
> 
> 


### Proxy的使用场景


Proxy因为在目标对象之前架设了一层拦截，外部对该目标对象的访问都必须经过这次拦截。那么通过这层拦截，可以做很多事情，例如控制过滤、缓存、数据验证等等，可以说Proxy的使用场景比较广，下面简单列举几个使用场景，更多实用场景可以参考[Proxy的巧用](https://bbs.csdn.net/topics/618166371)。


* **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实例，类似如下：

 
#### 结束  

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/45f2869b91b538dd3bb3290ba13bc806.png)