水土保持与生态建设网站b站视频推广网站

在 Vue 3 中，computed 是一个非常重要的响应式 API，用于声明依赖于其他响应式状态的派生状态。以下是 computed 的详细用法：

1. 基本用法

import { ref, computed } from 'vue'export default {setup() {const firstName = ref('张')const lastName = ref('三')const fullName = computed(() => {return firstName.value + ' ' + lastName.value})return {firstName,lastName,fullName}}
}

2.可写的计算属性

计算属性默认是只读的，但你可以通过提供 get 和 set 函数来创建一个可写的计算属性。

import { ref, computed } from 'vue'export default {setup() {const firstName = ref('张')const lastName = ref('三')const fullName = computed({// getterget() {return firstName.value + ' ' + lastName.value},// setterset(newValue) {[firstName.value, lastName.value] = newValue.split(' ')}})return {firstName,lastName,fullName}}
}

3.计算属性缓存

计算属性会基于它们的响应式依赖进行缓存。只有在相关响应式依赖发生改变时才会重新求值。

const now = computed(() => Date.now())
// 这个计算属性永远不会更新，因为 Date.now() 不是响应式依赖

计算属性和方法的区别：计算属性是基于它们的依赖进行缓存的，而方法总是会在重新渲染时再次执行函数。

// 方法 - 每次访问都会执行
function getFullName() {return firstName.value + ' ' + lastName.value
}// 计算属性 - 只有依赖变化时才会重新计算
const fullName = computed(() => {return firstName.value + ' ' + lastName.value
})

4.最佳实践

避免副作用：计算属性的计算函数应只做计算而不产生副作用（如异步请求或更改 DOM)

避免直接修改计算属性：除非你明确提供了 setter

简化模板：将复杂逻辑移到计算属性中，保持模板简洁