vue3中使用computed

在 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({
      // getter
      get() {
        return firstName.value + ' ' + lastName.value
      },
      // setter
      set(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

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