Vue 計算屬性與偵聽器

這一節我們一起學習 vue 中的計算屬性(computed properties)和偵聽器(watch)。

在之前，我們學習過 vue 表達式插值：

<div id="example">{{ message.split('').reverse().join('') }}
</div>

如果在模板中放入太多的邏輯會讓模板過重且難以維護。我們可以把方法寫在事件處理函數里面，并且在構造器內部通過 this 調用。

Html 代碼：

<h1>{{ this.reversedMessageMethod() }}</h1>

JS 代碼：

methods: {reversedMessageMethod() {return this.message.split('').reverse().join('');},
},

這里要提醒一下，我們不可以把事件處理函數寫成箭頭函數，因為這里的 this 需要指向 vue 實例。

一、過濾器

其實，模板中的處理邏輯是不適合放在事件處理函數里的，即使可以這么做。事件處理函數應該專注于處理事件，我們應該讓它變得純粹。在 vue 中，允許我們自定義過濾器(filters)，可被用于一些常見的文本格式化。

過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達式 (后者從 2.1.0+ 開始支持)。過濾器應該被添加在 JavaScript 表達式的尾部，由 | 符號指示，我們看看怎么用：

<template><div class='hello'><h1>{{ message.split('').reverse().join('') }}</h1><!-- add this --><h1>{{ message | reverseString }}</h1></div>
</template><script>
export default {name: 'HelloWorld',data() {return {message: 'Welcome to Your Vue.js App',};},// add this  filters: {reverseString(val) {let value = val;if (!value) return '';value = value.split('').reverse().join('');return value;},},
};
</script>

代碼增多了，但是整體的語義化卻更好。從 filters 的用法我們可以看出：

它是一對一的，對單個數據進行過濾，可以進行傳參
適用于同方法、不同參數的情況

所以，filters 的缺點就很明顯了：如果要計算結合多個數據不同變化的情況，過濾器就無法適用了。這就要用到我們下面提到的計算屬性了。

二、計算屬性

在 vue 中，也為我們提供了computed 這個選項來處理數據，我們稱它為計算屬性。當邏輯復雜的時候，我們就應當使用 computed 計算屬性了。計算屬性使用起來非常簡單，我們還是用上面的例子，使用計算屬性來修改模板中的邏輯：

<template><div class='hello'><h1>{{ message.split('').reverse().join('') }}</h1><h1>{{ message | reverseString }}</h1><h1>{{ this.reversedMessageMethod() }}</h1><!-- add this --><h1>{{ reversedMessage }}</h1></div>
</template><script>
export default {name: 'HelloWorld',data() {return {message: 'Welcome to Your Vue.js App',};},filters: {reverseString(val) {let value = val;if (!value) return '';value = value.split('').reverse().join('');return value;},},// add thiscomputed: {reversedMessage() {return this.message.split('').reverse().join('');},},methods: {reversedMessageMethod() {return this.message.split('').reverse().join('');},},
};
</script>

和 method 選項的使用非常相似。我們可以像綁定普通屬性一樣在模板中綁定計算屬性。

這兩種方式的最終結果確實是完全相同的。然而，不同的是：計算屬性是基于它們的依賴進行緩存的。什么意思呢？

只在相關依賴發生改變時它們才會重新求值。這就意味著只要 message 還沒有發生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結果，而不必再次執行函數；而當數據有變化時，只要有一個數據發生變化，則會重新計算，來更新視圖的改變。相比之下，每當觸發重新渲染時，調用 methods 中的方法將總會再次執行函數。

我們為什么需要緩存？假設我們有一個性能開銷比較大的計算屬性 A，它需要遍歷一個巨大的數組并做大量的計算。然后我們可能有其他的計算屬性依賴于 A 。如果沒有緩存，我們將不可避免的多次執行 A 的 getter！

我們來看看計算屬性的具體應用場景：

1、微博發文

發微博的時候，有字數限制。在我們輸入文字的時候，輸入框會計算我們還可以輸入多少字：

<template><div><textarea v-model='content' :maxlength='totalcount'></textarea><p>你還可以輸入{{reduceCount}}字</p></div>
</template><script>
export default {data() {return {totalcount: 200, // 總共只給輸入200字content: '',};},computed: {reduceCount() {return this.totalcount - this.content.length;},},
};
</script>

通過一直監聽輸入的字符的長度來觸發 computed 里的 reduceCount 方法，重新計算，然后返回給視圖，讓視圖作出相應的變化。接下來我們再看一個例子。

2、足球比賽

這個例子是一個足球比賽的結果播報板，我們先看看最終的效果，再看代碼：

效果：

match

代碼：

<template><div><h1>比賽時間：{{time}}s</h1><h2>直播播報：{{result}}</h2><div class='team'><div><p>中國隊進球數：{{team.china}}</p><button @click='team.china++'>點擊中國隊進一球</button></div><div><p>韓國隊進球數：{{team.korea}}</p><button @click='team.korea++'>點擊韓國隊進一球</button></div></div></div>
</template><script>
export default {created() {const time = setInterval(() => {this.time = this.time + 1;if (this.time === 90) {clearInterval(time);}}, 1000);},data() {return {time: 0,team: {china: 0,korea: 0,},};},computed: {result() {if (this.time < 90) {if (this.team.china > this.team.korea) {return '中國隊領先';} else if (this.team.china < this.team.korea) {return '韓國隊領先';}return '雙方僵持';}if (this.team.china > this.team.korea) {return '中國隊贏';} else if (this.team.china < this.team.korea) {return '韓國隊贏';}return '平局';},},
};
</script><style scoped>
.team {display: flex;justify-content: center;
}
button {padding: 15px 60px;outline: none;background-color: #27ae60;display: block;font-size: 1rem;color: #fff;margin: 10px;
}
</style>

通過上面的例子，我們就可以很清楚 computed 的作用了：觀察一個或者多個數據，只要依賴的數據發生變化的時，這個函數就會重新計算。這樣我們就可以通過觀察所有數據來維護一個狀態，也就是所謂的返回一個狀態值。

三、偵聽器

雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器。vue 通過 watch 選項提供了一個更通用的方法，來響應數據的變化。

computed 和 watch 都可以做同一件事，兩個選項都是對數據進行時時監聽。但是它們也有不同：

computed 對多數據變動進行監聽，返回一個狀態，維護一個狀態
watch 是對一個數據監聽，在數據變化時，會返回兩個值，一個是 value (當前值)，二是 oldvalue 是變化前的值

我們也可以用 watch 選項來改造上面的足球比賽的例子，添加一個 watch 選項：

<script>
export default {created() {const time = setInterval(() => {this.time = this.time + 1;if (this.time === 90) {clearInterval(time);}}, 1000);},data() {return {time: 0,team: {china: 0,korea: 0,},};},// add this  watch: {time(value, oldval) { // eslint-disable-lineif (value < 90) {if (this.team.china > this.team.korea) {this.result = '中國隊領先';} else if (this.team.china < this.team.korea) {this.result = '韓國隊領先';} else {this.result = '雙方僵持';}} else if (this.team.china > this.team.korea) {this.result = '中國隊贏';} else if (this.team.china < this.team.korea) {this.result = '韓國隊贏';} else {this.result = '平局';}},team(value, oldval) { // eslint-disable-lineif (this.time < 90) {if (value.china > value.korea) {this.result = '中國隊領先';} else if (value.china < value.korea) {this.result = '韓國隊領先';} else {this.result = '雙方僵持';}} else if (value.china > value.korea) {this.result = '中國隊贏';} else if (value.china < value.korea) {this.result = '韓國隊贏';} else {this.result = '平局';}},},
};
</script>

可以看出跟使用 computed 選項是差不多一致的。那 watch 有什么應用場景呢？

有一個很常見的場景：圖片的預加載。當圖片數量比較大的時候，為了保證頁面圖片都加載出來的時候，才把主頁面給顯示出來，然后再進行一些 ajax 請求，或者邏輯操作，這個時候用 computed 就無法實現了，只能用 watch ，看看代碼：

<template><div v-show='show'><img src='https://img.alicdn.com/simba/img/TB14sYVQXXXXXc1XXXXSutbFXXX.jpg' alt><img src='//img.alicdn.com/tfs/TB1iZ6EQXXXXXcsXFXXXXXXXXXX-520-280.jpg_q90_.webp' alt><img src='https://img.alicdn.com/simba/img/TB1C0dOPXXXXXarapXXSutbFXXX.jpg' alt><img src='//img.alicdn.com/tfs/TB1iZ6EQXXXXXcsXFXXXXXXXXXX-520-280.jpg_q90_.webp' alt></div>
</template><script>
export default {data() {return {count: 0,show: false,};},mounted() {const imgs = document.querySelectorAll('img');console.log(imgs); // eslint-disable-lineArray.from(imgs).forEach((item) => {const img = new Image();img.onload = () => {this.count = this.count + 1;};img.src = item.getAttribute('src');});},watch: {count(val, oldval) { // eslint-disable-lineif (val === 4) {this.show = true;alert('加載完畢'); // eslint-disable-line// 然后可以對后臺發送一些ajax操作}},},
};
</script>

我們可以發現等四張圖片都加載完畢的時候頁面才顯示出來。所以當我們想要在數據變化響應時，執行異步操作或開銷較大的操作，就需要使用 watch 了。