effect的scheduler - 源码系列6

effect最后一节,scheduler!

目标 :带有schedule的effect

js 复制代码
// index.html
 import {
        reactive,
        effect,
      } from '../../../node_modules/@vue/reactivity/dist/reactivity.esm-browser.prod.js';
      // import { reactive, effect } from './reactivity.js';
      const obj = reactive({
        name: 'hua',
        age: 4,
      });

      // 这里默认执行
      const runner = effect(
        () => {
          console.log('effect', obj.name);
        },
        {
          scheduler: () => {
            console.log('scheduler');
          },
        }
      );
      // 修改的时候 只触发scheduler
      obj.name = 'dd';
      obj.name = 'dddd';

继续分析 effect

  • effect的第二个参数,选项参数,传入的scheduler是个函数
  • 首次依然执行fn,但是之后属性改变,执行的是scheduler

加scheduler:

ts 复制代码
// effect.ts
export function effect(fn,options) {
  const _effect = new ReactiveEffect(fn,options?.scheduler);
  // ...
}
class ReactiveEffect {
  constructor(private fn, public scheduler) {}
  // ...
}

属性改变,有scheduler执行scheduler,没有执行run

ts 复制代码
export function trigger(target, key) {
  // ...
  activeEffect !== effect && (effect.scheduler ? effect.scheduler() : effect.run());
}

换回自己的,就可以了

总结

effect 首先是个函数 => 每次执行,清除依赖 => 可以手动调用和停止 => 有scheduler直接执行scheduler

相关推荐
LaoZhangAI27 分钟前
Claude MCP模型上下文协议详解:AI与外部世界交互的革命性突破【2025最新指南】
前端
LaoZhangAI27 分钟前
2025最全Cursor MCP实用指南:15个高效工具彻底提升AI编程体验【实战攻略】
前端
Kagerou1 小时前
vue3基础知识(结合TypeScript)
前端
市民中心的蟋蟀1 小时前
第五章 使用Context和订阅来共享组件状态
前端·javascript·react.js
逆袭的小黄鸭1 小时前
JavaScript 闭包:强大特性背后的概念、应用与内存考量
前端·javascript·面试
carterwu1 小时前
各个大厂是怎么实现组件库和相应扩展的?基础组件、区块、页面
前端
Face1 小时前
promise 规范应用
前端
Mintopia1 小时前
Node.js 中 fs.readFile API 的使用详解
前端·javascript·node.js
Face1 小时前
事件循环
前端·javascript
ONE_Gua1 小时前
chromium魔改——navigator.webdriver 检测
前端·后端·爬虫