vue3 computed

Vue3中的computed函数是一个计算属性，它可以根据响应式数据的变化自动计算出新的值。computed函数的使用可以大大简化模板中的复杂计算逻辑，提高代码的可读性和可维护性。

computed函数的定义方式有两种，一种是使用对象形式，另一种是使用函数形式。对象形式的computed函数可以通过get和set方法来获取和设置计算属性的值，而函数形式的computed函数则可以直接返回计算属性的值。

下面是一个使用computed对象形式用法的例子：

import { computed, reactive } from 'vue'

const state = reactive({ count: 0 })

const doubleCount = computed({
  get() {
    return state.count * 2
  },
  set(value) {
    state.count = value / 2
  }
})

console.log(doubleCount.value) // 输出：0

doubleCount.value = 6

console.log(state.count) // 输出：3
console.log(doubleCount.value) // 输出：6

computed函数的使用场景非常广泛，例如过滤和排序、数组计算等。在过滤和排序中，我们可以使用computed函数来根据条件过滤和排序数据，而在数组计算中，我们可以使用computed函数来计算数组的平均值、最大值、最小值等。