watchEffect的简易版 - 源码系列8

颜酱2023-08-04 18:14

写 watchEffect了，这个真真算容易了！

目标 watchEffect

首先看下，目标 watchEffect 的功能：

js 复制代码

import {
  reactive,
  effect,
  watch,
  watchEffect,
} from '../../../node_modules/@vue/runtime-dom/dist/runtime-dom.esm-browser.js';
// import { reactive, effect,watch } from './reactivity.js';
const obj = reactive({
  name: 'hua',
  age: 4,
});
// 默认是异步，这边暂时只实现同步
watchEffect(
  () => {
    console.log(obj.name);
  },
  { flush: 'sync' }
);
obj.name = 'hua changed';

没有加配置的 watchEfect，默认是异步执行的，这里先将其设置为同步，异步之后再写。

分析 watchEffect

watchEffect 是一个函数，可以有 2 个参数
第一个参数，是回调函数
第二个参数，是配置项，暂时不管

最重点的是，这个和 effect 走起来基本一模一样啊！所以，嗯！

写 watchEffect

在reactivity/src/apiWatch下：

js 复制代码

export function watchEffect(cb) {
  const _effect = new ReactiveEffect(cb, null);
  _effect.run();
}

换回自己的，就可以了！