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

相关推荐
欧阳天风4 分钟前
链表运用到响应式中
javascript·数据结构·链表
Codebee9 分钟前
OneCode 移动套件多平台适配详细报告
前端·人工智能
你知唔知咩系timing啊12 分钟前
🎙️ 站在巨人肩膀上:基于 SenseVoice.cpp 的前端语音识别实践
前端
一位搞嵌入式的 genius12 分钟前
前端开发核心技术与工具全解析:从构建工具到实时通信
前端·笔记
littleplayer14 分钟前
Redux 中›ABC三个页面是如何通信的?
前端
安卓开发者14 分钟前
鸿蒙NEXT的Web组件网络安全与隐私保护实践
前端·web安全·harmonyos
程序员NEO23 分钟前
3分钟搞定Vue组件库
前端
程序员NEO27 分钟前
WebStorm代码一键美化
前端
前端农民工ws1 小时前
Vue 框架的 markdown 渲染组件,针对 AI 的 markdown 流式传输场景
前端·javascript·vue.js·ai
昔人'1 小时前
css 高度从 0 到 auto 的动画效果 `interpolate-size: allow-keywords`
前端·css