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

M比煙花爛漫發表於2018-02-12
Vue.js

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
    },
  },
})

相關文章