文章目录
vue2中 computed 计算属性
在 Vue 2 中，computed 计算属性是组件中非常重要的一部分，它允许我们基于现有数据派生出新的数据，并且具有缓存机制，能够提高应用的性能和响应速度。本文将详细介绍 computed 计算属性的用法、特点以及实际应用案例。
1. 什么是计算属性？
计算属性是基于其依赖的响应式数据生成的动态值。它们会根据依赖的数据自动更新，并且具有缓存机制，只有在依赖的数据发生变化时才会重新计算。计算属性在模板中可以像普通数据一样使用，但它们的值是通过函数计算得来的。
2. 基本用法
1. 定义计算属性
计算属性通常定义在 Vue 实例的 computed 选项中。以下是一个简单的例子：
<div id="app">
<p>原始值：{
{
number }}</p>
<p>计算属性（平方）：{
{
squaredNumber }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
number: 5
},
computed: {
squaredNumber() {
return this.number * this.number;
}
}
});
</script>
在这个例子中，squaredNumber 是一个计算属性，它依赖于 number 数据。当 number 发生变化时，squaredNumber 会自动更新。
2. 计算属性的缓存特性
计算属性具有缓存机制，只有在依赖的数据发生变化时才会重新计算。这意味着如果依赖的数据没有变化，多次访问计算属性会返回缓存的值，而不会重新执行计算函数。这在性能上是非常高效的。
<div id="app">
<p>原始值：{
{
number }}</p>
<p>计算属性（平方）：{
{
squaredNumber }}</p>
<button @click="number++">增加</button>
</div>
<script>
new Vue({
el: '#app',
data: {
number: 5
},
computed: {
squaredNumber() {
console.log('计算属性被重新计算');
return this.number * this.number;
}
}
});
</script>
在这个例子中，每次点击按钮时，number 增加 1，squaredNumber 会重新计算并更新。但是，如果 number 没有变化，多次访问 squaredNumber 不会触发重新计算。
3. 计算属性的高级用法
1. 计算属性的 Getter 和 Setter 方法
计算属性不仅可以定义 getter 方法，还可以定义 setter 方法，实现双向绑定的自定义逻辑。
<div id="app">