vue計算屬性和偵聽器總結

基礎例子

<p> {{ reversedMessage }} </p>

computed: {
    reversedMessage: function () {
        return this.message.split('').reverse().join('')
    }
}
           

• reversedMessage就是一個計算屬性
• resersedMessage的值始終取決于data： this.message

• vue中computed的屬性可是看成和data一樣，可以讀取和設值，是以計算屬性可以分為getter和setter,一般情況下是沒有setter的，計算屬性屬性就是隻讀屬性，getter是預設的省略的，至于setter下面會提到觸發的情況

  computed: {

  reversedMessage: function () {

  getter(){

  returnthis.message.split(”).reverse().join(”)

  }

  }

  }

計算屬性getter觸發時間

• 并不是說我們更改了getter裡使用的變量，就會出發computed的更新，這個的前提是computed裡的值必須要在魔闆中使用了才行，就是說比如上面，我們不調用{{ reversedMessage }}，是不觸發getter的

計算屬性setter

• 比如我們在input上v-model=”reversedMessage”的時候，這裡我們去修改文本框的内容的時候就會觸發setter

計算屬性緩存vs方法

• 單個的計算屬性和方法最終的效果可能是一樣的，但是不同的是，計算屬性是基于他們的依賴進行緩存的，就是在message發生改變，自動立即傳回之前的計算結果，不必再次執行函數，而函數需要重新執行，個人感覺和計算屬性如同單雙向資料綁定

計算屬性vs偵聽屬性

• vue提供了一個通用的方法來觀察響應vue執行個體上的資料變動：偵聽屬性。watch,watch是指令式的回調，而這個時候用計算屬性就比watch好

  //監聽兩個輸入框去組合成姓名資料

  watch: {

  firstName: function (val) {

  this.fullName = val + ’ ’ + this.lastName

  },

  lastName: function (val) {

  this.fullName = this.firstName + ’ ’ + val

  }

  }

  //計算屬性，綁定兩個資料，自動傳回

  computed: {

  fullName: function () {

  return this.firstName + ’ ’ + this.lastName

  }

  }

偵聽器

• 計算屬性在大多情況下更合适，但有時也需要一個自定義的偵聽器，當需要在資料變化時執行異步或開銷較大的操作的時候，這個方法是最有用的
• 注意 watch配置了deep的時候操作多的時候會影響性能

結語：不要老想着從技術的角度去解決問題，要試着從設計上從方式上去規避問題。