Vue3 computed函数详解

computed 接收一个 getter 函数，并通过一个由 getter 函数返回的值，创建一个不可变更的响应式 ref 对象。

代码是最好的解释:

<script>
  import { createComponent, ref, computed } from '@vue/composition-api'
  export default createComponent({
    setup() {
      const count = ref(1)
      const plusOne = computed(() => count.value + 1)

      console.log(plusOne.value) // 2

      // 当count的值被变更，plusOne被触发重新计算并返回新的值。
      count.value = 8

      console.log(plusOne.value) // 9

      // 但 plusOne 不可变更。
      plusOne.value++ // 错误
    }
  })
</script>

另外，根据需要你也可以同时提供 get 和 set 函数来创建一个可写的 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