前言
关于响应式原理想必大家都很清楚了,下面我将会根据响应式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一开始所做的一些事情,下面继续分析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是在哪里创建了渲染依赖呢,大家可以找到下面这段代码以及文件
- // 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设置了上下文,下面我们具体分析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
递归深度观测,使整个对象都为响应式
下面我会详细讲解
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,有两种情况,一种我们设置了新的属性和值,另一种修改了原有属性值,下面我们来看看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,套路都是一样的。最后谢谢大家观看。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。