vue computed用法

在 Vue 中，`computed`（计算属性）是一种非常强大的功能，用于**声明式地描述依赖于其他数据的值**。它会基于其响应式依赖进行缓存，只有当依赖发生变化时才会重新计算。 --- ## ✅ 基本用法 ### 示例 1：基础计算属性 —— 拼接字符串 ```vue <template> <div>Full Name: {{ fullName }}</div> </template> <script> export default { data() { return { firstName: 'John', lastName: 'Doe' }; }, computed: { fullName() { return this.firstName + ' ' + this.lastName; } } }; </script> ``` > 当 `firstName` 或 `lastName` 发生变化时，`fullName` 会自动更新。 --- ### 示例 2：带逻辑处理的计算属性 —— 过滤列表 ```vue <template> <ul> <li v-for="item in filteredItems" :key="item.id"> {{ item.name }} </li> </ul> </template> <script> export default { data() { return { items: [ { id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }, { id: 3, name: 'Cherry' } ], filterText: 'a' }; }, computed: { filteredItems() { return this.items.filter(item => item.name.toLowerCase().includes(this.filterText.toLowerCase()) ); } } }; </script> ``` > 计算属性返回一个过滤后的数组，模板中可以像普通属性一样使用它。 --- ## ✅ 计算属性 vs 方法（methods） | 特性 | computed | methods | |------|----------|---------| | 是否缓存 | ✅ 是（依赖未变不会重复执行） | ❌ 否（每次调用都会执行） | | 使用方式 | 属性形式 `{{ computedProp }}` | 函数调用 `{{ method() }}` | | 推荐场景 | 基于已有数据派生出新数据 | 需要传参或不依赖响应式数据 | --- ## ✅ 带 setter 的计算属性（高级用法） 你可以为计算属性提供 `get` 和 `set`，实现双向绑定。 ### 示例： ```vue <template> <div> First Name: <input v-model="firstName"><br> Last Name: <input v-model="lastName"><br> Full Name: <input v-model="fullName"> </div> </template> <script> export default { data() { return { firstName: 'John', lastName: 'Doe' }; }, computed: { fullName: { get() { return this.firstName + ' ' + this.lastName; }, set(newValue) { const names = newValue.split(' '); this.firstName = names[0]; this.lastName = names[1]; } } } }; </script> ``` > 当你在输入框修改 `fullName` 时，会自动拆分并更新 `firstName` 和 `lastName`。 --- ## ✅ 在组件中使用计算属性 你可以在组件内部定义自己的计算属性，它们只能访问当前组件的数据和 props。 ### 示例：组件内使用 computed ```vue <!-- ChildComponent.vue --> <template> <div> <p>Prop Value: {{ propValue }}</p> <p>Formatted Prop: {{ formattedProp }}</p> </div> </template> <script> export default { props: ['value'], computed: { formattedProp() { return this.value.toUpperCase(); } } }; </script> ``` --- ## ✅ 总结对比 | 功能 | computed | methods | watch | |------|----------|---------|-------| | 缓存机制 | ✅ 有缓存 | ❌ 无缓存 | ❌ 无缓存 | | 支持异步 | ❌ 不推荐 | ✅ 可以 | ✅ 可以 | | 适合场景 | 数据派生、组合多个响应式数据 | 事件处理、复杂逻辑、非响应式操作 | 监听数据变化并执行副作用 | ---

在Vue中，计算属性（Computed）是一种能够基于现有的属性计算出新属性值的属性。计算属性在模板中使用时，就像是普通属性一样使用，但是其值是根据其他属性计算出来的。 下面是Computed的使用方法： 1. 在Vue的实例中定义计算属性： ``` new Vue({ data: { message: 'Hello World' }, computed: { reversedMessage: function () { return this.message.split('').reverse().join('') } } }) ``` 2. 在模板中使用计算属性： ``` <div> Message: {{ message }} </div> <div> Reversed Message: {{ reversedMessage }} </div> ``` 在上面的例子中，我们定义了一个名为reversedMessage的计算属性，其值是根据message属性计算出来的。在模板中，我们就可以像使用普通属性一样使用reversedMessage属性了。 需要注意的是，计算属性有缓存机制，只有当计算属性依赖的属性发生变化时，才会重新计算计算属性的值。这也就意味着，当我们多次访问同一个计算属性时，计算属性只会计算一次，后续访问会直接返回缓存的值。