vue的計算屬性computed與偵聽器watch

vue的計算屬性computed和偵聽器watch都是監聽數據變化。

computed （計算）

其在vue單文件組件中就是對數據進行簡單的一些邏輯計算，在項目開發中方便我們對原始數據處理。重要的是計算屬性基於它的響應式依賴進行緩存的。只有當響應依賴關係變了即值發生變化了纔會重新計算。否則，直接利用緩存，這樣既避免多次調用函數又提升性能。

<div id="app">
	{{fullName}}
</div>
<script>
	new Vue({
    el: "#app-01",
    data:{
        text: "123,456"  //結束不能帶分號!!!
    },
    computed:{
    	// 所有計算屬性都以函數形式寫在computed選項內，最終返回計算的結果。
    	fullName:function(){
    		// 這裏的this 指向的是當前的vue實例
			return this.text.split(',').reverse().join(",");
		}
    }
})
</script>

computed 有兩個屬性getter 和 setter，上面我們只用到了getter屬性，默認是getter屬性，如果需要主動去改變getter的值，可以通過setter來實現。

computed: {
  fullName: {
    // getter
    get: function () {
      return this.text
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.text = names[0]
    }
  }
}

watch (觀察 偵聽)

watch 則多數監聽數據改變，去執行異步操作和邏輯複雜的操作。同樣watch也是在當值發生改變纔會觸發，沒有緩存機制。

<template>
  <div>
    {{answer}}
    <input type="text" v-model="val" name id />
  </div>
</template>
<script>
export default {
  data() {
    return {
      val: "",
      answer:""
    };
  },
  watch: {
    // 如果 `val` 發生改變，這個函數就會運行
    // newQuestion 新值，oldQuestion 舊值
    val: function(newQuestion, oldQuestion) {
      this.answer = oldQuestion;
    }
  }
};
</script>

watch的類型可以是{ [key: string]: string | Function | Object | Array }
一個對象，鍵是需要觀察的表達式，值是對應回調函數。值也可以是方法名，或者包含選項的對象。Vue 實例將會在實例化時調用 $watch()，遍歷 watch 對象的每一個屬性。