我们先来看官方对于reactive
的解释,官方的解释也非常简单
返回对象的响应式副本
但从这句话我们可以得到以下信息
-
reactive
接受一个对象作为参数 - 其返回值是经
reactive
函数包装过后的数据对象,这个对象具有响应式
但同样会有一些疑问
比如,reactive
的参数只能传递一个对象吗,如果传递其他值会怎么样?
比如,返回的响应式数据的本质是什么,为啥就能让数据变成响应式?
比如,"副本"是不是意味着响应式数据与原始数据没有关联?
比如,返回的响应式副本里头的数据是深度响应式吗,即是否递归监听对象的所有属性?等等
带着这些疑问我们一起来看
首先,通过reactive
创建一个响应数据
import { reactive } from "vue";
export default {
setup() {
const state = reactive({
count: 0,
});
},
};
如上代码就可以创建一个响应式数据state
,我具体来看一下这个
console.log(state)
可以看见,返回的响应副本state
其实就是Proxy
对象。所以reactive
实现响应式就是基于ES2015 Proxy
的实现的。那我们知道Proxy
有几个特点:
- 代理的对象是不等于原始数据对象
- 原始对象里头的数据和被
Proxy
包装的对象之间是有关联的。即当原始对象里头数据发生改变时,会影响代理对象;代理对象里头的数据发生变化对应的原始数据也会发生变化。
需要记住:是对象里头的数据变化,并不能将原始变量的重新赋值,那是大换血了
因此,既然reactive
实现响应式是基于Proxy
的实现的,那我们大胆猜测,原始数据与相应数据也是有关联的。那我们来测试一下
<template>
<button @click="change">
{{ state.count }}
</button>
</template>
<script>
import { reactive } from "vue";
export default {
setup() {
const obj = {
count: 0,
};
const state = reactive(obj);
function change(){
++state.count
console.log(obj);
console.log(state);
}
return { state,change};
},
};
</script>
以上代码测试结果如下
验证,确实当响应式对象里头数据变化的时候原始对象的数据也会变化
如果反过来,结果也是一样
// ++state.count
++obj.count;
当响应式对象里头数据变化的时候原始对象的数据也会变化
那问题来了,我们操作数据的时候通过谁来操作呢?
官方的建议是
建议只使用响应式代理,避免依赖原始对象
再来解决另外一个问题看看reactive
是否会深度监听每一层呢?
const state = reactive({
a:{
b:{
c:{name:'c'}
}
}
});
console.log(state);
console.log(state.a);
console.log(state.a.b);
console.log(state.a.b.c);
可以看到结果reactive
是递归会将每一层包装成Proxy
对象的,深度监听每一层的property
最后测试一下如果reactive
传递是非对象而是原始值会怎么样
const state = reactive(0);
console.log(state)
结果是,原始值并不会被包装,所以也没有响应式特点
下面,我们看看reactive
的源码吧
源码目录位置:vue-next\packages\reactivity\src\reactive.ts
直接找到reactive
的类型声明:
export function reactive<T extends object>(target: T): UnwrapNestedRefs<T>
可以看到reactive
接受一个参数target
,target
的类型是泛型T
,而T
类型是extends object
,简单来说接受的参数target
的类型是object
类型或者时继承自object
类的子类类型
返回值的类型的UnwrapNestedRefs<T>
看看UnwrapNestedRefs<T>
类型
type UnwrapNestedRefs<T> = T extends Ref ? T : UnwrapRef<T>
使用type
关键字声明类型UnwrapNestedRefs<T>
,这里有个三目运算符,用于进一步判断T
;如果传入的T
属于Refs
类或者其子类,那么返回传入的T
,否者就是UnwrapRef<T>
下面具体看看reactive
方法的定义
export function reactive(target: object) {
// if trying to observe a readonly proxy, return the readonly version.
if (target && (target as Target)[ReactiveFlags.IS_READONLY]) {
return target
}
return createReactiveObject(
target,
false,
mutableHandlers,
mutableCollectionHandlers
)
}
接受一个类型为object
参数,当传入对象是只读,返回本身。这里的as
关键字是断言,表示传入的值一定是Target
类型,里头有个ReactiveFlags.IS_READONLY
,用于判断是否是只读的属性
export interface Target {
[ReactiveFlags.SKIP]?: boolean
[ReactiveFlags.IS_REACTIVE]?: boolean
[ReactiveFlags.IS_READONLY]?: boolean
[ReactiveFlags.RAW]?: any
}
如果传递的对象是普通对象(不是readonly
),则执行创建响应式对象函数createReactiveObject(target,false,mutableHandlers,mutableCollectionHandlers)
该方法比较长,是reactive
的核心方法,所以还是得读一下源码
function createReactiveObject(
target: Target,
isReadonly: boolean,
baseHandlers: ProxyHandler<any>,
collectionHandlers: ProxyHandler<any>
) {
if (!isObject(target)) {
if (__DEV__) {
console.warn(`value cannot be made reactive: ${String(target)}`)
}
return target
}
// target is already a Proxy, return it.
// exception: calling readonly() on a reactive object
if (
target[ReactiveFlags.RAW] &&
!(isReadonly && target[ReactiveFlags.IS_REACTIVE])
) {
return target
}
// target already has corresponding Proxy
const proxyMap = isReadonly ? readonlyMap : reactiveMap
const existingProxy = proxyMap.get(target)
if (existingProxy) {
return existingProxy
}
// only a whitelist of value types can be observed.
const targetType = getTargetType(target)
if (targetType === TargetType.INVALID) {
return target
}
const proxy = new Proxy(
target,
targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
)
proxyMap.set(target, proxy)
return proxy
}
可以看到除了几种特殊情况返回target
本身之外,就返回proxy
,proxy
就是通过new Proxy
构造函数构建出来的。这里也进一步证明了reactive
的响应式功能确实是通过Proxy
实现的
可以看一样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;
enumerate? (target: T): PropertyKey[];
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;
里面的具体实现方法,在createReactiveObject
传参的时候就传入进来了
mutableHandlers和mutableCollectionHandlers
,具体可以去`vue-next\packages\reactivity\src\baseHandlers.ts文件中看
经过上面的了解,我们可以总结和回答一下最开始几个疑问了
1. reactive的参数可以传递对象也可以传递原始值。但是原始值并不会包装成响应式数据
2. 返回的响应式数据的本质Proxy对象
3. 返回的响应式"副本"与原始数据有关联,当原始对象里头的数据或者响应式对象里头的数据发生,会彼此相互影响。两种都可以触发界面更新,操作时建议只使用响应式代理对象
4. 返回的响应式对象里头时深度递归监听每一层的,每一层都会被包装成Proxy对象
以上就是Vue3中reactive基本内容
注:本文示例代码可在github查阅
https://github.com/jCodeLife/learn-vue3/tree/master/learn-vue3-reactive
网友评论