vue.js 中 data, prop, computed, method，watch 介紹

vue.js 中 data, prop, computed, method，watch 介紹

data, prop, computed, method 的區別

類型	加載順序	加載時間	寫法	做用	備註
prop	1	beforeCreated, created之間	對象或數組	接收父組件傳遞的值
data	3	同↑	對象或函數	定義以及初始化數據	最好是用於視圖上展現的數據，不然最好定義在外面或者vm對象內（減小開支，提升性能）；組件內只接受函數
computed	4	同↑	函數	提供相對簡單的數據計算
method	2	同↑	函數	提供相對複雜的數據計算

data 與 computed 的關係

根據官網的介紹，雖然模板內的表達式很方便，可是對於任何複雜的邏輯，你都應當使用計算屬性。

data 只是對於你想要展現的數據的定義，可是，若是該數據須要進行復雜的處理（例如將其變爲翻轉字符串等），就須要計算屬性的幫忙。

類型	做用	備註
data	定義以及展現數據
computed	對數據進行復雜的操做轉換

<span>{{reversedMessage}}</span>
data() {
  message: '',
},
computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  },
},

computed 與 method 的區別

固然，咱們能夠把同一函數定義爲一個方法而不是計算屬性，兩種方式最後的結果同樣的，不一樣的是，計算屬性是基於他們的依賴進行緩存的，只有相關依賴的值發生改變纔會從新求值；而方法只要被觸發就會再次執行該函數。若是你不但願有緩存，請用方法來代替。

類型	是否被緩存	備註
computed	是	只要依賴值有變化就會立馬執行
method	否	須要綁定事件

method: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  },
},

computed 與 watch 的區別

在不少狀況下，computed 會比 watch 使用起來更加方便，可是當須要在數據變化時執行異步或者開銷比較大的狀況下，用 watch 會更加合適。

例如官網提供的例子（問與答）。
watch 觀察 question 的值，若值有改變會執行方法 getAnswer，而且根據 question 不一樣的值，answer 會給出不一樣的回答，而且會異步調用 API 返回相應的值，這些都是計算屬性作不到的。

類型	目的	備註
computed	依賴變更實時更新數據	更新數據
watch	觀察某一特定的值，執行特定的函數	觀察數據

<div id="watch-example">
  <p>
    Ask a yes/no question:
      <input v-model="question">
  </p>
  <p>{{answer}}</p>
</div>

var watchExampleVM = new Vue({
  el: "watch-example",
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!',
  },
  watch: {
    question: function(newquestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing';
      this.getAnswer();
    },
  },
  method: {
    getAnswer: _.debounce{
      function() {

        if (this.question.indexOf('?') === -1) {
          this.answer = 'Question ususally contain a question mark -- ?';
        }
        this.answer = 'Thinking';
        var vm = this.axios.get(XXX)
        ` ` `  ` ` `
      },
      500
    },
  },
})