Vue3.0 响应式系统源码逐行分析讲解
编程学习 2021-07-04 15:01www.dzhlxh.cn编程入门
这篇文章主要介绍了Vue3.0 响应式系统源码逐行分析讲解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
前言
关于响应式原理想必大家都很清楚了，狼蚁网站SEO优化我将会根据响应式API来具体讲解Vue3.0中的实现原理, 另外我只会针对get,set进行深入分析，本文包含以下API实现，推荐大家顺序阅读
- effect
- reactive
- readonly
- computed
- ref
对了，大家一定要先知道怎么用哦~
引子
先来段代码，大家可以直接复制哦，注意引用的文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../packages/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
const { reactive, computed, effect, watch, createApp } = Vue
const App = {
template: `
<div id="box">
<button @click="increment">{{ state.count }}</button>
</div>
`,
setup() {
const state = reactive({
count: 0
})
function increment(e) {
state.count++
}
effect(() => {
console.log('count改变', state.count);
})
return {
state,
increment
}
}
}
createApp().mount(App, '#app')
</script>
</body>
</html>
这段代码，想必大家都看得懂，点击后count增加，视图也随之更新，effect监听了count改变，那么为什么effect能观察到count变化呢,还有为什么reactive可以实现响应式？
effect
为什么要先说这个函数呢，因为它和其他函数都息息相关，只有先了解它才能更好的理解其他响应式API
上源码
export function effect(
fn: Function,
options: ReactiveEffectOptions = EMPTY_OBJ
): ReactiveEffect {
if ((fn as ReactiveEffect).isEffect) {
fn = (fn as ReactiveEffect).raw
}
const effect = createReactiveEffect(fn, options)
if (!options.lazy) {
effect()
}
return effect
}
if判断，判断如果传入的fn函数，它已经是effect了，也就是一个标识，直接获取该函数上的raw属性，这个属性后面会讲到
调用createReactiveEffect
如果options中有lazy,就会立即调用effect,其实本质上调用的还是传入的fn函数
// 了解一下options有哪些
{
lazy?: boolean // 是否立即调用fn
computed?: boolean // 是否是computed
scheduler?: (run: Function) => void // 在调用fn之前执行
onTrack?: (event: DebuggerEvent) => void // 在依赖收集完成之后调用
onTrigger?: (event: DebuggerEvent) => void // 在调用fn之前执行，源码上来看和scheduler调用时机一样，只是传入参数不同
onStop?: () => void // 清除依赖完成后调用
}
返回effect
createReactiveEffect
上面提到了createReactiveEffect函数，我们来看看它的实现
function createReactiveEffect(
fn: Function,
options: ReactiveEffectOptions
): ReactiveEffect {
// 又包装了一层函数
const effect = function effect(...args): any {
return run(effect as ReactiveEffect, fn, args)
} as ReactiveEffect
effect.isEffect = true // 标识effect
effect.active = true // 如果active
effect.raw = fn // 传入的回调
effect.scheduler = options.scheduler
effect.onTrack = options.onTrack
effect.onTrigger = options.onTrigger
effect.onStop = options.onStop
effect.computed = options.computed
effect.deps = [] // 用于收集依赖
return effect
}
注意，敲黑板，这里有个run函数，很重要，因为它保存了依赖
function run(effect: ReactiveEffect, fn: Function, args: any[]): any {
if (!effect.active) {
return fn(...args)
}
if (activeReactiveEffectStack.indexOf(effect) === -1) {
cleanup(effect)
try {
activeReactiveEffectStack.push(effect)
return fn(...args)
} finally {
activeReactiveEffectStack.pop()
}
}
}
他把依赖存储在了一个全局的数组中activeReactiveEffectStack, 他以栈的形式存储，调用完依赖后，会弹出，大家要留意一下这里，后面会用到
怎么样，是不是很简单~
reactive
export function reactive(target: object) {
// 如果target是已经被readonly对象，那么直接返回对应的proxy对象
if (readonlyToRaw.has(target)) {
return target
}
// 如果target是已经被readonly对象，那么直接返回对应的真实对象
if (readonlyValues.has(target)) {
return readonly(target)
}
return createReactiveObject(
target,
rawToReactive,
reactiveToRaw,
mutableHandlers,
mutableCollectionHandlers
)
}
前两个if是用来处理这种情况的
// 情况一
const state1 = readonly({ count: 0 })
const state2 = reactive(state1)
// 情况二
const obj = { count: 0 }
const state1 = readonly(obj)
const state2 = reactive(obj)
可以看到reactive它的参数是被readonly的对象，reactive不会对它再次创建响应式，而是通过Map映射，拿到对应的对象，即Proxy <==> Object的相互转换。
createReactiveObject创建响应式对象,注意它的参数
createReactiveObject(
target,
rawToReactive, // Object ==> Proxy
reactiveToRaw, // Proxy ==> Object
mutableHandlers, // get set has ...
mutableCollectionHandlers // 很少会用，不讲了~
)
以上就是reative一开始所做的一些事情,狼蚁网站SEO优化继续分析createReactiveObject
createReactiveObject
function createReactiveObject(
target: any,
toProxy: WeakMap<any, any>,
toRaw: WeakMap<any, any>,
baseHandlers: ProxyHandler<any>,
collectionHandlers: ProxyHandler<any>
) {
// 如果不是对象，在开发环境报出警告
if (!isObject(target)) {
if (__DEV__) {
console.warn(`value cannot be made reactive: ${String(target)}`)
}
return target
}
let observed = toProxy.get(target)
// 如果目标对象已经有proxy对象，直接返回
if (observed !== void 0) {
return observed
}
// 如果目标对象是proxy的对象，并且有对应的真实对象，那么也直接返回
if (toRaw.has(target)) {
return target
}
// 如果它是vnode或者vue，则不能被观测
if (!canObserve(target)) {
return target
}
// 判断被观测的对象是否是set,weakSet,map,weakMap,根据情况使用对应proxy的，配置对象
const handlers = collectionTypes.has(target.constructor)
? collectionHandlers
: baseHandlers
observed = new Proxy(target, handlers)
toProxy.set(target, observed)
toRaw.set(observed, target)
if (!targetMap.has(target)) {
targetMap.set(target, new Map())
}
return observed
}
第一个if,判断是否是对象，否则报出警告
toProxy拿到观测对象的Proxy对象，如果存在直接返回
// 这种情况
const obj = { count: 0 }
const state1 = reative(obj)
const state2 = reative(obj)
toRaw拿到Proxy对象对应的真实对象,如果存在直接返回
// 这种情况
const obj = { count: 0 }
const state1 = reative(obj)
const state2 = reative(state1)
有些情况无法被观测,则直接返回观测对象本身
const canObserve = (value: any): boolean => {
return (
!value._isVue &&
!value._isVNode &&
observableValueRE.test(toTypeString(value)) &&
!nonReactiveValues.has(value)
)
}
设置handlers，即get,set等属性访问器， 注意：collectionHandlers是用来处理观测对象为Set,Map等情况，很少见，这里就不讲了
const handlers = collectionTypes.has(target.constructor) ? collectionHandlers : baseHandlers
然后创建了Proxy对象，并把观测对象和Proxy对象，分别做映射
observed = new Proxy(target, handlers) toProxy.set(target, observed) toRaw.set(observed, target)
然后在targetMap做了target ==> Map的映射，这又是干嘛，注意：targetMap是全局的
export const targetMap: WeakMap<any, KeyToDepMap> = new WeakMap()
if (!targetMap.has(target)) {
targetMap.set(target, new Map())
}
在这里先给大家卖个关子，targetMap非常重要，是用来保存依赖的地方
讲完了reactive，可以回到一开始的引子
依赖收集
说到依赖收集，不得不提到，依赖的创建，那么Vue3.0是在哪里创建了渲染依赖呢，大家可以找到狼蚁网站SEO优化这段代码以及文件
// vue-next\packages\runtime-core\src\createRenderer.ts
function setupRenderEffect(
instance: ComponentInternalInstance,
parentSuspense: HostSuspsenseBoundary | null,
initialVNode: HostVNode,
container: HostElement,
anchor: HostNode | null,
isSVG: boolean
) {
// create reactive effect for rendering
let mounted = false
instance.update = effect(function componentEffect() {
// ...
}, __DEV__ ? createDevEffectOptions(instance) : prodEffectOptions)
}
代码特别长，我剪掉了中间部分，大家还记得effect有个选项lazy吗，没错，它默认是false，也就会立即调用传入的componentEffect回调,在它内部调用了patch实现了组件的挂载。
敲黑板，关键来了，还记得effect调用，内部会调用run方法吗
function run(effect: ReactiveEffect, fn: Function, args: any[]): any {
if (!effect.active) {
return fn(...args)
}
if (activeReactiveEffectStack.indexOf(effect) === -1) {
cleanup(effect)
try {
activeReactiveEffectStack.push(effect)
return fn(...args)
} finally {
activeReactiveEffectStack.pop()
}
}
}
这里进行了第一步的依赖收集，保存在全局数组中，为了方便触发get的对象，将依赖收集到自己的deps中
然后就是调用patch，进行组件挂载
if (!mounted) {
const subTree = (instance.subTree = renderComponentRoot(instance))
// beforeMount hook
if (instance.bm !== null) {
invokeHooks(instance.bm)
}
patch(null, subTree, container, anchor, instance, parentSuspense, isSVG)
initialVNode.el = subTree.el
// mounted hook
if (instance.m !== null) {
queuePostRenderEffect(instance.m, parentSuspense)
}
mounted = true
}
至于它内部实现，我就不讲了,不是本文重点，然后我们去编译的地方看看
//vue-next\packages\runtime-core\src\component.ts
function finishComponentSetup(
instance: ComponentInternalInstance,
parentSuspense: SuspenseBoundary | null
) {
const Component = instance.type as ComponentOptions
if (!instance.render) {
if (Component.template && !Component.render) {
if (compile) {
Component.render = compile(Component.template, {
onError(err) {}
})
} else if (__DEV__) {
warn(
`Component provides template but the build of Vue you are running ` +
`does not support on-the-fly template compilation. Either use the ` +
`full build or pre-compile the template using Vue CLI.`
)
}
}
if (__DEV__ && !Component.render) {
warn(
`Component is missing render function. Either provide a template or ` +
`return a render function from setup().`
)
}
instance.render = (Component.render || NOOP) as RenderFunction
}
// ...其他
}
上面的代码是编译部分，我们来看看例子中编译后是什么样
(function anonymous(
) {
const _Vue = Vue
const _createVNode = Vue.createVNode
const _hoisted_1 = { id: "box" }
return function render() {
with (this) {
const { toString: _toString, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return (_openBlock(), _createBlock("div", _hoisted_1, [
_createVNode("button", { onClick: increment }, _toString(state.count), 9 /* TEXT, PROPS */, ["onClick"])
]))
}
}
})
可以看到，编译的代码中，有使用到state.count,那么就会触发get访问器，从而收集依赖，至于为什么能直接访问到属性，原因是由于with设置了上下文，狼蚁网站SEO优化我们具体分析get
get
// vue-next\packages\reactivity\src\baseHandlers.ts
function createGetter(isReadonly: boolean) {
return function get(target: any, key: string | symbol, receiver: any) {
const res = Reflect.get(target, key, receiver)
if (typeof key === 'symbol' && builtInSymbols.has(key)) {
return res
}
// _isRef
if (isRef(res)) {
return res.value
}
track(target, OperationTypes.GET, key)
// 如果该属性对应的值还是对象，就继续递归创建响应式
return isObject(res)
? isReadonly
? // need to lazy access readonly and reactive here to avoid
// circular dependency
readonly(res)
: reactive(res)
: res
}
}
调用Reflect.get获取属性值
如果key是symbol并且是Symbol的一个属性，就直接返回该值
// 这种情况
const key = Symbol('key')
const state = reative({
[key]: 'symbol value'
})
state[key]
如果值为Ref返回该值的value,看到这里如果大家有了解过ref api的话就知道了，由于ref它自己实现了自己的get,set,所以不再需要执行后面的逻辑，这个在后面会讲
调用track
递归深度观测，使整个对象都为响应式
狼蚁网站SEO优化我会详细讲解
track
在讲它之前，先了解它有哪些参数
target: any, // 目标对象
type: OperationTypes, // 追踪数据变化类型，这里是get
key?: string | symbol // 需要获取的key
export const enum OperationTypes {
SET = 'set',
ADD = 'add',
DELETE = 'delete',
CLEAR = 'clear',
GET = 'get',
HAS = 'has',
ITERATE = 'iterate'
}
export function track(
target: any,
type: OperationTypes,
key?: string | symbol
) {
if (!shouldTrack) {
return
}
// 获取activeReactiveEffectStack中的依赖
const effect = activeReactiveEffectStack[activeReactiveEffectStack.length - 1]
if (effect) {
if (type === OperationTypes.ITERATE) {
key = ITERATE_KEY
}
// 获取目标对象对应的依赖map
let depsMap = targetMap.get(target)
if (depsMap === void 0) {
targetMap.set(target, (depsMap = new Map()))
}
// 获取对应属性的依赖
let dep = depsMap.get(key as string | symbol)
// 如果该依赖不存在
if (!dep) {
// 设置属性对应依赖
depsMap.set(key as string | symbol, (dep = new Set()))
}
// 如果属性对应依赖set中不存在该依赖
if (!dep.has(effect)) {
// 添加到依赖set中
dep.add(effect)
effect.deps.push(dep)
if (__DEV__ && effect.onTrack) {
// 调用onTrack钩子
effect.onTrack({
effect,
target,
type,
key
})
}
}
}
}
activeReactiveEffectStack我两次提到，从它这里拿到了依赖，注意后面执行完依赖后，会从它里面弹出
如果effect存在
从targetMap中获取对象，对饮的Map,具体的数据结构类似这样
const state = reative({
count: 0
})
effect(() => {
console.log(state.count)
})
// 依赖大致结构(随便写的,不太规范)
{
target(state):Map {
count: Set (componentEffect渲染依赖, user自己添加的依赖)
}
}
如果该对象不存在Map,就初始化一个
如果该Map中属性对应的Set不存在，就初始化一个Set
添加依赖到Set中
添加依赖到effect自身的deps数组中
最后调用onTrack回调
// 调用onTrack钩子
effect.onTrack({
effect,
target,
type,
key
})
OK,Track实现大体就这样，是不是也很简单，有了这些基础，后面要讲的一些API就很容易理解了
set
当我们点击按钮后，就会触发set属性访问器
function set(
target: any,
key: string | symbol,
value: any,
receiver: any
): boolean {
value = toRaw(value)
const hadKey = hasOwn(target, key)
const oldValue = target[key]
// 如果旧的值是ref,而新的值不是ref
if (isRef(oldValue) && !isRef(value)) {
// 直接更改原始ref即可
oldValue.value = value
return true
}
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)) {
/* istanbul ignore else */
if (__DEV__) {
const extraInfo = { oldValue, newValue: value }
if (!hadKey) {
trigger(target, OperationTypes.ADD, key, extraInfo)
} else if (value !== oldValue) {
trigger(target, OperationTypes.SET, key, extraInfo)
}
} else {
if (!hadKey) {
trigger(target, OperationTypes.ADD, key)
} else if (value !== oldValue) {
trigger(target, OperationTypes.SET, key)
}
}
}
return result
}
判断旧值是ref,新值不是ref
// 这种情况
const val = ref(0)
const state = reative({
count: val
})
state.count = 1
// 其实state.count最终还是ref,还是能通过value访问
state.count.value // 1
调用Reflect.set修改值
开发环境下，拿到新旧值组成的对象，调用trigger，为什么开发环境要这么做呢，其实是为了方便onTrigger能拿到新旧值
trigger(target, OperationTypes.ADD, key, extraInfo)
可以看到第二个参数和track是一样的enum，有两种情况，一种我们设置了新的属性和值，另一种修改了原有属性值，狼蚁网站SEO优化我们来看看trigger实现。
trigger
export function trigger(
target: any,
type: OperationTypes,
key?: string | symbol,
extraInfo?: any
) {
const depsMap = targetMap.get(target)
if (depsMap === void 0) {
// never been tracked
return
}
// effect set
const effects: Set<ReactiveEffect> = new Set()
// computed effect set
const computedRunners: Set<ReactiveEffect> = new Set()
if (type === OperationTypes.CLEAR) {
depsMap.forEach(dep => {
addRunners(effects, computedRunners, dep)
})
} else {
// 添加effect到set中
if (key !== void 0) {
addRunners(effects, computedRunners, depsMap.get(key as string | symbol))
}
// also run for iteration key on ADD | DELETE
if (type === OperationTypes.ADD || type === OperationTypes.DELETE) {
const iterationKey = Array.isArray(target) ? 'length' : ITERATE_KEY
addRunners(effects, computedRunners, depsMap.get(iterationKey))
}
}
// 执行set中的effect
const run = (effect: ReactiveEffect) => {
scheduleRun(effect, target, type, key, extraInfo)
}
computedRunners.forEach(run)
effects.forEach(run)
}
看到这个函数开始的targetMap，大家应该很清楚要干嘛了吧,没错，拿到对象的Map,它包含了属性的所有依赖
- 如果没有Map直接返回
- 创建了两个Set,要干嘛用呢
// 用来保存将要执行的依赖 const effects: Set<ReactiveEffect> = new Set() // computed依赖，因为trigger不仅是要处理effect,watch,还要处理computed惰性求值的情况 const computedRunners: Set<ReactiveEffect> = new Set()
处理三种情况CLEAR,ADD,DELETE,SET(这里没有标识)
// effect set
const effects: Set<ReactiveEffect> = new Set()
// computed effect set
const computedRunners: Set<ReactiveEffect> = new Set()
function addRunners(
effects: Set<ReactiveEffect>,
computedRunners: Set<ReactiveEffect>,
effectsToAdd: Set<ReactiveEffect> | undefined
) {
if (effectsToAdd !== void 0) {
effectsToAdd.forEach(effect => {
if (effect.computed) {
computedRunners.add(effect)
} else {
effects.add(effect)
}
})
}
}
可以看到，三种情况实际上都差不多，唯一的区别就是，如果添加的对象是数组,就会拿到length属性的依赖，用于修改数组长度
if (type === OperationTypes.ADD || type === OperationTypes.DELETE) {
const iterationKey = Array.isArray(target) ? 'length' : ITERATE_KEY
addRunners(effects, computedRunners, depsMap.get(iterationKey))
}
执行属性对应的依赖
// 执行set中的effect
const run = (effect: ReactiveEffect) => {
scheduleRun(effect, target, type, key, extraInfo)
}
computedRunners.forEach(run)
effects.forEach(run)
function scheduleRun(
effect: ReactiveEffect,
target: any,
type: OperationTypes,
key: string | symbol | undefined,
extraInfo: any
) {
if (__DEV__ && effect.onTrigger) {
effect.onTrigger(
extend(
{
effect,
target,
key,
type
},
extraInfo // { oldValue, newValue: value }
)
)
}
if (effect.scheduler !== void 0) {
effect.scheduler(effect)
} else {
effect()
}
}
最后调用了scheduleRun,它内部会分别执行onTrigger,scheduler，effect
需要注意的是，只有开发环境才会执行onTrigger,这也是为什么，前面要这么判断
if (__DEV__) {
const extraInfo = { oldValue, newValue: value }
if (!hadKey) {
trigger(target, OperationTypes.ADD, key, extraInfo)
} else if (value !== oldValue) {
trigger(target, OperationTypes.SET, key, extraInfo)
}
}
readonly
有了前面的基础，readonly看起来会非常简单，唯一的区别就是rawToReadonly,rawToReadonly, readonlyHandlers
export function readonly(target: object) {
if (reactiveToRaw.has(target)) {
target = reactiveToRaw.get(target)
}
return createReactiveObject(
target,
rawToReadonly,
readonlyToRaw,
readonlyHandlers,
readonlyCollectionHandlers
)
}
前两个大家应该能猜出来了，关键是最后这个readonlyHandlers,区别就在set
set(target: any, key: string | symbol, value: any, receiver: any): boolean {
if (LOCKED) {
if (__DEV__) {
console.warn(
`Set operation on key "${key as any}" failed: target is readonly.`,
target
)
}
return true
} else {
return set(target, key, value, receiver)
}
}
它的实现很简单，不过LOCKED有是什么鬼，大家可以找到lock.ts
//vue-next\packages\reactivity\src\lock.ts
export let LOCKED = true
export function lock() {
LOCKED = true
}
export function unlock() {
LOCKED = false
}
看似简单，但是却非常重要，它能够控制被readonly的对象能够暂时被更改，就比如我们常用的props,它是无法被修改的,但是Vue内部又要对他进行更新，那怎么办，话不多说，我们再源码中看他具体应用
// vue-next\packages\runtime-core\src\componentProps.ts
export function resolveProps(
instance: ComponentInternalInstance,
rawProps: any,
_options: ComponentPropsOptions | void
) {
const hasDeclaredProps = _options != null
const options = normalizePropsOptions(_options) as NormalizedPropsOptions
if (!rawProps && !hasDeclaredProps) {
return
}
const props: any = {}
let attrs: any = void 0
const propsProxy = instance.propsProxy
const setProp = propsProxy
? (key: string, val: any) => {
props[key] = val
propsProxy[key] = val
}
: (key: string, val: any) => {
props[key] = val
}
unlock()
// 省略一些修改props操作。。
lock()
instance.props = __DEV__ ? readonly(props) : props
instance.attrs = options
? __DEV__ && attrs != null
? readonly(attrs)
: attrs
: instance.props
}
这里前后分别调用了unlock和lock,这样就可以控制对readonly属性的修改
那么readonly的讲解就到这了
computed
export function computed<T>(
getterOrOptions: (() => T) | WritableComputedOptions<T>
): any {
const isReadonly = isFunction(getterOrOptions)
const getter = isReadonly
? (getterOrOptions as (() => T))
: (getterOrOptions as WritableComputedOptions<T>).get
const setter = isReadonly
? null
: (getterOrOptions as WritableComputedOptions<T>).set
let dirty: boolean = true
let value: any = undefined
const runner = effect(getter, {
lazy: true,
computed: true,
scheduler: () => {
dirty = true
}
})
return {
_isRef: true,
// expose effect so computed can be stopped
effect: runner,
get value() {
if (dirty) {
value = runner()
dirty = false
}
trackChildRun(runner)
return value
},
set value(newValue) {
if (setter) {
setter(newValue)
} else {
// TODO warn attempting to mutate readonly computed value
}
}
}
}
首先是前面这段
const isReadonly = isFunction(getterOrOptions) const getter = isReadonly ? (getterOrOptions as (() => T)) : (getterOrOptions as WritableComputedOptions<T>).get const setter = isReadonly ? null : (getterOrOptions as WritableComputedOptions<T>).set
大家都知道computed是可以单独写一个函数，或者get,set访问的，这里不多讲
然后调用了effect,这里lazy设置为true, scheduler可以更改dirty为true
const runner = effect(getter, {
lazy: true,
computed: true,
scheduler: () => {
dirty = true
}
})
然后我们具体来看看，返回的对象
{
_isRef: true,
// expose effect so computed can be stopped
effect: runner,
get value() {
if (dirty) {
value = runner()
dirty = false
}
trackChildRun(runner)
return value
},
set value(newValue) {
if (setter) {
setter(newValue)
} else {
// TODO warn attempting to mutate readonly computed value
}
}
}
先说说set吧，尤大似乎还没写完，只是单纯能修改值
然后是get,注意dirty的变化，如果computed依赖了state中的值，初次渲染时，他会调用依赖，然后dirty = false，关键来了，最后执行了trackChildRun
function trackChildRun(childRunner: ReactiveEffect) {
const parentRunner =
activeReactiveEffectStack[activeReactiveEffectStack.length - 1]
if (parentRunner) {
for (let i = 0; i < childRunner.deps.length; i++) {
const dep = childRunner.deps[i]
if (!dep.has(parentRunner)) {
dep.add(parentRunner)
parentRunner.deps.push(dep)
}
}
}
}
由于computed是依赖了state中的属性的，一旦在初始时触发了get,执行runner，就会将依赖收集到activeReactiveEffectStack中，最后才是自己的依赖，栈的顶部是state属性的依赖
if (!dep.has(parentRunner)) {
dep.add(parentRunner)
parentRunner.deps.push(dep)
}
所以最后这段代码实现了state属性变化后，才导致了computed依赖的调用，从而惰性求值
ref
const convert = (val: any): any => (isObject(val) ? reactive(val) : val)
export function ref<T>(raw: T): Ref<T> {
raw = convert(raw)
const v = {
_isRef: true,
get value() {
track(v, OperationTypes.GET, '')
return raw
},
set value(newVal) {
raw = convert(newVal)
trigger(v, OperationTypes.SET, '')
}
}
return v as Ref<T>
}
ref的实现真的很简单了，前面已经学习了那么多，相信大家都能看懂了，区别就是convert(raw)对传入的值进行了简单判断，如果是对象就设置为响应式，否则返回原始值。
最后
终于分析完了，Vue3.0响应系统使用了Proxy相比于Vue2.0的代码真的简洁许多，也好理解，说难不难。其实还有watch并没有讲，它没有在reactivity中，但是实现还是使用了effect，套路都是一样的。最后谢谢大家观看。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。