VueJS - 计算属性：初学者指南

你好啊，未来的Vue.js超级巨星！今天，我们将踏上一段激动人心的旅程，探索Vue.js中的计算属性世界。别担心如果你是编程新手——我将作为你友好的向导，我们会一步步来。在这个教程结束时，你会对你学到的东西感到惊讶！

计算属性是什么？

想象一下你在烤蛋糕。你有原料（数据），你遵循一个食谱（逻辑）来创造一些美味的东西（计算属性）。在Vue.js中，计算属性就像是自动更新的神奇蛋糕食谱，当它们的原料改变时！

让我们从一个简单的例子开始：

<template>
<div>
<p>名字: {{ firstName }}</p>
<p>姓氏: {{ lastName }}</p>
<p>全名: {{ fullName }}</p>
</div>
</template>

<script>
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
}
}
</script>

在这个例子中，fullName是我们的计算属性。它就像一个聪明的食谱，将firstName和lastName组合起来给我们一个完整的名字。最好的部分是？无论firstName或lastName何时改变，fullName都会自动更新！

为什么使用计算属性？

1. 简洁性：它们使你的模板保持干净且易于阅读。
2. 性能：Vue缓存结果，只有在依赖项改变时才会重新计算。
3. 可靠性：当它们的依赖项改变时，它们会自动更新。

计算属性与方法

“但是等等，”你可能会说，“我们难道不能只使用方法吗？”这是个好问题！让我们来比较一下：

<template>
<div>
<p>计算属性: {{ reversedMessage }}</p>
<p>方法: {{ reverseMessage() }}</p>
</div>
</template>

<script>
export default {
data() {
return {
message: 'Hello, Vue!'
}
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
},
methods: {
reverseMessage() {
return this.message.split('').reverse().join('')
}
}
}
</script>

reversedMessage和reverseMessage()都做同样的事情。但是这里有个秘密调料：计算属性是被缓存的。如果message没有改变，reversedMessage不会重新计算。就像有一个超级高效的助手，记得之前的结果！

带有依赖项的计算属性

计算属性在依赖于多个数据项时非常出色。让我们看一个更复杂的例子：

<template>
<div>
<input v-model="searchQuery" placeholder="搜索待办事项">
<ul>
<li v-for="todo in filteredTodos" :key="todo.id">{{ todo.text }}</li>
</ul>
</div>
</template>

<script>
export default {
data() {
return {
searchQuery: '',
todos: [
{ id: 1, text: '学习Vue', completed: false },
{ id: 2, text: '构建一个应用', completed: true },
{ id: 3, text: '掌握计算属性', completed: false }
]
}
},
computed: {
filteredTodos() {
return this.todos.filter(todo =>
todo.text.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
}
}
</script>

在这里，filteredTodos就像一个智能过滤器。它监视todos和searchQuery。当任何一个改变时，它会自动更新列表。神奇吧？

计算属性的Get/Set

现在，让我们升级一下！计算属性可以有getter和setter。就像有一个双向食谱——你可以读取结果，也可以修改原料！

<template>
<div>
<p>全名: {{ fullName }}</p>
<button @click="changeFullName">更改名字</button>
</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[names.length - 1]
}
}
},
methods: {
changeFullName() {
this.fullName = 'Jane Smith'
}
}
}
</script>

在这个例子中，fullName不仅仅是一个食谱（getter），也是一个反向食谱（setter）。当我们改变fullName时，它会自动更新firstName和lastName。就像有一个神奇的名字更改药水！

计算属性中的方法

让我们用一张表格来总结一下在计算属性中常用的方法：

方法	描述	示例
filter()	创建一个通过测试的元素新数组	this.items.filter(item => item.price > 100)
map()	通过转换每个元素创建一个新数组	this.items.map(item => item.name.toUpperCase())
reduce()	将数组减少为一个单一的值	this.items.reduce((total, item) => total + item.price, 0)
sort()	对数组的元素进行排序	this.items.sort((a, b) => a.price - b.price)
includes()	检查数组是否包含某个元素	this.items.includes('apple')
find()	返回通过测试的第一个元素	this.items.find(item => item.id === 3)

记住，这些方法不会修改原始数组，这对于计算属性来说是完美的！

就这样，我热切的学者们！你们刚刚掌握了Vue.js中计算属性的技艺。从简单的计算到复杂的过滤，你们现在有了使Vue应用程序更智能和更高效的力量。继续练习，继续编码，最重要的是，继续在Vue中享受乐趣！

Credits: Image by storyset