Vue.js 是一個流行的 JavaScript 前端框架，提供了豐富的資料綁定和回應特性，讓我們可以輕鬆管理 Web 應用程式的狀態。其中 computed 和 watch 是 Vue.js 中兩個重要的資料處理和監聽工具，本篇文章將介紹如何使用它們實現資料計算與監聽的技巧。
computed 計算屬性是依賴其他屬性值的屬性，也就是說，當其他的屬性值改變時，computed 屬性會自動重新計算。 computed 計算屬性有兩個主要的作用：
我們可以在 Vue 實例的 computed 物件中定義多個計算屬性。計算屬性傳回的結果可以直接在模板中使用，而且只有當依賴的屬性改變時，它才會重新計算。以下是一個例子：
<template>
<div>
<p>商品数量: {{ products.length }}</p>
<ol>
<li v-for="(product, index) in sortedProducts" :key="index">
{{ product.name }} - ${{ product.price }}
</li>
</ol>
</div>
</template>
<script>
export default {
data() {
return {
products: [
{ name: "iPhone 12", price: 799 },
{ name: "MacBook Air", price: 999 },
{ name: "iPad Pro", price: 699 },
{ name: "AirPods Pro", price: 249 },
]
}
},
computed: {
sortedProducts: function() {
return this.products.sort((a, b) => a.price - b.price);
}
}
}
</script>在上面的範例中，我們透過計算屬性的方式來對商品清單進行排序。 sortedProducts 計算屬性會對 products 的價格升序排列，然後再將排好序的結果傳回給模板中的 v-for 指令進行渲染。
要注意的是，計算屬性只有在它所依賴的屬性改變時才會被重新計算。所以，即使我們在 sortedProducts 計算屬性中使用了 this.products，但是只要 products 沒有改變，sortedProducts 就不會被重新計算。
計算屬性不僅可以用來計算新的數據，還可以用來對現有數據進行處理，例如格式化日期或金額等。以下是一個例子：
<template>
<div>
<p>订单时间: {{ formattedTime }}</p>
<button @click="updateTime">更新时间</button>
</div>
</template>
<script>
export default {
data() {
return {
orderTime: new Date()
}
},
computed: {
formattedTime: function() {
return this.orderTime.toLocaleString();
}
},
methods: {
updateTime: function() {
this.orderTime = new Date();
}
}
}
</script>在上面的例子中，我們透過計算屬性的方式將訂單時間格式化為本地日期和時間字串（toLocaleString），並將格式化後的結果顯示在模板中。由於計算屬性的特性，formattedTime 只有在 orderTime 改變時才會重新計算。
watch 是一個深度監聽統一資料來源的函數。與 computed 不同，watch 監聽到的資料來源發生變化時，並不會自動地重新渲染模板，而是需要手動執行操作。 watch 主要用於監聽資料的變化，從而觸發對應的操作。下面是一個例子：
<template>
<div>
<p>剩余字符数: {{ charsLeft }}</p>
<textarea v-model="text" @keyup="updateChars"></textarea>
</div>
</template>
<script>
export default {
data() {
return {
text: ""
}
},
watch: {
text: function(val) {
if (val.length > 10) {
alert("输入字符数不能超过10个!");
}
}
},
computed: {
charsLeft: function() {
return 10 - this.text.length;
}
},
methods: {
updateChars: function() {
this.charsLeft = 10 - this.text.length;
}
}
}
</script>在上面的範例中，我們透過 watch 監聽輸入框中的 text 變數。當 text 長度超過 10 個字元時，watch 會觸發對應的操作，彈出警告框，防止使用者繼續輸入。同時，我們透過 computed 計算屬性統計剩餘字元數，可以看到計算屬性 charsLeft 只有在 text 改變時才會重新計算。
要注意的是，watch 監聽的變數是一個函數，並且會接收新值和舊值兩個參數。我們可以根據這兩個參數執行對應的操作。 watch 也提供了深度監聽和立即執行等進階選項，可以根據具體需求進行配置。
computed 和 watch 是 Vue.js 中必不可少的工具，非常適用於對資料進行複雜的處理和監聽。我們可以在 computed 中定義多個計算屬性，透過依賴關係來控制計算順序和更新方式。而在 watch 中，我們可以對資料來源進行深度監聽，並且即時回應資料來源的變化。雖然 computed 和 watch 有一定的學習和使用成本，但這些成本的提高將會幫助您建立更靈活和高效的 Vue 應用程式。
以上是Vue 中使用 computed 和 watch 實現資料計算與監聽的技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！
