Vue计算属性（computed）的使用方法及使用场景总结
在Vue中，computed属性是基于它们的响应式依赖进行缓存的。只有当相关响应式依赖发生改变时，它们才会重新求值。这是Vue中一个非常强大的特性，它使得我们可以在模板中声明式地描述数据的转换，而不需要手动编写更新DOM的逻辑。
基本用法
computed属性在Vue组件的computed选项中定义，它们可以是getter函数，也可以同时包含getter和setter函数。通常，我们只需要getter函数来返回一些基于组件数据计算的值。
javascript复制代码
export default { | |
data() { | |
return { | |
firstName: 'John', | |
lastName: 'Doe' | |
} | |
}, | |
computed: { | |
// 只有一个getter的computed属性 | |
fullName() { | |
return this.firstName + ' ' + this.lastName; | |
}, | |
// 带有getter和setter的computed属性 | |
fullNameWithCaps: { | |
// getter | |
get() { | |
return this.fullName.toUpperCase(); | |
}, | |
// setter | |
set(newValue) { | |
const names = newValue.split(' '); | |
this.firstName = names[0]; | |
this.lastName = names[names.length - 1]; | |
} | |
} | |
} | |
} |
特点
-
缓存性：计算属性是基于它们的响应式依赖进行缓存的。只要依赖没有改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。
-
响应性：当计算属性依赖的响应式数据发生变化时，计算属性会重新计算，并触发视图更新。
-
声明式：计算属性让我们能够以声明式的方式描述数据的转换逻辑，这有助于我们编写更清晰、更易于维护的代码。
注意事项
-
虽然计算属性在大多数情况下都很有用，但也要注意不要滥用它们。对于任何复杂逻辑，尤其是那些包含异步操作或大量计算的，都应该考虑使用methods或watch。
-
计算属性默认只有getter，但在需要时也可以提供一个setter。这对于需要基于用户输入或其他操作来更新状态的情况很有用。
-
当需要在模板中多次引用同一个计算属性时，由于计算属性的缓存特性，它们将比methods更高效，因为methods在每次调用时都会重新执行函数。
Vue的computed属性是构建响应式应用程序的重要工具之一，它们让我们能够以声明式的方式处理数据转换和依赖关系，从而简化代码并提高性能。