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="Search todos">
<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: 'Learn Vue', completed: false },
{ id: 2, text: 'Build an app', completed: true },
{ id: 3, text: 'Master computed properties', 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