Vue3中computed详解
- [1. 核心特性](#1. 核心特性)
- [2. 基本用法](#2. 基本用法)
-
- [2.1 只读计算属性（最常用）](#2.1 只读计算属性（最常用）)
- [2.2 可写计算属性](#2.2 可写计算属性)
- [3. computed vs methods](#3. computed vs methods)
- [4. 进阶原理与优化 (Vue 3.4+)](#4. 进阶原理与优化 (Vue 3.4+))
- [5. 最佳实践与注意事项](#5. 最佳实践与注意事项)
- 6.总结
在 Vue 3 中，computed（计算属性）是处理响应式数据派生逻辑的核心 API。它主要用于根据现有的响应式数据自动计算出新的值，并具备缓存机制和依赖追踪能力。
1. 核心特性
- 响应式依赖追踪：
computed会自动追踪其内部使用的响应式数据（如ref或reactive）。只有当这些依赖发生变化时，计算属性才会重新求值。 - 缓存机制：这是
computed最大的优势。如果依赖的数据没有变化，多次访问计算属性会直接返回之前的缓存结果，而不会重复执行计算函数。这显著提升了性能，特别是在模板中多次使用同一计算属性时。 - 惰性求值 (Lazy Evaluation)：计算属性只有在被真正读取（访问
.value或在模板中使用）时才会进行计算。如果定义了但从未使用，它不会执行。 - 只读与可写：默认情况下，计算属性是只读的。如果需要支持双向绑定或手动赋值，可以通过提供
get和set方法来实现可写计算属性。
2. 基本用法
在使用前需从 vue 中导入 computed。推荐在 <script setup>语法中使用组合式 API。
2.1 只读计算属性（最常用）
传入一个 getter 函数，该函数返回计算后的值。
javascript
import { ref, computed } from 'vue'
const count = ref(1)
// 定义只读计算属性
const doubleCount = computed(() => {
return count.value * 2
})
// 在模板中直接使用 {{ doubleCount }}，无需 .value
// 在 JS 中访问需使用 doubleCount.value场景示例：
- 字符串拼接（如全名格式化）。
- 列表过滤或排序。
- 数值计算（如购物车总价）。
2.2 可写计算属性
当需要给计算属性赋值时，需传入一个包含 get 和 set 方法的对象。
- get()：获取值时触发，返回计算结果。
- set(newValue)：设置值时触发，接收新值，通常用于反向修改依赖的原始响应式数据。
javascript
import { ref, computed } from 'vue'
const firstName = ref('张')
const lastName = ref('三')
const fullName = computed({
get() {
return firstName.value + ' ' + lastName.value
},
set(newValue) {
// 将新值拆分并更新原始数据
const names = newValue.split(' ')
firstName.value = names || ''
lastName.value = names || ''
}
})
// 此时可以执行 fullName.value = '李 四'，firstName 和 lastName 会自动更新3. computed vs methods
虽然普通方法（methods）也能实现类似的功能，但两者有本质区别：
| 特性 | computed (计算属性) | methods (普通方法) |
|---|---|---|
| 缓存 | 有缓存。依赖不变时，多次访问只执行一次。 | 无缓存。每次调用都会重新执行函数体。 |
| 调用方式 | 像属性一样使用，模板中无需括号 {``{ myComputed }}。 |
像函数一样调用，模板中需加括号 {``{ myMethod() }}。 |
| 适用场景 | 依赖响应式数据的复杂计算、数据过滤、格式化。 | 事件处理、一次性操作、不依赖响应式数据的逻辑。 |
| 性能 | 高。避免不必要的重复计算。 | 较低。每次渲染或调用都执行。 |
示例对比：
如果在模板中引用了5次同一个计算逻辑：
- 使用
computed：若依赖未变，计算函数只执行 1次，后续4次直接取缓存。 - 使用
methods：计算函数会执行 5次。
4. 进阶原理与优化 (Vue 3.4+)
- 脏值检查优化：在 Vue 3.4 之前，只要依赖项变化，计算属性就会被标记为"脏"（dirty），下次访问时必然重新计算。Vue 3.4 引入了更精细的脏值级别（
_dirtylevel）。即使依赖项变化，如果计算后的新值与旧值相同（通过Object.is比较），它不会触发下游依赖（如视图渲染）的更新。这避免了因中间状态变化导致的昂贵计算和不必要的重渲染。 - 获取旧值：在 Vue 3.4+ 中，computed 的 getter 函数可以接收一个参数，代表上一次的计算结果。这在处理引用类型或需要基于前值判断时非常有用。
javascript
// Vue 3.4+ 写法示例
const alwaysSmall = computed((previousValue) => {
if (count.value <= 3) {
return count.value
}
// 如果 count > 3，保持返回上一次的有效值
return previousValue
})5. 最佳实践与注意事项
- 避免副作用：不要在
computed的 getter 函数中执行副作用操作（如发送 API 请求、修改 DOM、改变其他非依赖的状态）。因为计算属性可能被缓存，导致副作用不执行或执行时机不可控。副作用应使用watch或watchEffect。 - 确保依赖是响应式的：
computed只能追踪响应式数据（ref,reactive）。如果使用普通变量或非响应式对象属性，数据变化时计算属性不会更新。 - 保持纯粹：getter 函数应该是纯粹的，即给定相同的输入，始终返回相同的输出，且不产生外部影响。
- 异步操作：
computed必须是同步的。如果需要处理异步数据派生，请结合async/await与watch或使用专门的异步状态管理库。 - 不要滥用：对于简单的表达式（如
{``{ firstName + ' ' + lastName }}），直接在模板中编写即可，无需额外创建计算属性，除非逻辑复杂或需要复用。
6.总结
computed 是 Vue 3 中处理数据派生的首选工具。它通过缓存和依赖追踪机制，确保了应用的高效性和响应性。在处理列表过滤、数据格式化、多状态组合等场景时，应优先使用 computed；而在处理用户交互事件或副作用时，则应选择 methods 或 watch。