1、概念
计算属性（Computed Properties） 是一种用于声明式地处理数据依赖和缓存的特性。它们是基于它们的响应式依赖进行缓存的，只有当依赖的数据发生变化时，计算属性才会重新计算。是在内存中运行
通俗理解：就是完成计算，存在属性中缓存起来，当需要计算的值不变时，这个值就不会变，不会重新计算，减少开销。
2、基本用法
在 computed 选项中定义
new Vue({
el: '#app',
data: {
firstName: 'zhang',
lastName: 'san'
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
}
});在模板中可以直接像普通属性一样使用fullName：
<div id="app">
{{ fullName }} <!-- 输出：zhang san -->
</div>3、计算属性的特点
1、 缓存机制
计算属性是基于它们的依赖进行缓存的。只有当依赖的响应式数据（如 data 中的属性）发生变化时，计算属性才会重新计算。如果依赖没有变化，多次访问计算属性会立即返回之前的计算结果，不会重新执行计算函数。
2、对比methods定义的区别：
1、如果把同样的逻辑写在 methods 中，每次重新渲染时，该方法都会被重新调用执行，哪怕依赖没变。
2、在computed 中定义返回的是属性，在methods中定义的是方法
methods: {
getFullName() {
return this.firstName + ' ' + this.lastName;
}
}
<!-- 在模板中调用：{{ getFullName() }}，每次渲染都会执行这个函数 -->3、响应式依赖
计算属性的函数中只能访问响应式的数据（比如 data、props、其他计算属性等），Vue 会自动追踪这些依赖，并在它们改变时更新计算属性。
4、必须返回一个值
计算属性的函数必须返回一个值，这个值就是计算属性的最终值。
4、计算属性的 Setter（可读写）
在默认情况下，计算属性是只读的，但也可以提供一个 setter，使其可写；当用户修改输入框内容时，会触发 set 方法，从而更新 firstName 和 lastName。
computed: {
fullName: {
// getter
get() {
return this.firstName + ' ' + this.lastName;
},
// setter
set(newValue) {
const names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}在模板或代码中使用方式：
<input v-model="fullName" />5、计算属性 vs 方法 vs 侦听器
| 特性 | 计算属性 (Computed) | 方法 (Methods) | 侦听器 (Watchers) |
|---|---|---|---|
| 缓存 | ✅ 有缓存，依赖不变则不重新计算 | 每次调用都会执行 | ❌无缓存，监听到变化就会触发回调 |
| 用途 | 用于根据依赖数据计算出一个新值 | 用于封装可复用逻辑，主动调用 | 用于监听某个数据变化并执行异步或复杂操作 |
| 是否支持 setter | ✅ 支持（对象形式定义时） | ❌ 不适用 | ❌ 不适用 |
| 语法简洁性 | 更简洁，适合模板中直接使用 | 需要手动调用函数 | 配置稍复杂 |
6、示例
new Vue({
el: '#app',
data: {
searchText: '',
items: ['China', 'US', 'UK', 'Japan']
},
computed: {
filteredItems() {
return this.items.filter(item =>
item.toLowerCase().includes(this.searchText.toLowerCase())
);
}
}
});<input v-model="searchText" placeholder="Search country" />
<ul>
<li v-for="item in filteredItems" :key="item">{{ item }}</li>
</ul>这里 filteredItems 是根据 searchText 和 items 动态计算出来的，且有缓存优化。
7、总结
- 计算属性适合用于根据现有数据派生出新的数据，特别是需要缓存、高效更新的场景。
- 它是基于响应式依赖进行缓存的，只有依赖改变时才重新计算。
- 可以定义成函数形式（只有 getter），也可以定义为对象形式（包含 getter 和 setter）。