首頁 >web前端 >js教程 >vue 計算屬性與方法跟偵聽器差異的解析

vue 計算屬性與方法跟偵聽器差異的解析

不言原創: 2018-06-30 17:14:372223瀏覽

這篇文章主要介紹了詳解vue 計算屬性與方法跟偵聽器區別(面試考點),內容挺不錯的，現在分享給大家，也給大家做個參考。

計算屬性

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

<p id="example">
 {{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}
</p>

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

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

基礎範例

<p id="app">
 {{fullName}}
</p>
  
  
var vm = new Vue({
 el: &#39;#app&#39;,
 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: &#39;#app&#39;,
 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中文網！

vue 計算屬性與方法跟偵聽器差異的解析

相關文章