Vue3源码【二】—— watch侦听computed计算属性原理及简单实现

2024-06-18 03:12
文章标签 javascript 简单 实现 源码 计算 vue vue3 原理 属性 frontend computed watch 侦听

本文主要是介绍Vue3源码【二】—— watch侦听computed计算属性原理及简单实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、watch监听器

1.1、使用watch

watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用，然后下面就是使用watch的一个说明。 小声逼逼：我还是习惯用监听，后面的监听也就是侦听。

/*** @param source 监听对象*                监听单个            a*                监听多个            [a,b]*                监听reactive单个值   ()=>{}* @param cb 回调函数 （newVal, oldVal）得到变换前后的值* @param options 配置项*                immediate 是否立即执行*                deep 是否深度监听*                once 是否只执行一次*				  flush 回调执行时机*/
watch(source,(newVal, oldVal)=>{},{})

1.2、创建watch

直接在源码当中找到watch，路径是packages/runtime-core/src/apiWatch.ts，他本身就是一个函数，之后回去执行doWatch，同时我们可以看一下options配置的类型WatchOptions，这个我们先放在着，等下看一下配置项是如何生效的。

export function watch<T = any, Immediate extends Readonly<boolean> = false>(source: T | WatchSource<T>,cb: any,options?: WatchOptions<Immediate>,
): WatchStopHandle {return doWatch(source as any, cb, options)
}//
export interface WatchOptions<Immediate = boolean> extends WatchOptionsBase {immediate?: Immediatedeep?: booleanonce?: boolean
}

1.3、执行监听

  • 首先对once配置项是否只执行一次进行判断，然后提前先对deep深层监听判断
  • 监听源判断，单值监听、多值监听、回调监听。同时需要去判断ref和reactive。
  • 根据前两步去判断是单层还是深层监听，执行traverse
  • 创建一个job，在job当中去更新新旧值
  • 判断flush，用来确定值变换与dom更新的时机（先后顺序）
  • 判断immediate，是否立即执行一次（执行一次job）
  • 最后通过effect.run()开始依赖收集整体调度
  • doWatch返回了unwatch，这也就是const A =watch(a,()=>{}); A();再调用一个A就可以去除监听的原因
function doWatch(source: WatchSource | WatchSource[] | WatchEffect | object,cb: WatchCallback | null,{immediate,deep,flush,once,onTrack,onTrigger,}: WatchOptions = EMPTY_OBJ,// EMPTY_OBJ是一个Object.freeze({})冻结的空对象，也就是说当没有传options过来时，这个配置都会从这个{}解构得到
): WatchStopHandle {// 当指定了once只执行一次，会执行一次cb（callback）然后unwatch结束监听if (cb && once) {const _cb = cbcb = (...args) => {_cb(...args)unwatch()}}const instance = currentInstanceconst reactiveGetter = (source: object) =>deep === true? source // 遍历将发生在下面的包装getter中: // 对于deep:false，仅遍历根级属性traverse(source, deep === false ? 1 : undefined)let getter: () => anylet forceTrigger = falselet isMultiSource = falseif (isRef(source)) {// ref对象的get直接访问value属性getter = () => source.value// 判断是否是浅层refforceTrigger = isShallow(source)} else if (isReactive(source)) {// 对于reactive对象来说，是通过deep去控制是否需要深层监听的getter = () => reactiveGetter(source)forceTrigger = true} else if (isArray(source)) {// 数组isMultiSource = true// 看是否有深层监听forceTrigger = source.some(s => isReactive(s) || isShallow(s))getter = () =>source.map(s => {if (isRef(s)) {return s.value} else if (isReactive(s)) {return reactiveGetter(s)} else if (isFunction(s)) {return callWithErrorHandling(s, instance, ErrorCodes.WATCH_GETTER)} else {// 不能监听}})} else if (isFunction(source)) {if (cb) {// getter with cbgetter = () =>callWithErrorHandling(source, instance, ErrorCodes.WATCH_GETTER)} else {// no cb -> simple effectgetter = () => {if (cleanup) {cleanup()}return callWithAsyncErrorHandling(source,instance,ErrorCodes.WATCH_CALLBACK,[onCleanup],)}}} else {getter = NOOP}// 有回调并且是单层监听if (__COMPAT__ && cb && !deep) {const baseGetter = gettergetter = () => {const val = baseGetter()if (isArray(val) &&checkCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance)) {traverse(val)}return val}}// 深层监听if (cb && deep) {const baseGetter = gettergetter = () => traverse(baseGetter())}let cleanup: (() => void) | undefinedlet onCleanup: OnCleanup = (fn: () => void) => {cleanup = effect.onStop = () => {callWithErrorHandling(fn, instance, ErrorCodes.WATCH_CLEANUP)cleanup = effect.onStop = undefined}}// 在SSR中，不需要设置实际效果，它应该是noop// 除非它很急切或同步刷新let ssrCleanup: (() => void)[] | undefinedif (__SSR__ && isInSSRComponentSetup) {// 我们也不会调用 invalide 回调（没有设置+runner）onCleanup = NOOPif (!cb) {getter()} else if (immediate) {callWithAsyncErrorHandling(cb, instance, ErrorCodes.WATCH_CALLBACK, [getter(),isMultiSource ? [] : undefined,onCleanup,])}if (flush === 'sync') {const ctx = useSSRContext()!ssrCleanup = ctx.__watcherHandles || (ctx.__watcherHandles = [])} else {return NOOP}}// isMultiSource 用来标记是否是多数据监听let oldValue: any = isMultiSource? new Array((source as []).length).fill(INITIAL_WATCHER_VALUE): INITIAL_WATCHER_VALUE// 开始调度const job: SchedulerJob = () => {// 需要保证依赖收集是开启的if (!effect.active || !effect.dirty) {return}if (cb) {const newValue = effect.run()// 有真则真// 深层监听 || 对象监听 || （多数据监听 遍历通过Object.is(value, oldValue)去比较值是否改变）|| （是数组类型 && ？）if (deep ||forceTrigger ||(isMultiSource? (newValue as any[]).some((v, i) => hasChanged(v, oldValue[i])): hasChanged(newValue, oldValue)) ||(__COMPAT__ &&isArray(newValue) &&isCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance))) {// 再次运行cb之前的清理if (cleanup) {cleanup()}callWithAsyncErrorHandling(cb, instance, ErrorCodes.WATCH_CALLBACK, [newValue,// 第一次更改时将undefined作为旧值传递，到这里oldVal才会有值oldValue === INITIAL_WATCHER_VALUE? undefined: isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE? []: oldValue,onCleanup,])oldValue = newValue}} else {// watchEffecteffect.run()}}// 将job标记为观察程序回调，以便调度程序知道，它被允许自触发 先设置为falsejob.allowRecurse = !!cb // !!undefined falselet scheduler: EffectScheduler/*** flush: 'pre' | 'post' | 'sync'* pre  在侦听器的回调函数运行之前立即运行更新函数* post ------------------之后-------------* sync 同步* */if (flush === 'sync') {scheduler = job as any // the scheduler function gets called directly} else if (flush === 'post') {scheduler = () => queuePostRenderEffect(job, instance && instance.suspense)} else {// default: 'pre'job.pre = true// 把当前示例的id作为job任务idif (instance) job.id = instance.uid// 开始调度scheduler = () => queueJob(job)}// 和响应式那块是一样的，收集依赖const effect = new ReactiveEffect(getter, NOOP, scheduler)const scope = getCurrentScope()const unwatch = () => {// 停止依赖收集，并且把这个effect剔除出去effect.stop()if (scope) {remove(scope.effects, effect)}}// initial runif (cb) {// immediate 是否先调度一次if (immediate) {job()} else {oldValue = effect.run()}} else if (flush === 'post') {queuePostRenderEffect(effect.run.bind(effect),instance && instance.suspense,)} else {effect.run()}if (__SSR__ && ssrCleanup) ssrCleanup.push(unwatch)return unwatch
}

1.4、traverse对象值收集

在上面有调用traverse(baseGetter())，把getter传给了这个函数，简单看一下这个函数，其实就是把所有getter能拿到的值全部给加到seen（set集合当中）之后要是有watch的变更也直接从这里面去掉即可

export function traverse(value: unknown,depth = Infinity,seen?: Set<unknown>,
) {if (depth <= 0 || !isObject(value) || (value as any)[ReactiveFlags.SKIP]) {return value}seen = seen || new Set()if (seen.has(value)) {return value}seen.add(value)depth--// 看是不是ref还包了ref// 后面判断递归都是同理，把所有值都给加到seen当中if (isRef(value)) {traverse(value.value, depth, seen)} else if (isArray(value)) {for (let i = 0; i < value.length; i++) {traverse(value[i], depth, seen)}} else if (isSet(value) || isMap(value)) {value.forEach((v: any) => {traverse(v, depth, seen)})} else if (isPlainObject(value)) {for (const key in value) {traverse(value[key], depth, seen)}for (const key of Object.getOwnPropertySymbols(value)) {if (Object.prototype.propertyIsEnumerable.call(value, key)) {traverse(value[key as any], depth, seen)}}}return value
}

1.5、watchEffect

立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。官网说明：前往 https://cn.vuejs.org/api/reactivity-core.html#watcheffect

// use，当在watchEffect当中使用了的变量，就会自动追踪哪个属性，当使用了objEffect对象，他里面所有的属性都会被监听到
const objEffect = reactive({a: 1, b: {c: 1, d: {e: 2}}});
watchEffect(() => {console.log(' =====', objEffect.a);
});// 源码
export function watchPostEffect(effect: WatchEffect,options?: DebuggerOptions,
) {return doWatch(effect,null,__DEV__ ? extend({}, options as any, { flush: 'post' }) : { flush: 'post' },)
}// 这个去执行doWatch时，也就是数据源是一个函数，它执行的逻辑就是这一块
getter = () => {if (cleanup) {// 通过这个将依赖收集起来cleanup()}return callWithAsyncErrorHandling(source,instance,ErrorCodes.WATCH_CALLBACK,[onCleanup],)
}

1.6、扩展：watchPostEffect & watchSyncEffect

本质上就是指定了flush，flush默认值是pre，在侦听器的回调函数运行之前立即运行更新函数，也就是watchEffect，而这两个的意义还是用来在语义上对前后、同步调用的一个区分

  • watchPostEffect : 把flush指定为post，也就是回调函数运行之后运行更新函数

  • watchSyncEffect : 同步执行

export function watchPostEffect(effect: WatchEffect,options?: DebuggerOptions,
) {return doWatch(effect,null,__DEV__ ? extend({}, options as any, { flush: 'post' }) : { flush: 'post' },)
}export function watchSyncEffect(effect: WatchEffect,options?: DebuggerOptions,
) {return doWatch(effect,null,__DEV__ ? extend({}, options as any, { flush: 'sync' }) : { flush: 'sync' },)
}

2、computed 计算属性

2.1、使用computed

计算属性是当依赖的属性的值发生变化的时候，才会触发他的更改，如果依赖的值，不发生变化的时候，使用的是缓存中的属性值。

使用computed有以下两种方式，一个是传函数直接返回，一个可以通过传递对象给定get/set函数进去控制。

const A = computed(() => {return `A:${a.age}`;
});const B = computed({get: () => {return a.age;},set: (value) => {a.age = value;}
});

2.2、创建computed

先看一下computed是怎么创建的，源码位置：packages/reactivity/src/computed.ts。在这里通过getterOrOptions接收computed传递的参数，也就是可以拿到上面函数和对象两种方式传递的值，直接分别去取对应的get、set方法，通过ComputedRefImpl创建一个实现实例。

export function computed<T>(// getterOrOptions传递值  ComputedGetter就是一个回调函数，WritableComputedOptions是一个对象包了get/set方法getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>,debugOptions?: DebuggerOptions,isSSR = false,
) {let getter: ComputedGetter<T>let setter: ComputedSetter<T>// 判断传递过来是那种方式const onlyGetter = isFunction(getterOrOptions)if (onlyGetter) {// 将回调给到getter，并且不设置settergetter = getterOrOptionssetter = __DEV__? () => {warn('Write operation failed: computed value is readonly')}: NOOP} else {// 传递的是对象形式，直接去对象里面拿get/set方法getter = getterOrOptions.getsetter = getterOrOptions.set}const cRef = new ComputedRefImpl(getter, setter, onlyGetter || !setter, isSSR)if (__DEV__ && debugOptions && !isSSR) {cRef.effect.onTrack = debugOptions.onTrackcRef.effect.onTrigger = debugOptions.onTrigger}return cRef as any
}

2.2、ComputedRefImpl实例

  • 直接从构造开始看起，主要关注get/set两个方法。在构造创建了一个ReactiveEffect，也就是响应式的实现方式。并且指定了依赖触发
  • set值在计算属性当中不关系，主要是使用别的值改变后，怎么获取计算之后的值，也就是这的get
  • 在get当中通过了_cacheable是否缓存先执行一遍依赖触发和依赖收集的过程，而后则通过脏值判断是否需要使用缓存当中的值还是用新值
export class ComputedRefImpl<T> {public dep?: Dep = undefinedprivate _value!: Tpublic readonly effect: ReactiveEffect<T>public readonly __v_isRef = truepublic readonly [ReactiveFlags.IS_READONLY]: boolean = falsepublic _cacheable: boolean_warnRecursive?: boolean// 从构造开始，先不关心isReadonly和isSSR，就看get/setconstructor(private getter: ComputedGetter<T>,private readonly _setter: ComputedSetter<T>,isReadonly: boolean,isSSR: boolean,) {// 创建了ReactiveEffect，也就是前面说到的reactive响应式，并且指定了triggerRefValue（依赖触发）this.effect = new ReactiveEffect(() => getter(this._value),() =>triggerRefValue(this,this.effect._dirtyLevel === DirtyLevels.MaybeDirty_ComputedSideEffect // 4 === 2? DirtyLevels.MaybeDirty_ComputedSideEffect // 2: DirtyLevels.MaybeDirty, // 3),)this.effect.computed = thisthis.effect.active = this._cacheable = !isSSR // isSSR === false 添加缓存this[ReactiveFlags.IS_READONLY] = isReadonly // isReadonly === false}get value() {// 计算出的ref可能会被其他代理封装，例如readonly（） toRaw 转换成原始对象const self = toRaw(this)/*** self._cacheable 变量是否可缓存* self.effect.dirty 表示该变量是否被修改过* */if ((!self._cacheable || self.effect.dirty) &&hasChanged(self._value, (self._value = self.effect.run()!))) {// 值变换之后会触发依赖更新DOMtriggerRefValue(self, DirtyLevels.Dirty)}// 触发之后重新收集trackRefValue(self)// 这里通过 DirtyLevels.MaybeDirty_ComputedSideEffect 脏标记级别用来控制是否需要重新执行依赖触发去更新DOM等操作if (self.effect._dirtyLevel >= DirtyLevels.MaybeDirty_ComputedSideEffect) {triggerRefValue(self, DirtyLevels.MaybeDirty_ComputedSideEffect)}return self._value}set value(newValue: T) {this._setter(newValue)}get _dirty() {return this.effect.dirty}set _dirty(v) {this.effect.dirty = v}
}

2.3、简单实现computed计算属性

  • 首先还是要前面实现的MyReactive响应式的依赖收集依赖触发等方法（
    MyReactive响应式简单示例案例，单击前往），这里就不往下面贴了，但是对应依赖收集、触发（effect、trigger）需要进行细微调整，
    • 依赖收集就是在收集的时候添加了一个options，挂在effect上
    • 依赖触发本质上就是在遍历deps的时候去看一下那些值有scheduler调度。这个调度是我们创建computed去给他添加的。
  • 创建computed，这里简单实现就只接收一个函数入参，之后进行依赖收集，在这里就将scheduler调度给挂载到effect副作用函数上。
  • 当trigger响应式触发之后，会去尝试执行一个scheduler调度。执行了调度之后再去更新DOM时会触发effect，在computed当中get值，在这里判断了dirty，也就是新旧值是否相等（是否去更新cacheValue缓存值）。
const effect = (fn: Function, options: Options) => {const _effect = () => {activeEffect = _effect;return fn();};_effect.options = options;_effect();return _effect;
};const trigger = (target: object, key: any) => {const depsMap = targetMap.get(target);if (!depsMap) return;const deps = depsMap.get(key);if (!deps) return;deps.forEach((effect: { (): void; (): void; options: any; }) => {if (effect?.options?.scheduler) {effect?.options.scheduler?.();} else {effect();}});
};const myComputed = (getter: Function) => {let _value = effect(getter, {scheduler: () => {_dirty = true;}});let _dirty = true;let catchValue: any;class MyComputerRefImpl {get value() {if (_dirty) {catchValue = _value();_dirty = false;}return catchValue;}}return new MyComputerRefImpl();
};

这篇关于Vue3源码【二】—— watch侦听computed计算属性原理及简单实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1071145。

相关文章

Python使用python-can实现合并BLF文件

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库：CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合
阅读更多...
Python使用OpenCV实现获取视频时长的小工具

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文
阅读更多...
golang版本升级如何实现

golang版本升级如何实现

《golang版本升级如何实现》：本文主要介绍golang版本升级如何实现问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录golanwww.chinasem.cng版本升级linux上golang版本升级删除golang旧版本安装golang最新版本总结gola
阅读更多...
SpringBoot中SM2公钥加密、私钥解密的实现示例详解

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具
阅读更多...
Mysql实现范围分区表(新增、删除、重组、查看)

Mysql实现范围分区表(新增、删除、重组、查看)

《Mysql实现范围分区表(新增、删除、重组、查看)》MySQL分区表的四种类型（范围、哈希、列表、键值）,主要介绍了范围分区的创建、查询、添加、删除及重组织操作,具有一定的参考价值,感兴趣的可以了解... 目录一、mysql分区表分类二、范围分区（Range Partitioning1、新建分区表：2、分
阅读更多...
MySQL 定时新增分区的实现示例

MySQL 定时新增分区的实现示例

《MySQL定时新增分区的实现示例》本文主要介绍了通过存储过程和定时任务实现MySQL分区的自动创建,解决大数据量下手动维护的繁琐问题,具有一定的参考价值,感兴趣的可以了解一下... mysql创建好分区之后，有时候会需要自动创建分区。比如，一些表数据量非常大，有些数据是热点数据，按照日期分区MululbU
阅读更多...
MySQL中查找重复值的实现

MySQL中查找重复值的实现

《MySQL中查找重复值的实现》查找重复值是一项常见需求,比如在数据清理、数据分析、数据质量检查等场景下,我们常常需要找出表中某列或多列的重复值,具有一定的参考价值,感兴趣的可以了解一下... 目录技术背景实现步骤方法一：使用GROUP BY和HAVING子句方法二：仅返回重复值方法三：返回完整记录方法四：
阅读更多...
IDEA中新建/切换Git分支的实现步骤

IDEA中新建/切换Git分支的实现步骤

《IDEA中新建/切换Git分支的实现步骤》本文主要介绍了IDEA中新建/切换Git分支的实现步骤,通过菜单创建新分支并选择是否切换,创建后在Git详情或右键Checkout中切换分支,感兴趣的可以了... 前提：项目已被Git托管1、点击上方栏Git->NewBrancjsh...2、输入新的分支的
阅读更多...
Python实现对阿里云OSS对象存储的操作详解

Python实现对阿里云OSS对象存储的操作详解

《Python实现对阿里云OSS对象存储的操作详解》这篇文章主要为大家详细介绍了Python实现对阿里云OSS对象存储的操作相关知识,包括连接,上传,下载,列举等功能,感兴趣的小伙伴可以了解下... 目录一、直接使用代码二、详细使用1. 环境准备2. 初始化配置3. bucket配置创建4. 文件上传到os
阅读更多...
关于集合与数组转换实现方法

关于集合与数组转换实现方法

《关于集合与数组转换实现方法》：本文主要介绍关于集合与数组转换实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、Arrays.asList()1.1、方法作用1.2、内部实现1.3、修改元素的影响1.4、注意事项2、list.toArray()2.1、方
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2