【vue3】响应式的几个重要API
创建响应式对象
RefImpl方式
ref(data)
使用这个构造函数RefImpl创建的响应式对象有一个属性: __v_isRef=true。如果data是原始类型属性_value=_rawValue，就是原始值。如果data是对象类型，那么就使用toReactive-->reactive(data) ，此时_value就是一个响应式对象。不会重复封装被ref()封装过的值，
function ref(value) {
return createRef(value, false);
}
//首先判断是不是Ref，如果是就直接返回，就是不做嵌套封装
function createRef(rawValue, shallow) {
if (isRef(rawValue)) {
return rawValue;
}
return new RefImpl(rawValue, shallow);
}
//浅层代理，就是第一层属性
function shallowRef(value) {
return createRef(value, true);
} /// ref构造函数
class RefImpl {
///__v_isShallow 是否是浅层代理，就是代理第一层
constructor(value, __v_isShallow) {
//__v_isShallow: 标记是否为浅层代理（仅代理第一层属性）
this.__v_isShallow = __v_isShallow;
this.dep = void 0;
//判断是否是RefImpl对象的标识，如果是的话，那么就直接返回value
this.__v_isRef = true;
///_rawValue存放的时最原始的值，就是去掉了响应式代理的值，toRaw会递归去掉代理
this._rawValue = __v_isShallow ? value : toRaw(value);
//如果toReactive()方法判断如果value是一个object 那么就用reactive() 包装 否则返回原值
//toReactive对于原始值 就直接返回value
//如果是对象的话 就是Proxy代理了
this._value = __v_isShallow ? value : toReactive(value);
}
get value() {
///收集依赖 ReactiveEffect 副作用对象
trackRefValue(this);
return this._value;
}
set value(newVal) {
// 判断是否直接使用原始值（不进行深度处理）
const useDirectValue = this.__v_isShallow || isShallow(newVal) || isReadonly(newVal);
newVal = useDirectValue ? newVal : toRaw(newVal);
//判断新值和老值有没有变化，都是使用最原始的值来进行比较
if (hasChanged(newVal, this._rawValue)) {
const oldVal = this._rawValue;
this._rawValue = newVal;
this._value = useDirectValue ? newVal : toReactive(newVal);
triggerRefValue(this, 5, newVal, oldVal);
}
}
} const toReactive = (value) => isObject(value) ? reactive(value) : value;reactive(data)方式
如果data是原始类型的数据，就直接返回了原始值，这个方式是不能创建基于原始类型数据的响应式对象的，原始类型的数据 需要通过RefImpl 类来创建 。不会重复封装被reactive()封装过的值
function reactive(target) {
//判断是否只读
if (isReadonly(target)) {
return target;
}
return createReactiveObject(
target,
false,
mutableHandlers,//这个handler是下面的BaseReactiveHandler
mutableCollectionHandlers,
reactiveMap
);
} //target这个方法并没有判断 当前target是否是RefImpl类型
function createReactiveObject(target, isReadonly2, baseHandlers, collectionHandlers, proxyMap) {
if (!isObject(target)) {
{
warn$2(
`value cannot be made ${isReadonly2 ? "readonly" : "reactive"}: ${String(
target
)}`
);
}
return target;
}
///如果本身是响应式数据 就有__v_raw __v_isReactive两个属性
if (target["__v_raw"] && !(isReadonly2 && target["__v_isReactive"])) {
return target;
}
//proxyMap全局缓存，响应式数据
const existingProxy = proxyMap.get(target);
if (existingProxy) {
return existingProxy;
}
///返回target 的类型 Object.prototype.toString.call()
const targetType = getTargetType(target);
if (targetType === 0 /* INVALID */) {
return target;
}
//如果是集合类型就用collectionHandlers处理，其他的用baseHandlers处理
const proxy = new Proxy(
target,
targetType === 2 /* COLLECTION */ ? collectionHandlers : baseHandlers
);
proxyMap.set(target, proxy);
return proxy;
}class BaseReactiveHandler {
constructor(_isReadonly = false, _isShallow = false) {
this._isReadonly = _isReadonly;
this._isShallow = _isShallow;
}
get(target, key, receiver) {
const isReadonly2 = this._isReadonly, isShallow2 = this._isShallow;
///通过get 方法设置了几个属性的陷阱 __v_isReactive __v_isReadonly __v_isShallow
//__v_raw 这个属性是返回最原始的值
if (key === "__v_isReactive") {
return !isReadonly2;
} else if (key === "__v_isReadonly") {
return isReadonly2;
} else if (key === "__v_isShallow") {
return isShallow2;
} else if (key === "__v_raw") {
if (receiver === (isReadonly2 ? isShallow2 ? shallowReadonlyMap : readonlyMap : isShallow2 ? shallowReactiveMap : reactiveMap).get(target) || // receiver is not the reactive proxy, but has the same prototype
// this means the reciever is a user proxy of the reactive proxy
Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)) {
return target;
}
return;
}
const targetIsArray = isArray(target);
if (!isReadonly2) {
if (targetIsArray && hasOwn(arrayInstrumentations, key)) {
return Reflect.get(arrayInstrumentations, key, receiver);
}
if (key === "hasOwnProperty") {
return hasOwnProperty;
}
}
const res = Reflect.get(target, key, receiver);
if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
return res;
}
if (!isReadonly2) {
track(target, "get", key);
}
if (isShallow2) {
return res;
}
if (isRef(res)) {
return targetIsArray && isIntegerKey(key) ? res : res.value;
}
if (isObject(res)) {
return isReadonly2 ? readonly(res) : reactive(res);
}
return res;
}
}使用reactive() 方法创建的对象有一个这个属性 __v_reactive
Proxy代理对象创建
class BaseReactiveHandler {
constructor(_isReadonly = false, _isShallow = false) {
this._isReadonly = _isReadonly;
this._isShallow = _isShallow;
}
get(target, key, receiver) {
const isReadonly2 = this._isReadonly, isShallow2 = this._isShallow;
///__v_isReactive 陷阱属性
if (key === "__v_isReactive") {
return !isReadonly2;
} else if (key === "__v_isReadonly") {
return isReadonly2;
} else if (key === "__v_isShallow") {
return isShallow2;
} else if (key === "__v_raw") {
///proxy对象通过get 设置了__v_raw 陷阱属性，通过这个属性可以判断是否是Proxy对象
if (receiver === (isReadonly2 ? isShallow2 ? shallowReadonlyMap : readonlyMap : isShallow2 ? shallowReactiveMap : reactiveMap).get(target) || // receiver is not the reactive proxy, but has the same prototype
// this means the reciever is a user proxy of the reactive proxy
Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)) {
return target;
}
return;
}
//省略了部分代码
}
}响应式工具API
isRef
作用
判断当前对象是不是响应式(RefImpl)对象，
function isRef(r) {
//使用RefImpl封装的对象 都有这个属性__v_isRef，且为true. 不管r是原始值还是对象类型
return !!(r && r.__v_isRef === true);
}unref
作用
去掉响应式封装，不会递归
function unref(ref2) {
///isRef函数根据__v_isRef属性来判断是否是有RefImpl的封装。如果是的话 就返回value值。这个value只也可能还是reactive()响应式对象。
return isRef(ref2) ? ref2.value : ref2;
}isReactive
作用判断value是否是一个reactive()创建的一个响应式对象
function isReactive(value) {
if (isReadonly(value)) {
return isReactive(value["__v_raw"]); //__v_raw属性是原始对象值
}
//__v_isReactive这个属性是在reactive()创建是通过get方法设置的一个陷阱属性。
return !!(value && value["__v_isReactive"]);
}isProxy
作用
function isProxy(value) {
return value ? !!value["__v_raw"] : false;
}isReadonly
作用
判断一个对象是否是只读的，有__v_isReadonly属性就是，只读具体什么概念??:
function isReadonly(value) {
return !!(value && value["__v_isReadonly"]);
}toRaw
作用就是把一个reactive创建的响应式对象递归返回最原始的值，如果是RefImpl创建的对象响应就不能解封了。如果是RefImpl可以通过toRaw(reactiveObj._value)来获取最原始值。
所以toRaw只对reactive创建的响应式对象才有用。那么RefImpl怎么解封呢？
function toRaw(observed) {
//__v_raw这个属性是使用reactive创建时通过get 方法设置的一个陷阱属性，具体实现
//在: BaseReactiveHandler中
const raw = observed && observed["__v_raw"];
return raw ? toRaw(raw) : observed;
}proxyRefs
function proxyRefs(objectWithRefs) {
//如果objectWithRefs本身是reactive封装响应的式对象，就直接返回，
//如果不是响应式 就用Proxy代理一次，但是这里创建的proxy对应的shallowUnwrapHandlers不会加入响应式功能
return isReactive(objectWithRefs) ? objectWithRefs : new Proxy(objectWithRefs, shallowUnwrapHandlers);
}
//handler如下shallowUnwrapHandlers
const shallowUnwrapHandlers = {
get: (target, key, receiver) => unref(Reflect.get(target, key, receiver)),
set: (target, key, value, receiver) => {
const oldValue = target[key];
if (isRef(oldValue) && !isRef(value)) {
oldValue.value = value;
return true;
} else {
return Reflect.set(target, key, value, receiver);
}
}
};//以下是组件初始化的部分代码
//用shallowUnwrapHandlers 拦截器 把setup结果封装成了代理Proxy但是没有响应式功能
instance.setupState = proxyRefs(setupResult);
{
///把结果setupState暴露到代理对象中去
exposeSetupStateOnRenderContext(instance);
}
function exposeSetupStateOnRenderContext(instance) {
const { ctx, setupState } = instance;
Object.keys(toRaw(setupState)).forEach((key) => {
if (!setupState.__isScriptSetup) {
if (isReservedPrefix(key[0])) {
warn$1(
`setup() return property ${JSON.stringify(
key
)} should not start with "$" or "_" which are reserved prefixes for Vue internals.`
);
return;
}
Object.defineProperty(ctx, key, {
enumerable: true,
configurable: true,
get: () => setupState[key],
set: NOOP
});
}
});
}组件渲染时处理data和setupState
setupState是setup函数返回的结果。
在vue3内部api中的applyOptions方法中会处理data值。这个方式applyOptions是为了兼容vue2的选项式api的
把instance.ctx上的属性代理到instance.proxy上。
PublicInstanceProxyHandlers 的代码如下。可以从代码上看到页面上渲染时，如{{msg}}，获取msg值的优先级别是：
SETUP函数返回结果 >data>ctx>props>publicPropertiesMap(全局的)>appContext.config.globalProperties
const PublicInstanceProxyHandlers = {
get({ _: instance }, key) {
if (key === "__v_skip") {
return true;
}
const { ctx, setupState, data, props, accessCache, type, appContext } = instance;
if (key === "__isVue") {
return true;
}
let normalizedProps;
if (key[0] !== "$") {
//先从访问缓存中获取
const n = accessCache[key];
if (n !== void 0) {
switch (n) {
case 1 /* SETUP */:
return setupState[key];
case 2 /* DATA */:
return data[key];
case 4 /* CONTEXT */:
return ctx[key];
case 3 /* PROPS */:
return props[key];
}
} else if (hasSetupBinding(setupState, key)) {
accessCache[key] = 1 /* SETUP */;
return setupState[key];
} else if (data !== EMPTY_OBJ && hasOwn(data, key)) {
accessCache[key] = 2 /* DATA */;
return data[key];
} else if (
// only cache other properties when instance has declared (thus stable)
// props
(normalizedProps = instance.propsOptions[0]) && hasOwn(normalizedProps, key)
) {
accessCache[key] = 3 /* PROPS */;
return props[key];
} else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) {
accessCache[key] = 4 /* CONTEXT */;
return ctx[key];
} else if (shouldCacheAccess) {
accessCache[key] = 0 /* OTHER */;
}
}
///返回公共属性的getter
const publicGetter = publicPropertiesMap[key];
let cssModule, globalProperties;
if (publicGetter) {
if (key === "$attrs") {
track(instance.attrs, "get", "");
markAttrsAccessed();
} else if (key === "$slots") {
track(instance, "get", key);
}
return publicGetter(instance);
} else if (
// css module (injected by vue-loader)
(cssModule = type.__cssModules) && (cssModule = cssModule[key])
) {
return cssModule;
} else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) {
accessCache[key] = 4 /* CONTEXT */;
return ctx[key];
} else if (
// global properties
globalProperties = appContext.config.globalProperties, hasOwn(globalProperties, key)
) {
{
return globalProperties[key];
}
} else if (currentRenderingInstance && (!isString(key) || // #1091 avoid internal isRef/isVNode checks on component instance leading
// to infinite warning loop
key.indexOf("__v") !== 0)) {
if (data !== EMPTY_OBJ && isReservedPrefix(key[0]) && hasOwn(data, key)) {
warn$1(
`Property ${JSON.stringify(
key
)} must be accessed via $data because it starts with a reserved character ("$" or "_") and is not proxied on the render context.`
);
} else if (instance === currentRenderingInstance) {
warn$1(
`Property ${JSON.stringify(key)} was accessed during render but is not defined on instance.`
);
}
}
},
set({ _: instance }, key, value) {
const { data, setupState, ctx } = instance;
if (hasSetupBinding(setupState, key)) {
setupState[key] = value;
return true;
} else if (setupState.__isScriptSetup && hasOwn(setupState, key)) {
warn$1(`Cannot mutate <script setup> binding "${key}" from Options API.`);
return false;
} else if (data !== EMPTY_OBJ && hasOwn(data, key)) {
data[key] = value;
return true;
} else if (hasOwn(instance.props, key)) {
warn$1(`Attempting to mutate prop "${key}". Props are readonly.`);
return false;
}
if (key[0] === "$" && key.slice(1) in instance) {
warn$1(
`Attempting to mutate public property "${key}". Properties starting with $ are reserved and readonly.`
);
return false;
} else {
if (key in instance.appContext.config.globalProperties) {
Object.defineProperty(ctx, key, {
enumerable: true,
configurable: true,
value
});
} else {
ctx[key] = value;
}
}
return true;
},
has({
_: { data, setupState, accessCache, ctx, appContext, propsOptions }
}, key) {
let normalizedProps;
return !!accessCache[key] || data !== EMPTY_OBJ && hasOwn(data, key) || hasSetupBinding(setupState, key) || (normalizedProps = propsOptions[0]) && hasOwn(normalizedProps, key) || hasOwn(ctx, key) || hasOwn(publicPropertiesMap, key) || hasOwn(appContext.config.globalProperties, key);
},
defineProperty(target, key, descriptor) {
if (descriptor.get != null) {
target._.accessCache[key] = 0;
} else if (hasOwn(descriptor, "value")) {
this.set(target, key, descriptor.value, null);
}
return Reflect.defineProperty(target, key, descriptor);
}
};在vue3内部api中的handleSetupResult方法中会处理setup函数返回的结果setupResult值。
响应式对象处理实例
实例1
var refObj=ref({num1:123,num2:456});
var tmpObj=toRaw(refObj);
var reactiveObj=reactive(tmpObj);
结果1： tmpObj==refObj //true
reactiveObj==refObj //false
因为: refObj首先是一个RefImpl对象，然后被封装的值是一个对象类型的，所以{num1:123,num2:456}会被封装成一个reactive()对象。所以refObj.value是一个响应式对象(Proxy)。然后使用toRaw(refObj)，进行解封，但是由于refObj是一个RefImpl类型的对象，不能使用toRaw()方法类解封，因为这个toRaw是通过__v_raw陷阱属性类判断的，refImpl类型的没有这陷阱属性__v_raw。所以oRaw(refObj)还是原样返回refObj。所以 tmpObj==refObj 。
var reactiveObj=reactive(tmpObj); 因为tmpObj是一个RefImpl类型的对象，而使用reactive创建响应式对象时是不会判断当前是RefImpl类型的，只有tmpObj是reactive类型的才不会再次封装。所以这时要回给tmpObj在包装一层。 reactiveObj==refObj 为false.
总结1:
toRaw 和unref都是分别解封 reactive和RefImpl类型，获取原始值。toRaw递归获取最原始的值。
ref(value)在封装value之前会判断当前是否是 RefImpl，如果是就直接返回，不会再封装。
reactive(value) 在封装之前也会判断value之前是否是reactive封装过，如果封装过就直接返回，不会再封装