Vue3源码笔记-响应式 02.简单实现watch

• 分类: vue 源码

以下，均从最简单的一个{num:0}对象开始，针对其实现响应式；

一. 简单实现计算属性

取 vue 单侧案例 1should return updated value, 设定如下的场景：

1. 单击 add 按钮后，触发 trigger 更新 num 值

2. 打印percentValue.value值时， 触发匿名函数执行；

<button onclick="add()">add</button>
<div id="value"></div>
<script>
  // 1.获取响应式对象
  const counter = reactive({ num: 0 });
  // 2.获取计算属性
  const percentValue = computed(() => `${counter.num}%`);
  // 3.触发
  let i = 1;
  window.add = () => {
    counter.num = i++;
    console.log(percentValue.value);
  };
</script>

对于源码摘录了主要的部分，实现如上功能，追加如下 computed 代码；

import { ReactiveEffect } from "./effect.js";

export class ComputedRefImpl {
  effect;
  constructor(getter) {
    this.effect = new ReactiveEffect(getter);
  }

  get value() {
    return this.effect.run();
  }
}

export function computed(getter) {
  const cRef = new ComputedRefImpl(getter);

  return cRef;
}

在线演示

See the Pen vue-reactivity-v2 by 唐鸽 (@tggcs) on CodePen.