Vue入門教程06-偵聽器

一、watch偵聽屬性

通過 watch 來響應數據的變化，下面實現一個港幣-人民幣兌換的功能：

<template>
  <div id="hello">
    <p>人民幣/港幣換算</p>
    <p>人民幣: <input type = "text" v-model = "rmb"></p>
    <p>港幣: <input type = "text" v-model = "hkDollar"></p>
  </div>
</template>
<script>
  export default {
    name: 'hello',
    data () {
      return {
        hkDollar:0,
        rmb:0
      }
    },
    watch:{
      hkDollar:function (val) {
        this.hkDollar = val;
        this.rmb = this.hkDollar * 0.8;
      },
      rmb:function (val) {
        this.rmb = val;
        this.hkDollar = this.rmb / 0.8;
      }
    }
  }
</script>

在watch 對象中創建了兩個方法 hkDollar 和 rmb ，當輸入框輸入數據時，watch 會監聽數據變化並改變自身的值。

二、計算屬性和偵聽器比較

大多數情況下計算屬性更合適，但Vue也爲我們提供了自定義的偵聽器。通過 watch 選項提供了一個更通用的方法來響應數據的變化。如果需要在數據變化時執行異步或開銷較大的操作時，偵聽器是最有用的方式：
比如，我們想要限制執行該操作的頻率，並在得到最終結果前，設置一箇中間狀態，這些都是計算屬性不具備的特點。

END.