计算属性是Vue.js中非常强大的功能，它可以帮助我们轻松地处理数据计算和管理数据。
先说个段子：有一天，一个新手问一个Vue大师，“大师，我的数据计算和管理怎么那么麻烦？”，大师回答：“你还没学会使用计算属性吧？”，新手：“那是什么鬼？”，大师笑着说：“这是一个神器，它可以让你像魔法师一样轻松处理数据计算和管理。”
好了，闲话少说，让我们来实际操作一下。首先，计算属性是通过对象中的getter函数来实现的。这些getter函数可以接收参数，访问作用域数据，甚至可以包含Vue实例中的方法。
例如，如果我们有一个数据列表，我们想要计算它们的总和，可以使用计算属性：
<template>
<div>
<ul>
<li v-for="item in list" :key="item.id">{{ item.name }} - {{ item.value }}</li>
</ul>
<p>Total: {{ total }}</p>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ id: 1, name: 'Apple', value: 10 },
{ id: 2, name: 'Banana', value: 5 },
{ id: 3, name: 'Orange', value: 3 }
]
};
},
computed: {
total() {
return this.list.reduce((total, item) => total + item.value, 0);
}
}
};
</script>
在上面的代码中，我们定义了一个计算属性total，它通过list中的每个元素的value属性来计算总和。在模板中，我们只需要使用{
{ total }}就可以显示总和了。
除了计算属性，Vue还提供了许多其他有用的工具来帮助我们管理数据。例如，Vue提供了一个watch属性，它可以监听数据变化并执行相应的操作。
例如，我们可以在组件的watch选项中监听list的变化并重新计算total属性：
<script>
export default {
data() {
return {
list: [
{ id: 1, name: 'Apple', value: 10 },
{ id: 2, name: 'Banana', value: 5 },
{ id: 3, name: 'Orange', value: 3 }
]
};
},
computed: {
total() {
return this.list.reduce((total, item) => total + item.value, 0);
}
},
watch: {
list() {
this.total = 0; // 强制重新计算total属性
}
}
};
</script>
在上面的代码中，我们在组件的watch选项中监听了list的变化。当list变化时，会执行watch选项中的回调函数。在这个例子中，我们将total属性强制设置为0，从而强制重新计算总和。这样可以确保在数据变化时总和总是正确的。
比如说，如果你需要在计算属性中使用其他计算属性或组件的数据，你可以通过this关键字来访问它们。
例如，假设我们有一个计算属性total，它计算了列表中所有物品的总价值。我们还想根据总价值计算一个折扣率，我们可以这样做：
<template>
<div>
<ul>
<li v-for="item in list" :key="item.id">{{ item.name }} - {{ item.value }}</li>
</ul>
<p>Total: {{ total }}</p>
<p>Discount: {{ discount }}</p>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ id: 1, name: 'Apple', value: 10 },
{ id: 2, name: 'Banana', value: 5 },
{ id: 3, name: 'Orange', value: 3 }
]
};
},
computed: {
total() {
return this.list.reduce((total, item) => total + item.value, 0);
},
discount() {
if (this.total < 50) {
return 0.1;
} else {
return 0.05;
}
}
}
};
</script>
在上面的代码中，我们定义了两个计算属性total和discount。在计算discount时，我们使用了total的值来计算折扣率。注意，在计算属性中，我们可以像这样使用this关键字来访问组件的数据和计算属性。