vue3-watchEffect源码

逃离我推掉我的手 2022-10-30 15:26 243阅读 0赞

function watchEffect(effect, options) {
        return doWatch(effect, null, options);//⭐️⭐️返回一个watch函数
    }
    /**
     *⭐️⭐️⭐️⭐️⭐️doWatch
     * @param {*} source effect函数
     * @param {*} { immediate, deep, flush, onTrack, onTrigger } 监听函数option配置
     */
    function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = EMPTY_OBJ, instance = currentInstance) {
          if ( !cb) {
              if (immediate !== undefined) {
                  warn(`watch() "immediate" option is only respected when using the ` +
                      `watch(source, callback, options?) signature.`);
              }
              if (deep !== undefined) {
                  warn(`watch() "deep" option is only respected when using the ` +
                      `watch(source, callback, options?) signature.`);
              }
          }
          const warnInvalidSource = (s) => {
              warn(`Invalid watch source: `, s, `A watch source can only be a getter/effect function, a ref, ` +
                  `a reactive object, or an array of these types.`);
          };
          let getter;
          let forceTrigger = false;
          if (isRef(source)) {
              getter = () => source.value;
              forceTrigger = !!source._shallow;
          }
          else if (isReactive(source)) {
              getter = () => source;
              deep = true;
          }
          else if (isArray(source)) {
              getter = () => source.map(s => {
                  if (isRef(s)) {
                      return s.value;
                  }
                  else if (isReactive(s)) {
                      return traverse(s);
                  }
                  else if (isFunction(s)) {
                      return callWithErrorHandling(s, instance, 2 /* WATCH_GETTER */);
                  }
                  else {
                       warnInvalidSource(s);
                  }
              });
          }
          else if (isFunction(source)) {
              if (cb) {
                  // getter with cb
                  getter = () => callWithErrorHandling(source, instance, 2 /* WATCH_GETTER */);
              }
              else {
                  // no cb -> simple effect
                  getter = () => {
                      if (instance && instance.isUnmounted) {
                          return;
                      }
                      if (cleanup) {
                          cleanup();
                      }
                      return callWithErrorHandling(source, instance, 3 /* WATCH_CALLBACK */, [onInvalidate]);
                  };
              }
          }
          else {
              getter = NOOP;
               warnInvalidSource(source);
          }
          if (cb && deep) {
              const baseGetter = getter;
              getter = () => traverse(baseGetter());
          }
          let cleanup;
          const onInvalidate = (fn) => {
              cleanup = runner.options.onStop = () => {
                  callWithErrorHandling(fn, instance, 4 /* WATCH_CLEANUP */);
              };
          };
          let oldValue = isArray(source) ? [] : INITIAL_WATCHER_VALUE;
          const job = () => {
              if (!runner.active) {
                  return;
              }
              if (cb) {
                  // watch(source, cb)
                  const newValue = runner();
                  if (deep || forceTrigger || hasChanged(newValue, oldValue)) {
                      // cleanup before running cb again
                      if (cleanup) {
                          cleanup();
                      }
                      callWithAsyncErrorHandling(cb, instance, 3 /* WATCH_CALLBACK */, [
                          newValue,
                          // pass undefined as the old value when it's changed for the first time
                          oldValue === INITIAL_WATCHER_VALUE ? undefined : oldValue,
                          onInvalidate
                      ]);
                      oldValue = newValue;
                  }
              }
              else {
                  // watchEffect
                  runner();
              }
          };
          // important: mark the job as a watcher callback so that scheduler knows
          // it is allowed to self-trigger (#1727)
          job.allowRecurse = !!cb;
          let scheduler;
          if (flush === 'sync') {
              scheduler = job;
          }
          else if (flush === 'post') {
              scheduler = () => queuePostRenderEffect(job, instance && instance.suspense);
          }
          else {
              // default: 'pre'
              scheduler = () => {
                  if (!instance || instance.isMounted) {
                      queuePreFlushCb(job);
                  }
                  else {
                      // with 'pre' option, the first call must happen before
                      // the component is mounted so it is called synchronously.
                      job();
                  }
              };
          }
          const runner = effect(getter, {
              lazy: true,
              onTrack,
              onTrigger,
              scheduler
          });
          recordInstanceBoundEffect(runner, instance);
          // initial run
          if (cb) {
              if (immediate) {
                  job();
              }
              else {
                  oldValue = runner();
              }
          }
          else if (flush === 'post') {
              queuePostRenderEffect(runner, instance && instance.suspense);
          }
          else {
              runner();
          }
          return () => {
              stop(runner);
              if (instance) {
                  remove(instance.effects, runner);
              }
          };
      }
    /**
     *⭐️⭐️⭐️⭐️⭐️effect
     * @param {*} fn
     * @param {*} options option配置
     */
    function effect(fn, options = EMPTY_OBJ) {
          if (isEffect(fn)) {
              fn = fn.raw;
          }
          const effect = createReactiveEffect(fn, options);
          if (!options.lazy) {
              effect();
          }
          return effect;
      }
    /**
     *⭐️⭐️⭐️⭐️⭐️createReactiveEffect
     * @param {*} fn
     * @param {*} options option配置
     */
    function createReactiveEffect(fn, options) {
          const effect = function reactiveEffect() {
              if (!effect.active) {
                  return options.scheduler ? undefined : fn();
              }
              if (!effectStack.includes(effect)) {
                  cleanup(effect);
                  try {
                      enableTracking();
                      effectStack.push(effect);
                      activeEffect = effect;
                      return fn();
                  }
                  finally {
                      effectStack.pop();
                      resetTracking();
                      activeEffect = effectStack[effectStack.length - 1];
                  }
              }
          };
          effect.id = uid++;
          effect.allowRecurse = !!options.allowRecurse;
          effect._isEffect = true;
          effect.active = true;
          effect.raw = fn;
          effect.deps = [];
          effect.options = options;
          return effect;
      }

发表评论取消回复

表情：

评论列表（有 0 条评论，243人围观）

还没有评论，来说两句吧...

相关阅读

相关在 Vue 3 中 watch vs watchEffect

watch 和 watchEffect 的区别 watch 基本使用 `watch`监听响应式状态发生变化的，当响应式状态发生变化时，都会触发一个回调函数。

冷不防/ 2023年09月27日 21:53/ 0 赞/ 121 阅读

相关 VUE 3.0源码之effect

`effect`方法主要用于处理函数的响应式，可用于计算属性和watchEffect等功能，通过触发函数中响应式变量的`proxy`的`get`方法实现将自身加入到`proxy

冷不防/ 2023年05月22日 06:48/ 0 赞/ 36 阅读

相关 vue3 watch 和 watchEffect 的使用和差异性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

红太狼/ 2023年01月22日 12:49/ 0 赞/ 18 阅读

相关 Vue3源码 nextTick解析

![format_png][] > 定义: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM 看完是不是有一堆问号？我们从

╰+哭是因爲堅強的太久メ/ 2022年12月23日 07:24/ 0 赞/ 189 阅读

相关 VUE 3.0源码之watch和watchEffect

1.watch和watchEffect 这两都是直接调用doWatch方法，唯一区别就是第二个参数不同。 export function watchEffect

た入场券/ 2022年12月20日 03:27/ 0 赞/ 167 阅读

相关 VUE 3.0源码之computed

1. 入口 computed方法首先调用\_computed实现计算属性，然后调用recordInstanceBoundEffect记录当前的effect，方便当组件卸载

冷不防/ 2022年12月08日 04:18/ 0 赞/ 147 阅读

相关 vue3-watchEffect源码

function watchEffect(effect, options) { return doWatch(effect, null, options

逃离我推掉我的手/ 2022年10月30日 15:26/ 0 赞/ 244 阅读

相关 Vue3源码第四篇-Vue3 setup

系列文章目录 [Vue3源码第一篇-总览][Vue3_ _-] [Vue3源码第二篇-Reactive API][Vue3_ _-Reactive API]

浅浅的花香味﹌/ 2022年09月14日 14:24/ 0 赞/ 355 阅读

相关 vue3源码

reactive![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

向右看齐/ 2022年09月02日 11:35/ 0 赞/ 206 阅读

相关 vue3.0 watchEffect

立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数。用法: import { watchEffect } from

超、凢脫俗/ 2021年07月24日 11:42/ 0 赞/ 340 阅读