【学习】vue计算属性
前言
文章基于响应系统。如没有相关概念，建议看完在继续。
lazy
懒执行副作用函数。
/*** @description 副作用函数* @param {Function} fn* @param {{[key:string]:any}} options*/
const effect = (fn, options = {}) => {const effectFn = () => {cleanup(effectFn);activeEffect = effectFn;effectsStack.push(effectFn)const res = fn();effectsStack.pop()activeEffect = effectsStack[effectsStack.length - 1]return res}effectFn.options = options;effectFn.depSets = [];if (!options.lazy) {effectFn();}return effectFn
}
computed
当一个数据依赖多个响应数据进行计算使用计算属性。
/*** @description 计算属性* @param {()=>any} getter*/
const computed = (getter) => {// 缓存上一次计算的值let value;// 标记是否重新计算，为true则重新计算。let dirty = true;// 副作用函数const effectFn = effect(getter, {lazy: true, scheduler() {if (!dirty) {dirty = true;trigger(obj, "value")}}})const obj = {get value() {if (dirty) {value = effectFn();dirty = false;}track(obj, "value")return value;}}return obj;
}
Test
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>toy</title></head><body></body><script type="module">import { reactive, effect, computed } from "./reactive/index.js";const data = reactive({ foo: 1, bar: 4 });const sum = computed(() => data.foo + data.bar);effect(() => {console.log(sum.value);});data.foo++;data.foo++;data.bar++;console.log("结束了");</script>
</html>