前言
关注 vue2.0
的同学都知道, vue2.0
实现响应式的方式的是通过 Object.defineProperty
,而 vue3.0的响应式实现是用的 ES6 的新语法 proxy
代理实现的。
其实不是所有vue3.0 的 API 都是用
proxy
实现的,比如:ref
、computed
,我们之后在解读 vue3 源码的时候详细解释
在 vue3.0 生态圈不断完善的今天,我们不可忽视的需要了解 vue3.0 的语法和实现方式,3.0 中最核心的 API 不过就是 Proxy
了,你真的了解了 Proxy
了吗?
什么是Proxy
Proxy
对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等) ----MDN
ts 中对 Proxy
接口的定义
interface ProxyHandler<T extends object> {
getPrototypeOf? (target: T): object | null;
setPrototypeOf? (target: T, v: any): boolean;
isExtensible? (target: T): boolean;
preventExtensions? (target: T): boolean;
getOwnPropertyDescriptor? (target: T, p: PropertyKey): PropertyDescriptor | undefined;
has? (target: T, p: PropertyKey): boolean;
get? (target: T, p: PropertyKey, receiver: any): any;
set? (target: T, p: PropertyKey, value: any, receiver: any): boolean;
deleteProperty? (target: T, p: PropertyKey): boolean;
defineProperty? (target: T, p: PropertyKey, attributes: PropertyDescriptor): boolean;
ownKeys? (target: T): PropertyKey[];
apply? (target: T, thisArg: any, argArray?: any): any;
construct? (target: T, argArray: any, newTarget?: any): object;
}
interface ProxyConstructor {
revocable<T extends object>(target: T, handler: ProxyHandler<T>): {
proxy: T; revoke: () => void; };
new <T extends object>(target: T, handler: ProxyHandler<T>): T;
}
declare var Proxy: ProxyConstructor;
Proxy 的语法
通过ts 的接口的定义可以发现 Proxy
有两种使用方式,可以通过 new
关键词调用,或者使用 Proxy.revocable
的静态方法。
通过 new
关键字调用
可以接收两个参数
参数名称 | 参数描述 |
---|---|
target | 需要 Proxy 包装的对象(可以是任意类型的对象,包括数组、函数,甚至是另一个 Proxy 的实例) |
handle | 一个以函数作为属性的对象,属性定义了在执行代理操作时的行为 |
const target = {
};
const proxy = new Proxy(target, {
get (target, key, receiver) {
return 123;
}
})
console.log(proxy.getData) // 123 通过 proxy 获取任何的属性的值,这里都会输出123
静态方法 Proxy.revocable
接收和通过 new
调用一样的参数,返回值时一个对象,包含 proxy
和