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

相关推荐
摸鱼仙人~几秒前
深入理解 classnames:React 动态类名管理的最佳实践
前端·react.js·前端框架
未来之窗软件服务3 分钟前
chrome webdrive异常处理-session not created falled opening key——仙盟创梦IDE
前端·人工智能·chrome·仙盟创梦ide·东方仙盟·数据调式
kymjs张涛3 分钟前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
玲小珑6 分钟前
Next.js 教程系列(十)getStaticPaths 与动态路由的静态生成
前端·next.js
天天鸭13 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
蓝婷儿17 分钟前
每天一个前端小知识 Day 23 - PWA 渐进式 Web 应用开发
前端
无奈何杨26 分钟前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
恋猫de小郭34 分钟前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter
江城开朗的豌豆38 分钟前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
程序员爱钓鱼1 小时前
Go语言泛型-泛型约束与实践
前端·后端·go