Vue 3 中的 Computed 和 watch

Vue 3 中的 Computed 和 watch

Computed

接受一个 getter 函数，并为从 getter 返回的值返回一个不变（响应式）ref 对象

// 只读写法
const count = ref(1);
const countCom = computed(() => count.value + 1);

console.log('count', count);  // RefImpl { ..., value: 1 }
console.log('count', countCom);  // ComputedRefImpl { ..., value: 2 }

countCom.value++;  // 错误行为，此时countCom只读

或者，它也可以具有 get 和 set 函数的对象来创建可写的 ref 对象。

// 可写写法
const count = ref(1);
const countCom = computed({
   
  get: () => count.value + 1,
  set: () => count.value - 1
})

countCom.value = 1

console.log(count); // RefImpl { ..., value: 0 }
console.log(countCom); // ComputedRefImpl { ..., value: 1 }

类型声明

interface DebuggerEvent {
   
  effect: ReactiveEffect;
  target: any;
  type: OperationTypes;
  key: string | symbol | undefined;
}

interface DebuggerOptions <