VUE3的computed()使用场景

接受一个 getter 函数，返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。

• 1.底层解析：类型

  // 只读
  function computed<T>(getter: (oldValue: T | undefined) => T,// 查看下方的 "计算属性调试" 链接debuggerOptions?: DebuggerOptions
  ): Readonly<Ref<Readonly<T>>>// 可写的
  function computed<T>(options: {get: (oldValue: T | undefined) => Tset: (value: T) => void},debuggerOptions?: DebuggerOptions
  ): Ref<T>

• 2.创建一个只读的计算属性 ref：

   

  const count = ref(1)
  const plusOne = computed(() => count.value + 1)console.log(plusOne.value) // 2plusOne.value++ // 错误

  3.创建一个可写的计算属性 ref：

  const count = ref(1)
  const plusOne = computed({get: () => count.value + 1,set: (val) => {count.value = val - 1}
  })plusOne.value = 1
  console.log(count.value) // 0

  4.调试：

  const plusOne = computed(() => count.value + 1, {onTrack(e) {debugger},onTrigger(e) {debugger}
  })