丽江做网站,互联网营销策划,带icp备案的网站,遵义网站开发哪家好文章目录 RefReactive Ref
ref 的语义是指向一个值的引用#xff0c;主要用于处理基本数据类型和单一值对象#xff0c;即对值的引用进行包装和管理#xff0c;而不是对对象的操作进行拦截#xff0c;对于基础类型通过 getter 和 setter 实现拦截使用 Proxy 拦截对象的所有… 文章目录 RefReactive Ref
ref 的语义是指向一个值的引用主要用于处理基本数据类型和单一值对象即对值的引用进行包装和管理而不是对对象的操作进行拦截对于基础类型通过 getter 和 setter 实现拦截使用 Proxy 拦截对象的所有操作如 get、set、deleteProperty 等这是一个强大的 API但同时也带来一定的性能开销。对于基础的响应式处理使用 Proxy 显得过于繁重ref 更适合用于单一值的场景它的设计初衷就是为了处理这些简单情况通过 getter 和 setter 可以更简洁地实现响应式但是如果 ref 在处理对象时会将对象转换为响应式对象。这种转换实际上是通过 reactive 实现的即在 ref 中如果传递的是对象类型最终会使用 Proxy 来实现响应式功能。
export function ref(value?: unknown) {return createRef(value, false);
}function createRef(rawValue: unknown, shallow: boolean) {if (isRef(rawValue)) {return rawValue;}return new RefImpl(rawValue, shallow);
}class RefImplT {private _value: T;private _rawValue: T;constructor(value: T, public readonly __v_isShallow: boolean) {this._rawValue value;this._value __v_isShallow ? value : toReactive(value);}get value() {trackRefValue(this);return this._value;}set value(newVal) {if (hasChanged(newVal, this._rawValue)) {this._rawValue newVal;this._value toReactive(newVal);triggerRefValue(this);}}
}// 判断 ref 的引用值是否是对象
function toReactive(value: any): any {return isObject(value) ? reactive(value) : value;
}
Reactive
reactive 主要用于将复杂对象变成响应式对象这些对象可能包含嵌套的结构。对于这种情况Proxy 是更合适的工具因为它能够拦截和处理对象的所有操作确保对象及其嵌套结构的每个部分都是响应式的
export function reactive(target: object) {if (isReadonly(target)) {return target;}return createReactiveObject(target, false, mutableHandlers, mutableCollectionHandlers);
}function createReactiveObject(target: Target,isReadonly: boolean,baseHandlers: ProxyHandlerany,collectionHandlers: ProxyHandlerany
) {if (!isObject(target)) {if (__DEV__) {console.warn(value cannot be made reactive: ${String(target)});}return target;}const proxy new Proxy(target,collectionType ? collectionHandlers : baseHandlers);return proxy;
}export const mutableHandlers: ProxyHandlerobject {get,set,deleteProperty,has,ownKeys
};
