一步步从Vue3.x源码上理解ref和reactive的区别
更新时间：2023年02月06日 11:06:23 作者：阿远Carry
vue3的数据双向绑定,大家都明白是proxy数据代理,但是在定义响应式数据的时候,有ref和reactive两种方式,如果判断该使用什么方式,是大家一直不很清楚地问题,下面这篇文章主要给大家介绍了关于从Vue3.x源码上理解ref和reactive的区别的相关资料,需要的朋友可以参考下
前言
对于 ref 和 reactive， 应该说是只要用了Vue3.x就会接触到
因为想要触发响应式，就必须通过 ref 和 reactive 来实现
但，对于他们理解，大家也是众说纷纭
那本文将从源码层面，带你去理解一下 ref 和 reactive 的区别
⚠️ 此文章基于 Vue 3.2.47 进行分析
使用
ref 可以使用 基本对象 和 引用类型 对象，如：
ref({ num: 1 })
ref(1)而,reactive 只能使用 引用类型
reactive({ num: 1 })原理
ref
从源码上看，ref 方法，就是返回 createRef 的函数调用
// 位置在 /core-3.2.47/packages/reactivity/src/ref.ts 第 82 行
export function ref(value?: unknown) {
return createRef(value, false)
}而createRef方法就是创建 RefImpl 对象的实例
// 位置在 /core-3.2.47/packages/reactivity/src/ref.ts 第 99 行
function createRef(rawValue: unknown, shallow: boolean) {
if (isRef(rawValue)) {
return rawValue
}
return new RefImpl(rawValue, shallow)
}那么，很好理解了，为什么我们打印 ref(1) 会是这样
那，RefImpl 对象的功能是什么呢？
首先来看 constructor 构造函数
// 位置在 /core-3.2.47/packages/reactivity/src/ref.ts 第 106 行
class RefImpl<T> {
private _value: T
private _rawValue: T
public dep?: Dep = undefined
public readonly __v_isRef = true
constructor(value: T, public readonly __v_isShallow: boolean) {
this._rawValue = __v_isShallow ? value : toRaw(value)
this._value = __v_isShallow ? value : toReactive(value)
}
// 省略部分代码...
}在创建 RefImpl 的实例过程中, 由于在 ref 函数中调用 createRef 传入第二参数为 false，可以直接理解为
this._rawValue = toRaw(value) this._value = toReactive(value)
toRaw 在递归中检查对象上是否有 __v_raw，可以理解为是返回原始数据
// 位置在 /core-3.2.47/packages/reactivity/src/reactive.ts 第 239 行
export function toRaw<T>(observed: T): T {
const raw = observed && (observed as Target)[ReactiveFlags.RAW]
return raw ? toRaw(raw) : observed
}
// 位置在 /core-3.2.47/packages/reactivity/src/reactive.ts 第 16 行
export const enum ReactiveFlags {
SKIP = '__v_skip',
IS_REACTIVE = '__v_isReactive',
IS_READONLY = '__v_isReadonly',
IS_SHALLOW = '__v_isShallow',
RAW = '__v_raw'
}toReactive 判断如果他是引用类型的对象，那就使用 reactive 返回对象，如果不是，那就原值返回
// 位置在 /core-3.2.47/packages/reactivity/src/reactive.ts 第 251 行 export const toReactive = <T extends unknown>(value: T): T => isObject(value) ? reactive(value) : value // 位置在 /core-3.2.47/packages/shared/src/index.ts 第 63 行 export const isObject = (val: unknown): val is Record<any, any> => val !== null && typeof val === 'object'
至此我们就是知道了，ref 如果传入 引用类型的对象底层还是调用 reactive
但是乍一想，好像不对？那 ref 如何进行做响应式的呢？
其实原理在
// 位置在 /core-3.2.47/packages/reactivity/src/ref.ts 第 118 行
get value() {
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)) {
this._rawValue = newVal
this._value = useDirectValue ? newVal : toReactive(newVal)
triggerRefValue(this, newVal)
}
}我们都知道，如果想要触发 ref 的值更新，必须使用 .value，例如：
const num = ref(1) console.log(num.value) num.value = 2
我们知道，所谓的响应式其实就是依赖收集和派发更新的过程
对于 console.log(num.value) 我们会触发 get value 函数，进行依赖收集
对于 num.value = 2 我们会触发 set value 函数，进行派发更新
所以
- ref 对于简单类型是通过 get value 和 set value 进行依赖收集和派发更新
- ref 对于引用类型是通过 reactive 进行依赖收集和派发更新
但，我们依旧需要注意：
const count = ref({ num: 1 })
count.value.num = 2 // 不会触发 set valuereactive
从源码上看，reactive 方法，就是返回 createReactiveObject 的函数调用
// 位置在 /core-3.2.47/packages/reactivity/src/reactive.ts 第 90 行
export function reactive(target: object) {
// if trying to observe a readonly proxy, return the readonly version.
if (isReadonly(target)) {
return target
}
return createReactiveObject(
target,
false,
mutableHandlers,
mutableCollectionHandlers,
reactiveMap
)
}而 createReactiveObject 方法，使用了 proxy 对值创建的代理对象，并返回代理对象
// 位置在 /core-3.2.47/packages/reactivity/src/reactive.ts 第 181 行
function createReactiveObject(
target: Target,
isReadonly: boolean,
baseHandlers: ProxyHandler<any>,
collectionHandlers: ProxyHandler<any>,
proxyMap: WeakMap<Target, 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 existingProxy = proxyMap.get(target)
if (existingProxy) {
return existingProxy
}
// only specific 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
}
// 位置在 /core-3.2.47/packages/reactivity/src/reactive.ts 第 58 行
function getTargetType(value: Target) {
return value[ReactiveFlags.SKIP] || !Object.isExtensible(value)
? TargetType.INVALID
: targetTypeMap(toRawType(value))
}
// 位置在 /core-3.2.47/packages/reactivity/src/reactive.ts 第 43 行
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
}
}
// 位置在 /core-3.2.47/packages/reactivity/src/reactive.ts 第 37 行
const enum TargetType {
INVALID = 0,
COMMON = 1,
COLLECTION = 2
}现在，我们应该聚焦一下 baseHandlers，因为根据运行上下文可以知道，我们当前的 targetType 为 1, 所以传入baseHandlers对象
而 baseHandlers 是从createReactiveObject进行传入，也就是 mutableHandlers
// 位置在 /core-3.2.47/packages/reactivity/src/baseHandlers.ts 第 225 行
export const mutableHandlers: ProxyHandler<object> = {
get,
set,
deleteProperty,
has,
ownKeys
}
// 位置在 /core-3.2.47/packages/reactivity/src/baseHandlers.ts 第 48 行
const get = /*#__PURE__*/ createGetter()
// 位置在 /core-3.2.47/packages/reactivity/src/baseHandlers.ts 第 158 行
const set = /*#__PURE__*/ createSetter()get是通过 createGetter 方法创建
set是通过 createGetter 方法创建
对于 createGetter 返回了一个 get 函数
// 位置在 /core-3.2.47/packages/reactivity/src/baseHandlers.ts 第 94 行
function createGetter(isReadonly = false, shallow = false) {
return function get(target: Target, key: string | symbol, receiver: object) {
if (key === ReactiveFlags.IS_REACTIVE) {
return !isReadonly
} else if (key === ReactiveFlags.IS_READONLY) {
return isReadonly
} else if (key === ReactiveFlags.IS_SHALLOW) {
return shallow
} else if (
key === ReactiveFlags.RAW &&
receiver ===
(isReadonly
? shallow
? shallowReadonlyMap
: readonlyMap
: shallow
? shallowReactiveMap
: reactiveMap
).get(target)
) {
return target
}
const targetIsArray = isArray(target)
if (!isReadonly) {
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 (!isReadonly) {
track(target, TrackOpTypes.GET, key)
}
if (shallow) {
return res
}
if (isRef(res)) {
// ref unwrapping - skip unwrap for Array + integer key.
return targetIsArray && isIntegerKey(key) ? res : res.value
}
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
}
}对于 createGetter 返回了一个 set 函数
// 位置在 /core-3.2.47/packages/reactivity/src/baseHandlers.ts 第 161 行
function createSetter(shallow = false) {
return function set(
target: object,
key: string | symbol,
value: unknown,
receiver: object
): boolean {
let oldValue = (target as any)[key]
if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) {
return false
}
if (!shallow) {
if (!isShallow(value) && !isReadonly(value)) {
oldValue = toRaw(oldValue)
value = toRaw(value)
}
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) < target.length
: hasOwn(target, key)
const result = Reflect.set(target, key, value, receiver)
// don't trigger if target is something up in the prototype chain of original
if (target === toRaw(receiver)) {
if (!hadKey) {
trigger(target, TriggerOpTypes.ADD, key, value)
} else if (hasChanged(value, oldValue)) {
trigger(target, TriggerOpTypes.SET, key, value, oldValue)
}
}
return result
}
}其说白了，reactive 依赖 Proxy将值作为被代理对象，创建代理对象，也是通过get和set，进行依赖收集和派发更新
此时，我们也能理解了打印reactive({num: 1})为什么是Proxy 对象
总结
ref其实就是创建RefImpl的实例对象，对于 简单类型 直接通过get value和set value进行依赖收集和派发更新 ，而对于引用类型直接调用reactive方法reactive底层用了Proxy对象，创建出代理对象，进行依赖收集和派发更新
到此这篇关于一步步从Vue3.x源码上理解ref和reactive区别的文章就介绍到这了,更多相关Vue3.x ref和reactive的区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue如何使用mixins优化组件，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-04-04
Nuxt pages下不同的页面对应layout下的页面布局操作
这篇文章主要介绍了Nuxt pages下不同的页面对应layout下的页面布局操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
本篇文章主要介绍了Vue+Element使用富文本编辑器的示例代码，具有一定的参考价值，有兴趣的可以了解一下2017-08-08
这篇文章主要介绍了vue 实现一个简单的全局调用弹窗案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了vue如何实现动态改变地址栏的参数值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
小编最近接了这样一个需求，需要在element表格操作一栏添加提示功能，下面小编给大家带来了基于vue实现element表格里表头信息提示功能，需要的朋友参考下吧2019-11-11
create-vue是Vue官方新的脚手架工具,底层切换到了vite(下一代前端工具链),为开发提供极速响应,下面这篇文章主要给大家介绍了关于vue-create创建VUE3项目的相关资料,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了Vue enter回车导致页面刷新问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
本文给大家分享vue自定义指令拖拽功能及自定义键盘信息，非常不错，具有参考借鉴价值，需要的的朋友参考下2017-02-02
这篇文章主要给大家介绍了关于vue中回调函数(callback)的用法举例,所谓的回调函数,就是由调用函数提供执行代码,被调用函数执行完毕之后,再自动执行的一个函数,需要的朋友可以参考下2023-08-08
最新评论