认识vue3的调度器scheduler

449 阅读4分钟

调度器是vue3响应式系统中一个非常重要的特性,可调度性指的是当trigger 动作触发副作用函数重新执行时,有能力决定副作用函数执行的时机、次数以及方式

const data = { foo: 1 }
const obj = new Proxy(data, { /* ... */ })    // 上文中的响应式
 effect(() => {
 console.log(obj.foo)
 })
 obj.foo++
 console.log('结束了')

正常执行结果顺序是1,2,结束了,但是,若我们期望的打印顺序发生改变1,结束了,2,要实现这样的打印结果,就需要使用到调度器

  • 可以为函数effect函数设计一个选项参数options,允许用户指定调度器:
    effect(
        () => {
          console.log(obj.foo);
        },
        // options
        {
          // 调度器 scheduler 是一个函数
          scheduler(fn) { 
            // ... 
         },
        });
  • 将调度器对象挂在到当前副作用函数中
    // effect 函数用于注册副作用函数
      function effect(fn, options = {}) {
        fn.options = options; // 新增挂在调度器
        activeEffect = fn;
        // 执行副作用函数
        fn();
      }
  • 修改参数时,判断是否存在调度器,存在,执行当前挂载中调度器方法(在taigger函数中)
   function trigger(target, key) {
        // 根据target从桶中取得depsMap,它是key --> effects
        const depsMap = bucket.get(target);
        if (!depsMap) return;
        // 根据key取得当前对应的副作用函数
        const effects = depsMap.get(key);
        // 执行副作用函数
        effects && effects.forEach((fn) => {
        // fn()
            if (fn.options.scheduler) {    // 新增
              fn.options.scheduler(fn);
            } else {
              // 否则直接执行副作用函数(之前的默认行为)
              fn();
            }
          });
      }
  • 使用 setTimeout 开启一个宏任务来执行副作用函数 fn,这样,就能改变执行顺序,拿到我们想要的执行结果
 function effect(fn, options = {}) {
        fn.options = options; // 新增
        activeEffect = fn;
        // 执行副作用函数
        fn();
      }
      effect(
        () => {
          console.log(obj.foo);
        },
        // options
        {
          // 调度器 scheduler 是一个函数
          scheduler(fn) {
            // 修改参数,将副作用函数放在宏任务队列中执行
            setTimeout(fn)
          },
        }
      );

完整代码:

 const data = { foo: 1 };
      // 用一个全局变量存储被注册的副作用函数
      let activeEffect;
      // 创建一个新桶来存储副作用函数,包含key和value
      const bucket = new WeakMap();
      const obj = new Proxy(data, {
        get(target, key) {
          // target:当前对象,key:触发监听的key
          track(target, key);
          return target[key];
        },

        set(target, key, newVal) {
          target[key] = newVal;
          trigger(target, key);
        },
      });

      // track函数
      function track(target, key) {
        // 没有正在执行的副作用函数 直接返回
        if (!activeEffect) return target[key];
        // 从这个桶中取出一个Map类型(key -> value)
        let depsMap = bucket.get(target);
        // 不存在,则创建一个Map与target关联
        if (!depsMap) {
          bucket.set(target, (depsMap = new Map()));
        }
        // 根据key判断每个key上是否存在对应的副作用函数
        let deps = depsMap.get(key);
        // 不存在,则新建一个new Set,并与key关联
        if (!deps) {
          depsMap.set(key, (deps = new Set()));
        }
        // 最后将当前激活的副作用函数添加到桶中
        deps.add(activeEffect);
      }

      // trigger函数
      function trigger(target, key) {
        // 根据target从桶中取得depsMap,它是key --> effects
        const depsMap = bucket.get(target);
        if (!depsMap) return;
        // 根据key取得当前对应的副作用函数
        const effects = depsMap.get(key);
        // 执行副作用函数
        effects &&
          effects.forEach((fn) => {
            if (fn.options.scheduler) {
              fn.options.scheduler(fn);
            } else {
              // 否则直接执行副作用函数(之前的默认行为)
              fn();
            }
          });
      }

      // effect 函数用于注册副作用函数
      function effect(fn, options = {}) {
        fn.options = options; // 新增
        activeEffect = fn;
        // 执行副作用函数
        fn();
      }
      effect(
        () => {
          console.log(obj.foo);
        },
        // options
        {
          // 调度器 scheduler 是一个函数
          scheduler(fn) {
            // 修改参数,将副作用函数放在宏任务队列中执行
            setTimeout(fn);
          },
        }
      );
      obj.foo++;
      console.log("结束了");

除了控制副作用函数的执行顺序,通过调度器还可以做到控制它的执行次数

  • 正常的打印结果应该是1,2,3,但是我们只关心执行的最后结果,应该拿到的是1,3,执行三次有些多余,这时,就需要使用到调度器来修改执行次数
const data = { foo: 1 }
const obj = new Proxy(data, { /* ... */ })    // 上文中的响应式
 effect(() => {
 console.log(obj.foo)
 })
 obj.foo++
 obj.foo++;
  • 实现不包含过渡阶段,使用调度器基于promise,可以直接修改当前当前调度函数
    // 定义一个任务队列,使用它自动去重能力
      const jobQueue = new Set();
      // 使用 Promise.resolve() 创建一个 promise 实例,我们用它将一个任务添加到微任务队列
      const p = Promise.resolve();
      // 一个标志代表是否正在刷新队列
      let isFlushing = false;
      function flushJob() {
        // 如果队列正在刷新,则什么都不做
        if (isFlushing) return;
        // 设置为 true,代表正在刷新
        isFlushing = true;
        // 在微任务队列中刷新 jobQueue 队列
        p.then(() => {
          jobQueue.forEach((job) => job());
        }).finally(() => {
          // 结束后重置 isFlushing
          isFlushing = false;
        });
      }
  • 执行调度函数
   effect(
        () => {
          console.log(obj.foo);
        },
        // options
        {
          // 调度器 scheduler 是一个函数
          scheduler(fn) {
            jobQueue.add(fn);
            // 调用 flushJob 刷新队列
            flushJob();
          },
        }
      );
      obj.foo++;
      obj.foo++;

在这里只是简单的认识下调度器是什么,有什么功能,怎么使用,而在vue3中的有一个更加完善的的调度器功能,但是思路与上文差不多。