vue3中computed的用法
时间: 2023-08-19 13:05:46 浏览: 52
在 Vue 3 中,`computed` 仍然是一个选项对象,但是使用方式和 Vue 2 有所不同。
在 Vue 3 中,可以通过 `computed` 函数创建计算属性。它接收一个函数作为参数,并返回一个响应式的 ref 对象。该函数中可以访问到响应式数据,并在数据发生变化时自动更新。这个 ref 对象可以像普通的 ref 对象一样使用。
下面是一个例子:
```js
import { computed, ref } from 'vue'
const count = ref(0)
const doubleCount = computed(() => {
return count.value * 2
})
```
在上面的代码中,我们使用 `computed` 函数创建了一个计算属性 `doubleCount`,它的值是 `count` 的两倍。当 `count` 的值发生变化时,`doubleCount` 的值也会自动更新。
在模板中使用 `computed` 计算属性和普通的计算属性使用方式相同:
```html
<template>
<div>
<p>count: {{ count }}</p>
<p>doubleCount: {{ doubleCount }}</p>
</div>
</template>
```
需要注意的是,在 Vue 3 中,`computed` 计算属性的返回值必须是一个 ref 对象,而不能是一个普通的值。
另外,Vue 3 中还引入了一个新的 `watchEffect` 函数,它可以用来监听响应式数据的变化,并执行一个副作用函数。`watchEffect` 函数会自动追踪副作用函数中使用的响应式数据,并在数据发生变化时自动重新执行副作用函数。如果副作用函数中使用了计算属性,也会自动追踪计算属性的依赖。
下面是一个使用 `watchEffect` 函数的例子:
```js
import { watchEffect, ref } from 'vue'
const count = ref(0)
watchEffect(() => {
console.log(`count: ${count.value}`)
})
```
在上面的代码中,我们使用 `watchEffect` 函数监听 `count` 的变化,并在控制台输出 `count` 的值。当 `count` 的值发生变化时,`watchEffect` 函数会自动重新执行,并输出新的值。
需要注意的是,`watchEffect` 函数只能用来监听响应式数据的变化,不能用来监听普通的数据。如果需要监听普通的数据,可以使用 `watch` 函数。