Vue的计算属性

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: {// getterget() {return this.firstName + ' ' + this.lastName;},// setterset(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）。