watchEffect的简易版 - 源码系列8

写 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();
}

换回自己的,就可以了!

相关推荐
百思可瑞教育几秒前
Vue.config.js中的Webpack配置、优化及多页面应用开发
前端·javascript·vue.js·webpack·uni-app·北京百思教育
患得患失9493 分钟前
【前端】【高德地图WebJs】【知识体系搭建】面要素知识点——>多边形,圆形, 矩形,图形编辑器
前端·编辑器·高德地图·amap
歪歪1005 分钟前
webpack 配置文件中 mode 有哪些模式?
开发语言·前端·javascript·webpack·前端框架·node.js
歪歪10010 分钟前
如何配置Webpack以实现按需加载模块?
开发语言·前端·webpack·node.js
面向星辰3 小时前
html各种常用标签
前端·javascript·html
梦6503 小时前
HTML新属性
前端
东风西巷5 小时前
PDFgear:免费全能的PDF处理工具
前端·pdf·软件需求
森之鸟6 小时前
Mac电脑上如何打印出字体图标
前端·javascript·macos
mCell6 小时前
GSAP 入门指南
前端·javascript·动效
gnip6 小时前
组件循环引用依赖问题处理
前端·javascript