vue3.0中的computed怎么写
更新时间：2023-09-11
在Vue 3.0中，computed属性的写法有一些变化，主要是为了更加简洁和直观地定义计算属性。本文将介绍Vue 3.0中如何使用computed，以及与Vue 2.x版本中的computed的一些区别。
首先，我们先来了解一下Vue 3.0中computed的基本用法。在Vue 3.0中，我们可以使用`ref`和`computed`函数来定义计算属性。与Vue 2.x不同的是，Vue 3.0中的计算属性不再是一个普通的javascript对象，而是通过函数调用返回一个`ref`对象。
具体使用方式如下：
基本用法
import { ref, computed } from 'vue'
export default {
setup() {
const count = ref(0) // 创建一个响应式的变量 count
const doubleCount = computed(() => count.value * 2) // 创建计算属性 doubleCount
return {
count,
doubleCount
}
}
}
上面的示例中，我们先通过`ref`函数创建了一个响应式变量`count`，然后在`computed`函数中定义了一个计算属性`doubleCount`，这个计算属性根据`count`的值进行计算，将`count * 2`的结果返回。最后我们在`setup`函数中返回了`count`和`doubleCount`，这样我们就可以在视图中使用这两个计算属性了。
在Vue 3.0中，计算属性的依赖关系是由Vue自动进行追踪的，我们不需要像Vue 2.x那样手动指定`computed`的依赖项。
计算属性的setter
在一些情况下，我们可能需要为计算属性提供setter方法，用于处理计算属性的更新。在Vue 3.0中，我们可以通过将计算属性的getter和setter都传递给`computed`函数来实现这一点。 下面是一个使用计算属性setter的示例：
import { ref, computed } from 'vue'
export default {
setup() {
const count = ref(0) // 创建一个响应式的变量 count
const doubleCount = computed({
get: () => count.value * 2,
set: (value) => {
count.value = value / 2
}
}) // 创建计算属性 doubleCount
return {
count,
doubleCount
}
}
}
上面的示例中，我们在`computed`函数中传入一个对象，对象中包含了`get`和`set`方法。`get`方法用于计算计算属性的值，而`set`方法则用于处理计算属性的更新。在`set`方法中，我们更新了`count`的值，将新的值除以2作为计算属性的值。
使用计算属性setter时，我们可以像操作普通的响应式变量一样，直接修改计算属性的值。Vue会自动调用setter方法，并更新计算属性的值。
