vue3调度器scheduler功能和用法详解

更新时间：2023年06月05日 10:02:27 作者：包子爱吃肉

调度器是vue3响应式系统中一个非常重要的特性，可调度性指的是当trigger 动作触发副作用函数重新执行时，有能力决定副作用函数执行的时机、次数以及方式，本文通过代码示例给大家介绍调度器是什么，有什么功能，怎么使用,感兴趣的同学可以借鉴阅读

调度器是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调度器scheduler功能和用法详解的文章就介绍到这了,更多相关vue3调度器scheduler内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue命令式组件的编写与应用小结
这篇文章主要介绍了Vue命令式组件的编写与应用小结,在这篇文章中,我会带你了解命令式组件的基本概念,并通过一些简单的示例来展示它们是如何工作的,需要的朋友可以参考下
2024-03-03
vue实现顶部菜单栏
这篇文章主要为大家详细介绍了vue实现顶部菜单栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
详解vue中属性执行顺序
这篇文章主要介绍了vue中属性执行顺序,选项的执行顺序是 props -> data -> computed -> watch -> created -> mounted -> methods，具体详细内容本文给大家讲解的非常详细，需要的朋友可以参考下
2023-09-09
详解如何添加babel polyfill
这篇文章主要介绍了详解vue如何添加babel polyfill实现方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
vue中this.$refs有值,但无法获取ref的值问题及解决
这篇文章主要介绍了vue中this.$refs有值,但无法获取ref的值问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
vue使用引用库中的方法附源码
当vue使用库中的getvalue方法时，需要调用相关方法，通过定义ref=“”，使用this.$refs.exampleEditor._setValue('')，具体示例代码参考下本文，对vue使用引用库中的方法，感兴趣的朋友一起看看吧
2021-07-07
vue+element-ui中form输入框无法输入问题的解决方法
很多初次接触element-ui的同学,在用到element form组件时可能会遇到input框无法输入文字的问题,下面这篇文章主要给大家介绍了关于vue+element-ui中form输入框无法输入问题的解决方法,需要的朋友可以参考下
2023-04-04
vue 怎么创建组件及组件使用方法
vue中的核心就是组件，组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码，下面通过本文重点给大家介绍vue 创建组件及组件使用方法，感兴趣的朋友一起看看吧
2017-07-07
vue实现放大缩小拖拽功能
这篇文章主要为大家详细介绍了vue实现放大缩小拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-05-05
vue-quill-editor的使用及个性化定制操作
这篇文章主要介绍了vue-quill-editor的使用及个性化定制操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08

vue3调度器scheduler功能和用法详解

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具