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

相关推荐
会发光的猪。19 分钟前
【 ElementUI 组件Steps 步骤条使用新手详细教程】
前端·javascript·vue.js·elementui·前端框架
我家媳妇儿萌哒哒20 分钟前
el-table合并单元格之后,再进行隔行换色的且覆盖表格行鼠标移入的背景色的实现
前端·javascript·elementui
baiduguoyun35 分钟前
react的import 导入语句中的特殊符号
前端·react.js
前端青山36 分钟前
webpack指南
开发语言·前端·javascript·webpack·前端框架
NiNg_1_2341 小时前
ECharts实现数据可视化入门详解
前端·信息可视化·echarts
程序媛小果1 小时前
基于java+SpringBoot+Vue的桂林旅游景点导游平台设计与实现
java·vue.js·spring boot
励志前端小黑哥2 小时前
有了Miniconda,再也不用担心nodejs、python、go的版本问题了
前端·python
喵叔哟2 小时前
重构代码之取消临时字段
java·前端·重构
还是大剑师兰特2 小时前
D3的竞品有哪些,D3的优势,D3和echarts的对比
前端·javascript·echarts
王解2 小时前
【深度解析】CSS工程化全攻略(1)
前端·css