Vue3 计算属性
关键要点
- Vue3 计算属性（Computed Properties）是基于响应式数据的派生值，仅在依赖变化时重新计算。
- 使用
computedAPI 定义，适合处理复杂逻辑，保持模板简洁。 - 相比方法，计算属性有缓存机制，性能更优。
直接回答
Vue3 的计算属性是基于响应式数据的动态计算结果，依赖项不变时会缓存值，避免重复计算。以下是核心内容：
- 定义：使用
computed函数（如computed(() => fullName.value)）或 Options API 的computed选项。 - 用法：在模板中像普通属性一样使用，如
{{ fullName }}。 - 特点：仅在依赖的响应式数据（如
ref或reactive）变化时重新计算，性能优于方法调用。
示例（Composition API）：
import { ref, computed } from 'vue';
const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed(() => `${firstName.value} ${lastName.value}`);示例（Options API）：
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
};
},
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`;
}
}
};更多详情见 Vue.js 官方文档 – 计算属性。
详细报告
Vue3 的计算属性是框架中用于处理复杂逻辑和派生数据的核心特性。它通过响应式依赖自动追踪变化，仅在必要时重新计算结果，优化性能并简化模板代码。以下是详细讲解，涵盖定义、用法、与方法的对比、最佳实践等。
1. 什么是计算属性？
- 定义：计算属性是基于响应式数据的派生属性，其值由函数计算得出，依赖的响应式数据变化时自动更新。
- 作用：用于处理复杂逻辑（如字符串拼接、数据过滤），避免在模板中写入过多逻辑，保持模板简洁。
- 工作原理：Vue3 使用
Proxy实现的响应式系统，自动追踪计算属性的依赖（如ref或reactive），仅在依赖变化时重新计算。相比 Vue2，Vue3 的响应式性能提升 20-50%。
2. 定义计算属性
Vue3 支持两种 API 风格定义计算属性：Composition API 和 Options API。
- Composition API：
使用computed函数，需从vue导入。计算属性是一个只读的Ref对象（或可写的，需显式定义）。示例：
import { ref, computed } from 'vue';
export default {
setup() {
const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed(() => `${firstName.value} ${lastName.value}`);
return { firstName, lastName, fullName };
}
};<script setup>简化写法：<script setup> import { ref, computed } from 'vue'; const firstName = ref('John'); const lastName = ref('Doe'); const fullName = computed(() => `${firstName.value} ${lastName.value}`); </script>- Options API：
在computed选项中定义，函数名即为计算属性名。示例：
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
};
},
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`;
}
}
};- 可写计算属性（Composition API）：
计算属性默认只读，但可以通过提供get和set方法实现双向绑定。示例：
import { ref, computed } from 'vue';
const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed({
get: () => `${firstName.value} ${lastName.value}`,
set: (newValue) => {
const [first, last] = newValue.split(' ');
firstName.value = first;
lastName.value = last;
}
});使用：
<input v-model="fullName" />3. 计算属性 vs 方法
计算属性和方法都可以实现动态计算，但有以下区别：
| 特性 | 计算属性 | 方法 |
|---|---|---|
| 定义方式 | computed(() => ...) 或 computed: { ... } | methods: { ... } 或函数 |
| 缓存机制 | 有缓存，仅依赖变化时重新计算 | 无缓存，每次调用都重新计算 |
| 性能 | 适合复杂逻辑，重复访问性能高 | 适合简单逻辑或需动态参数的场景 |
| 使用场景 | 派生数据，如拼接字符串、过滤列表 | 事件处理或需传递参数的计算 |
| 示例 | computed(() => price.value * quantity.value) | methods: { total(price, quantity) { return price * quantity; } } |
示例对比：
export default {
data() {
return { price: 10, quantity: 5 };
},
computed: {
total() {
console.log('计算总价');
return this.price * this.quantity;
}
},
methods: {
getTotal() {
console.log('计算总价');
return this.price * this.quantity;
}
}
};模板：
<div>{{ total }}</div> <!-- 只打印一次，除非 price 或 quantity 变化 -->
<div>{{ getTotal() }}</div> <!-- 每次渲染都打印 -->结论：计算属性适合性能敏感场景，方法适合动态计算或事件处理。
4. 使用场景
- 字符串处理：拼接姓名、格式化日期等。
const fullName = computed(() => `${firstName.value} ${lastName.value}`);- 数据过滤：根据条件过滤列表。
const filteredItems = computed(() => items.value.filter(item => item.active));- 动态样式：根据状态计算类或样式。
const statusClass = computed(() => status.value === 'error' ? 'text-red' : 'text-green');- 表单验证：计算表单是否有效。
const isFormValid = computed(() => username.value && email.value.includes('@'));5. 最佳实践
- 保持简单：计算属性应专注于计算逻辑，避免副作用（如异步请求或 DOM 操作）。
- 响应式依赖：确保计算属性依赖的是响应式数据（如
ref或reactive），否则不会触发更新。 - 避免复杂逻辑：如果逻辑过于复杂，考虑拆分为多个计算属性或使用组合函数。
- 优先使用计算属性：相比在模板中写复杂表达式，计算属性更可读且有缓存。
- 调试技巧：在开发模式下，Vue3 会记录计算属性的依赖，方便调试。
6. 注意事项
- 只读性：默认计算属性是只读的，修改会触发警告；需用
get/set实现可写。 - 避免循环依赖：确保计算属性不相互依赖形成死循环。
- 性能优化：对于大型列表或复杂计算，结合
v-memo（Vue 3.2+）优化渲染性能。
7. 学习资源
以下是学习 Vue3 计算属性的推荐资源：
8. 总结
Vue3 的计算属性是处理派生数据的高效工具，凭借缓存机制和响应式系统，适合复杂逻辑和性能敏感场景。Composition API 提供更灵活的定义方式，推荐与 <script setup> 结合使用。通过掌握计算属性，开发者可以编写更简洁、可维护的代码。