在Vue中,我們可以使用監聽(listener)來監視某個屬性的變化,便于一些需要特定操作的情況下可以進行響應式變化。Vue提供了兩種方式來監聽一個屬性的變化:①使用computed屬性;②使用watch對象。
在Vue中,可以通過computed屬性來監聽一個屬性的變化。computed屬性計算的值會被緩存,只有相關的依賴發生變化時,才會重新計算。這樣可以避免重復計算,提高效率。需要使用computed屬性時,可以在Vue實例的computed對象里面設置一個函數,函數返回需要計算的值。在函數中使用需要監測的屬性,并且在該屬性發生變化時自動重新計算。
new Vue({ el: '#watchExample', data: { name: 'Vue' }, computed: { nameWithPrefix: function () { return 'Prefix ' + this.name } } })
在上述例子中,computed屬性nameWithPrefix監聽了name屬性。當name屬性的值改變時,nameWithPrefix重新計算,這樣在{{ nameWithPrefix }}中取值時,會自動根據name屬性計算出一個新值。
另外,在Vue中,還可以使用watch對象來監聽一個屬性的變化。與computed不同的是,watch對象中的方法不會緩存,每次屬性變化都會調用一次。需要使用watch的場景包括:①需要在數據變化時執行異步或開銷較大的操作時;②需要在數據變化時發出聯網請求等。
new Vue({ el: '#watchExample', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } })
在上述例子中,watch對象監聽了firstName和lastName這兩個屬性。當firstName或lastName發生變化時,對應的方法會被調用,并且重新計算fullName屬性的值。
綜上,Vue提供了兩種方式來監聽一個屬性的變化。通過computed屬性可以緩存計算結果提高效率,而使用watch對象可以在數據變化時執行異步或開銷較大的操作時進行響應式變化。