vue計算屬性與偵聽器實戰項目詳解

這次帶給大家vue計算屬性與偵聽器實戰項目詳解，vue計算屬性與偵聽器實戰項目的注意事項有哪些，下面就是實戰案例，一起來看一下。

計算屬性

模板內的表達式非常便利，但是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。例如：

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

在這個地方，模板不再是簡單的宣告式邏輯。你必須看一段時間才能意識到，這裡是想要顯示變數 message 的翻轉字串。當你想要在模板中多次引用此處的翻轉字串時，就會更加難以處理。

所以，對於任何複雜邏輯，你都應當使用計算屬性。

基礎範例

<p id="app">
 {{fullName}}
</p>  
var vm = new Vue({
 el: '#app',
 data: {
  firstName: "王",
  lastName: "小智",
  age: 28
 },
 // 计算属性
 computed: {
   fullName: function () {
     console.log("计算了一次")
     return this.firstName + " " + this.lastName
   }
 }
})

結果：

王小智

然後我們透過瀏覽器改變age屬性的值，讓頁面重新渲染:

大家可以看到，我們改變了age值計算屬性的方法沒有被呼叫,那如果計算屬性的值發生了改變，如lastName或firstName改變，列印結果又會怎麼樣呢?

大家可以看到，當他依賴的發生變化的時候，計算屬性會重新計算一次。

計算屬性快取vs 方法

你可能已經注意到我們可以透過在表達式中呼叫方法來達到同樣的效果:

<p>Reversed message: "{{ fullName() }}"</p>
// 在组件中
methods: {
 fullName: function () {
  console.log("计算了一次")
  return this.firstName + " " + this.lastName;
 }
}

結果：

王小智

同樣參考上面，我們透過瀏覽器改變age屬性的值，讓頁面重新渲染:

可以看出，我們頁面只要重新渲染，方法都會執行一次，而計算屬性只有在它的相關依賴發生改變時才會重新求值。

我們為什麼需要快取？假設我們有一個效能開銷比較大的計算屬性 A，它需要遍歷一個巨大的陣列並做大量的計算。然後我們可能有其他的計算屬性依賴A 。如果沒有緩存，我們將不可避免的多次執行 A 的 getter！如果你不希望有緩存，請用方法來替代。

計算屬性vs 偵聽屬性

你可能已經注意到我們也可以透過偵聽屬性達到相同的效果:

var vm = new Vue({
 el: '#app',
 data: {
  firstName: "王",
  lastName: "小智",
  age: 28，
  fullName
 },
 // 计算属性
 watch: {
   firstName: function () {
    console.log("计算了一次");
    this.fullNmae = this.firstName + this.lastName;
   },
   lastName: function () {
    console.log("计算了一次")
    this.fullNmae = this.firstName + this.lastName;
   }
 }
})

結果：

王小智

同樣參考上面，我們透過瀏覽器改變age屬性的值，讓頁面重新渲染:

大家可以看到,和fullname不相關的改變，fullName沒有變化，跟計算屬性類似，會有緩存，只有在它的相關依賴發生改變時才會重新求值,將它與計算屬性的版本進行比較,好得多了，不是嗎？

當你有一些資料需要隨著其它資料變動而變動時，你很容易濫用 watch——特別是如果你之前使用過
AngularJS。然而，通常更好的做法是使用計算屬性而不是命令式的 watch 回呼。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

怎麼使用js操作圖片轉為base64

vue router動態路由運算子路由

以上是vue計算屬性與偵聽器實戰項目詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！