Home>Article>Web Front-end> Detailed explanation of the difference between reactive and ref in vue3 (source code analysis)
What is the difference between reactive and ref in
vue? The following article will take you deep into the source code to thoroughly understand the difference between reactive and ref in vue3. I hope it will be helpful to you!
In the daily development of vue3, I found that many people use a shuttle based on their own habitsreactive
orref
, although this can meet the requirements, if this is the case, why do we need to design anotherref
when we already havereactive
? What are the actual application scenarios and differences between the two?
And regarding the underlying logic ofref
, some people say that the underlying logic ofref
is stillreactive
. Some people say that the bottom layer ofref
isclass
, andvalue
is just an attribute ofclass
. Which of the two statements is correct? Woolen cloth? Is there any basis for this?
With this question, we will go deep into the source code this time and thoroughly understand the difference betweenreactive
andref
in vue3. (Learning video sharing:vue video tutorial)
If you don’t want to see the source code, you can just scroll to the back and read the summary
Source code address:packages/reactivity/reactive.ts
First let’s take a look at the target used invue3
ReactiveFlags
// 标记目标对象 target 类型的 ReactiveFlags export const enum ReactiveFlags { SKIP = '__v_skip', IS_REACTIVE = '__v_isReactive', IS_READONLY = '__v_isReadonly', RAW = '__v_raw' } export interface Target { [ReactiveFlags.SKIP]?: boolean // 不做响应式处理的数据 [ReactiveFlags.IS_REACTIVE]?: boolean // target 是否是响应式 [ReactiveFlags.IS_READONLY]?: boolean // target 是否是只读 [ReactiveFlags.RAW]?: any // 表示proxy 对应的源数据, target 已经是 proxy 对象时会有该属性 }
reactive
export function reactiveof type Object target(target: T): UnwrapNestedRefs 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 } // 创建 observe return createReactiveObject( target, false, mutableHandlers, mutableCollectionHandlers, reactiveMap ) }
Thereactive
function receives atarget
object. If thetarget
object is read-only, it will return the object directly.
If it is not read-only, it will passdirectly. createReactiveObject
Createobserve
Object
createReactiveObject
Don’t be afraid of the long look, Post the complete code ofcreateReactiveObject
first, let’s read it in sections
/** * * @param target 目标对象 * @param isReadonly 是否只读 * @param baseHandlers 基本类型的 handlers * @param collectionHandlers 主要针对(set、map、weakSet、weakMap)的 handlers * @param proxyMap WeakMap数据结构 * @returns */ function createReactiveObject( target: Target, isReadonly: boolean, baseHandlers: ProxyHandler, collectionHandlers: ProxyHandler , proxyMap: WeakMap ) { // typeof 不是 object 类型的,在开发模式抛出警告,生产环境直接返回目标对象 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 // 已经是响应式的就直接返回(取ReactiveFlags.RAW 属性会返回true,因为进行reactive的过程中会用weakMap进行保存, // 通过target能判断出是否有ReactiveFlags.RAW属性) // 例外:对reactive对象进行readonly() if ( target[ReactiveFlags.RAW] && !(isReadonly && target[ReactiveFlags.IS_REACTIVE]) ) { return target } // target already has corresponding Proxy // 对已经Proxy的,则直接从WeakMap数据结构中取出这个Proxy对象 const existingProxy = proxyMap.get(target) if (existingProxy) { return existingProxy } // only a whitelist of value types can be observed. // 只对targetTypeMap类型白名单中的类型进行响应式处理 const targetType = getTargetType(target) if (targetType === TargetType.INVALID) { return target } // proxy 代理 target // (set、map、weakSet、weakMap) collectionHandlers // (Object、Array) baseHandlers const proxy = new Proxy( target, targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers ) proxyMap.set(target, proxy) return proxy }
First we see thatcreateReactiveObject
receives five parameters
target: Target, isReadonly: boolean, baseHandlers: ProxyHandler, collectionHandlers: ProxyHandler , proxyMap: WeakMap
target Target object
isReadonly Whether it is read-only
baseHandlers Basic type handlersProcessing arrays, objects
collectionHandlersProcessing set, map, weakSet, weakMap
proxyMapWeakMap data structure stores side effect functions
Here mainly throughReactiveFlags. RAW
andReactiveFlags.IS_REACTIVE
determine whether it is responsive data. If so, the object will be returned directly
if ( target[ReactiveFlags.RAW] && !(isReadonly && target[ReactiveFlags.IS_REACTIVE]) ) { return target }
For those that are alreadyProxy
, then Directly take out the Proxy object from theWeakMap
data structure and return
const existingProxy = proxyMap.get(target) if (existingProxy) { return existingProxy }
Here is a check to see if the type of the currenttarget
isObject
,Array
,Map
,Set
,WeakMap
,WeakSet
, if none, go directly Return the object without performing responsive processing
// 只对targetTypeMap类型白名单中的类型进行响应式处理 const targetType = getTargetType(target) if (targetType === TargetType.INVALID) { return target }
Verification type logic
function getTargetType(value: Target) { return value[ReactiveFlags.SKIP] || !Object.isExtensible(value) ? TargetType.INVALID : targetTypeMap(toRawType(value)) } function targetTypeMap(rawType: string) { switch (rawType) { case 'Object': case 'Array': return TargetType.COMMON case 'Map': case 'Set': case 'WeakMap': case 'WeakSet': return TargetType.COLLECTION default: return TargetType.INVALID } }
After all pre-verifications are completed, you can useproxy
Agenttarget
Object
Aternary operator
is used here to execute different processing logic# through
TargetType.COLLECTION
// proxy 代理 target // (set、map、weakSet、weakMap) collectionHandlers // (Object、Array) baseHandlers const proxy = new Proxy( target, targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers ) proxyMap.set(target, proxy) return proxy
createReactiveObjectis very clear
proxyin
createReactiveObjectHow to proxy
target? Here we use
baseHandlersas an example and go deep inside
baseHandlersto see
baseHandlers
packages/reactivity/baseHandlers.ts
reactive.tswe can see that a total of four handlers have been introduced
import { mutableHandlers, readonlyHandlers, shallowReactiveHandlers, shallowReadonlyHandlers } from './baseHandlers'
Variable processing
Read-only processing
Shallow observation Processing (only observe the first-level properties of the target object)
Shallow observation && read-only
mutableHandlersas an example
// 可变处理 // const get = /*#__PURE__*/ createGetter() // const set = /*#__PURE__*/ createSetter() // get、has、ownKeys 会触发依赖收集 track() // set、deleteProperty 会触发更新 trigger() export const mutableHandlers: ProxyHandlerThe
getand
sethere correspond to
createGetter()and
createSetter()# respectively.
/** * 用于拦截对象的读取属性操作 * @param isReadonly 是否只读 * @param shallow 是否浅观察 * @returns */ function createGetter(isReadonly = false, shallow = false) { /** * @param target 目标对象 * @param key 需要获取的值的键值 * @param receiver 如果遇到 setter,receiver 则为setter调用时的this值 */ return function get(target: Target, key: string | symbol, receiver: object) { // ReactiveFlags 是在reactive中声明的枚举值,如果key是枚举值则直接返回对应的布尔值 if (key === ReactiveFlags.IS_REACTIVE) { return !isReadonly } else if (key === ReactiveFlags.IS_READONLY) { return isReadonly } else if ( // 如果key是raw receiver 指向调用者,则直接返回目标对象。 // 这里判断是为了保证触发拦截 handle 的是 proxy 本身而不是 proxy 的继承者 // 触发拦的两种方式:一是访问 proxy 对象本身的属性,二是访问对象原型链上有 proxy 对象的对象的属性,因为查询会沿着原型链向下找 key === ReactiveFlags.RAW && receiver === (isReadonly ? shallow ? shallowReadonlyMap : readonlyMap : shallow ? shallowReactiveMap : reactiveMap ).get(target) ) { return target } const targetIsArray = isArray(target) // 如果目标对象 不为只读、是数组、key属于arrayInstrumentations:['includes', 'indexOf', 'lastIndexOf']方法之一,即触发了这三个方法之一 if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) { // 通过 proxy 调用,arrayInstrumentations[key]的this一定指向 proxy return Reflect.get(arrayInstrumentations, key, receiver) } const res = Reflect.get(target, key, receiver) // 如果 key 是 symbol 内置方法,或者访问的是原型对象__proto__,直接返回结果,不收集依赖 if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) { return res } // 不是只读类型的 target 就收集依赖。因为只读类型不会变化,无法触发 setter,也就会触发更新 if (!isReadonly) { track(target, TrackOpTypes.GET, key) } // 如果是浅观察,不做递归转化,就是说对象有属性值还是对象的话不递归调用 reactive() if (shallow) { return res } // 如果get的结果是ref if (isRef(res)) { // ref unwrapping - does not apply for Array + integer key. // 返回 ref.value,数组除外 const shouldUnwrap = !targetIsArray || !isIntegerKey(key) return shouldUnwrap ? res.value : res } // 由于 proxy 只能代理一层,如果子元素是对象,需要递归继续代理 if (isObject(res)) { // Convert returned value into a proxy as well. we do the isObject check // here to avoid invalid value warning. Also need to lazy access readonly // and reactive here to avoid circular dependency. return isReadonly ? readonly(res) : reactive(res) } return res } }
It looks long, but in the end it is
track()Dependency collection
track()There are too many dependency collection contents, and
trigger()
triggers updates together, so I will write a separate article Article
/** * 拦截对象的设置属性操作 * @param shallow 是否是浅观察 * @returns */ function createSetter(shallow = false) { /** * @param target 目标对象 * @param key 设置的属性名称 * @param value 要改变的属性值 * @param receiver 如果遇到setter,receiver则为setter调用时的this值 */ return function set( target: object, key: string | symbol, value: unknown, receiver: object ): boolean { let oldValue = (target as any)[key] // 如果模式不是浅观察模式 if (!shallow) { // 拿新值和老值的原始值,因为新传入的值可能是响应式数据,如果直接和 target 上原始值比较是没有意义的 value = toRaw(value) oldValue = toRaw(oldValue) // 目标对象不是数组,旧值是ref,新值不是ref,则直接赋值,这里提到ref if (!isArray(target) && isRef(oldValue) && !isRef(value)) { oldValue.value = value return true } } else { // in shallow mode, objects are set as-is regardless of reactive or not } // 检查对象是否有这个属性 const hadKey = isArray(target) && isIntegerKey(key) ? Number(key)
trigger()
触发更新ref
源码地址:
packages/reactivity/src/ref.ts
接收一个可选
unknown
,接着直接调用createRef()
export function ref(value?: unknown) { return createRef(value, false) }与
ref
的区别就是在调用createRef()
时第二个值传的是trueexport function shallowRef(value?: unknown) { return createRef(value, true) }看一下官方文档上对
shallowRef
的解释createRef
通过
isRef()
判断是否是ref
数据,是则直接返回该数据,不是则通过new RefImpl
创建ref数据在创建时会传两个值一个是
rawValue
(原始值),一个是shallow
(是否是浅观察),具体使用场景可看上面ref
和shallowRef
的介绍function createRef(rawValue: unknown, shallow: boolean) { // 是否是 ref 数据 if (isRef(rawValue)) { return rawValue } return new RefImpl(rawValue, shallow) }
isRef()
通过__v_isRef
只读属性判断是否是ref数据,此属性会在RefImpl
创建ref数据时添加
export function isRef(r: any): r is Ref { return Boolean(r && r.__v_isRef === true) }
RefImpl
class RefImpl{ private _value: T private _rawValue: T public dep?: Dep = undefined // 只读属性 __v_isRef 判断是否是ref数据的静态标识 public readonly __v_isRef = true constructor(value: T, public readonly _shallow: boolean) { this._rawValue = _shallow ? value : toRaw(value) // 非浅观察用toRaw()包裹原始值 this._value = _shallow ? value : toReactive(value) // 非浅观察用toReactive()处理数据 } get value() { // 依赖收集 trackRefValue(this) return this._value } set value(newVal) { newVal = this._shallow ? newVal : toRaw(newVal) // 非浅观察用toRaw()包裹值 // 两个值不相等 if (hasChanged(newVal, this._rawValue)) { this._rawValue = newVal this._value = this._shallow ? newVal : toReactive(newVal) triggerRefValue(this, newVal) // 触发依赖,派发更新 } } }
根据RefImpl
我们可以看到ref
的底层逻辑,如果是对象确实会使用reactive
进行处理,并且ref
的创建使用的也是RefImpl
class实例,value只是RefImpl
的属性
在我们访问
和设置
ref
的value值时,也分别是通过get
和set
拦截进行依赖收集
和派发更新
的
toReactive
我们来看一下toReactive()
这个方法,在RefImpl
中创建ref
数据时会调用toReactive()
方法,这里会先判断传进来的值是不是对象,如果是就用reactive()
包裹,否则就返回其本身
export const toReactive =(value: T): T => isObject(value) ? reactive(value) : value
trackRefValue
ref的依赖收集方法
export function trackRefValue(ref: RefBase) { if (isTracking()) { ref = toRaw(ref) if (!ref.dep) { ref.dep = createDep() } if (__DEV__) { trackEffects(ref.dep, { target: ref, type: TrackOpTypes.GET, key: 'value' }) } else { trackEffects(ref.dep) } } }
triggerRefValue
ref的派发更新方法
export function triggerRefValue(ref: RefBase, newVal?: any) { ref = toRaw(ref) if (ref.dep) { if (__DEV__) { triggerEffects(ref.dep, { target: ref, type: TriggerOpTypes.SET, key: 'value', newValue: newVal }) } else { triggerEffects(ref.dep) } } }
看完reactive
和ref
源码,相信对本文一开始的几个问题也都有了答案,这里也总结了几个问题:
答:ref底层会通过new RefImpl()
来创造ref数据,在new RefImpl()
会首先给数据添加__v_isRef
只读属性用来标识ref
数据。而后判断传入的值是否是对象,如果是对象则使用toReactive()
处理成reactive
,并将值赋给RefImpl()
的value
属性上。在访问
和设置
ref数据的value
时会分别触发依赖收集
和派发更新
流程。
reactive
处理数据答:RefImpl中非浅观察会调用toReactive()
方法处理数据,toReactive()
中会先判断传入的值是不是一个对象,如果是对象则使用reactive
进行处理,不是则直接返回值本身。
reactive
还需要在设计一个ref
呢?答: 因为vue3响应式方案使用的是proxy
,而proxy
的代理目标必须是非原始值,没有任何方式能去拦截对原始值
的操作,所以就需要一层对象作为包裹,间接实现原始值的响应式方案。
ref
数据必须要有个value
属性,访问ref数据必须要通过.value
的方式呢?答:这是因为要解决响应式丢失的问题
,举个例子:
// obj是响应式数据 const obj = reactive({ foo: 1, bar: 2 }) // newObj 对象下具有与 obj对象同名的属性,并且每个属性值都是一个对象 // 该对象具有一个访问器属性 value,当读取 value的值时,其实读取的是 obj 对象下相应的属性值 const newObj = { foo: { get value() { return obj.foo } }, bar: { get value() { return obj.bar } } } effect(() => { // 在副作用函数内通过新对象 newObj 读取 foo 的属性值 console.log(newObj.foo) }) // 正常触发响应 obj.foo = 100
可以看到,在现在的newObj
对象下,具有与obj
对象同名的属性,而且每个属性的值都是一个对象,例如foo 属性的值是:
{ get value() { return obj.foo } }
该对象有一个访问器属性value
,当读取value的值时,最终读取的是响应式数据obj下的同名属性值
。也就是说,当在副作用函数内读取newObj.foo
时,等价于间接读取了obj.foo
的值。这样响应式数据就能够与副作用函数建立响应联系
(Learning video sharing:web front-end development,Basic programming video)
The above is the detailed content of Detailed explanation of the difference between reactive and ref in vue3 (source code analysis). For more information, please follow other related articles on the PHP Chinese website!