一、 概述

創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供汾西網(wǎng)站建設(shè)、汾西做網(wǎng)站、汾西網(wǎng)站設(shè)計(jì)、汾西網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、汾西企業(yè)網(wǎng)站模板建站服務(wù)，十年汾西做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

 計(jì)算屬性

  模板內(nèi)的表達(dá)式非常便利，但是設(shè)計(jì)它們的初衷是用于簡單運(yùn)算的。在模板中放入太多的邏輯會(huì)讓模板過重且難以維護(hù)。例如：

 {{ message.split('').reverse().join('') }}

   在這個(gè)地方，模板不再是簡單的聲明式邏輯。你必須看一段時(shí)間才能意識(shí)到，這里是想要顯示變量 message 的翻轉(zhuǎn)字符串。當(dāng)你想要在模板中多次引用此處的翻轉(zhuǎn)字符串時(shí)，就會(huì)更加難以處理。

  所以，對于任何復(fù)雜邏輯，你都應(yīng)當(dāng)使用計(jì)算屬性。

 基礎(chǔ)例子

 
Original message: "{{ message }}"
 
Computed reversed message: "{{ reversedMessage }}"


var vm = new Vue({
 el: '#example',
 data: {
  message: 'Hello'
 },
 computed: {
  // 計(jì)算屬性的 getter
  reversedMessage: function () {
   // `this` 指向 vm 實(shí)例
   return this.message.split('').reverse().join('')
  }
 }
})

    結(jié)果：

       這里我們聲明了一個(gè)計(jì)算屬性 reversedMessage。我們提供的函數(shù)將用作屬性 vm.reversedMessage 的 getter 函數(shù)

console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'

      你可以像綁定普通屬性一樣在模板中綁定計(jì)算屬性。Vue 知道 vm.reversedMessage 依賴于 vm.message，因此當(dāng) vm.message 發(fā)生改變時(shí)，所有依賴 vm.reversedMessage 的綁定也會(huì)更新。而且最妙的是我們已經(jīng)以聲明的方式創(chuàng)建了這種依賴關(guān)系：計(jì)算屬性的 getter 函數(shù)是沒有副作用 (side effect) 的，這使它更易于測試和理解。

二、計(jì)算屬性緩存 vs 方法

        你可能已經(jīng)注意到我們可以通過在表達(dá)式中調(diào)用方法來達(dá)到同樣的效果

Reversed message: "{{ reversedMessage() }}"

// 在組件中
methods: {
 reversedMessage: function () {
  return this.message.split('').reverse().join('')
 }
}

        我們可以將同一函數(shù)定義為一個(gè)方法而不是一個(gè)計(jì)算屬性。兩種方式的最終結(jié)果確實(shí)是完全相同的。然而，不同的是計(jì)算屬性是基于它們的依賴進(jìn)行緩存的。計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值。這就意味著只要 message 還沒有發(fā)生改變，多次訪問 reversedMessage 計(jì)算屬性會(huì)立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行函數(shù)。

    這也同樣意味著下面的計(jì)算屬性將不再更新，因?yàn)?Date.now() 不是響應(yīng)式依賴

computed: {
 now: function () {
  return Date.now()
 }
}

      相比之下，每當(dāng)觸發(fā)重新渲染時(shí)，調(diào)用方法將總會(huì)再次執(zhí)行函數(shù)。

我們?yōu)槭裁葱枰彺妫?/p>

      假設(shè)我們有一個(gè)性能開銷比較大的的計(jì)算屬性 A，它需要遍歷一個(gè)巨大的數(shù)組并做大量的計(jì)算。然后我們可能有其他的計(jì)算屬性依賴于 A 。如果沒有緩存，我們將不可避免的多次執(zhí)行 A 的 getter！如果你不希望有緩存，請用方法來替代。

三、計(jì)算屬性 vs 偵聽屬性

       Vue 提供了一種更通用的方式來觀察和響應(yīng) Vue 實(shí)例上的數(shù)據(jù)變動(dòng)：偵聽屬性。當(dāng)你有一些數(shù)據(jù)需要隨著其它數(shù)據(jù)變動(dòng)而變動(dòng)時(shí)，你很容易濫用 watch——特別是如果你之前使用過 AngularJS。然而，通常更好的做法是使用計(jì)算屬性而不是命令式的 watch 回調(diào)。

  細(xì)想一下這個(gè)例子

{{ fullName }}

var vm = new Vue({
 el: '#demo',
 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
  }
 }
})

     上面代碼是命令式且重復(fù)的。將它與計(jì)算屬性的版本進(jìn)行比較：

var vm = new Vue({
 el: '#demo',
 data: {
  firstName: 'Foo',
  lastName: 'Bar'
 },
 computed: {
  fullName: function () {
   return this.firstName + ' ' + this.lastName
  }
 }
})

     是不是好多了。

四、計(jì)算屬性的 setter

      計(jì)算屬性默認(rèn)只有 getter ，不過在需要時(shí)你也可以提供一個(gè) setter

// ...
computed: {
 fullName: {
  // getter
  get: function () {
   return this.firstName + ' ' + this.lastName
  },
  // setter
  set: function (newValue) {
   var names = newValue.split(' ')
   this.firstName = names[0]
   this.lastName = names[names.length - 1]
  }
 }
}
// ...

現(xiàn)在再運(yùn)行 vm.fullName = 'John Doe' 時(shí)，setter 會(huì)被調(diào)用，vm.firstName 和 vm.lastName 也會(huì)相應(yīng)地被更新。

五、偵聽器

      雖然計(jì)算屬性在大多數(shù)情況下更合適，但有時(shí)也需要一個(gè)自定義的偵聽器。這就是為什么 Vue 通過 watch 選項(xiàng)提供了一個(gè)更通用的方法，來響應(yīng)數(shù)據(jù)的變化。當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)，這個(gè)方式是最有用的。

    例如：

 

  Ask a yes/no question:
  
 
 
{{ answer }}

    結(jié)果：當(dāng)沒有輸入？號(hào)，那么顯示如下：

    當(dāng)有?時(shí)候會(huì)輸出“yes”或者“no”

 具體案例效果地址：偵聽器

 在這個(gè)示例中，使用 watch 選項(xiàng)允許我們執(zhí)行異步操作 (訪問一個(gè) API)，限制我們執(zhí)行該操作的頻率，并在我們得到最終結(jié)果前，設(shè)置中間狀態(tài)。這些都是計(jì)算屬性無法做到的。

總結(jié)

以上所述是小編給大家介紹的Vue.js計(jì)算屬性和偵聽器,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!