Watch 監聽屬性

今天來介紹監聽 watch 的用法，這個可以讓我們監聽某個值，而當這個值有更動的時候，就去執行某些事情，請看下面範例：

<!-- 這是HTML -->
<div id="app">
  <div class="box" :class="{trigger: isTrigger}"></div>
  <button @click="isTrigger = true">Click</button>
</div>

/* 這是CSS */
.box{
  width: 50px;
  height: 50px;
  background: red;
  transition: all .3s;
}
.trigger{
  transform: rotate(45deg)
}

new Vue({
  el: '#app',
  data: {
      isTrigger: false
  },
  watch: {
      isTrigger: function () {
        const vm = this;
        setTimeout(()=> {
          vm.isTrigger = false;
        },3000)
    }
  }
})

上面的內容我就不一一說明，只挑重點解釋，這裡的按鈕點擊後會將 trigger 這個 class 的屬性加上去使其旋轉，而 watch 則是監視著 isTrigger 這個變數的值，當點擊按鈕後發生變動就會觸發後面的涵式，內容是在三秒後再將 isTrigger 的值變更回 false ，使 trigger 的屬性移除。

監聽屬性 watch 與計算屬性 computed 的比較

這時有沒有覺得這兩者好像有點相似，都是某個值產生變化後執行特定的涵式，作資料的即時更新，這裡就來說明一下兩者之間的差異。

<div id="app">
  <input type="text" v-model="firstName">
  <input type="text" v-model="lastName">
  <p>{{fullName}}</p>
</div>

new Vue({
  el: '#app',
  data: {
      firstName: 'John',
      lastName: 'Doe',
      fullName: 'John Doe'
  },
  watch: {
      firstName: function (val) {
          this.fullName = val + ' ' + this.lastName
      },
      lastName: function (val) {
          this.fullName = this.firstName + ' ' + val
      }
  }
})

上面是使用 watch 的方式作資料的監視，當輸入框的內容發生變動的時候，會自動作相對應的涵式，不過有沒有覺得這兩個涵式有點相似呢！？讓我們來看看如果使用 computed 的話，程式碼會是如何撰寫的。

new Vue({
  el: '#app',
  data: {
      firstName: 'John',
      lastName: 'Doe',
  },
  computed: {
      fullName: function () {
        return this.firstName + ' ' + this.lastName
      }
  }
})

HTML 的部份並沒有更動，而這兩者的結果都是一樣的，有沒有覺得使用 computed 簡短許多，所以在上面這個範例，使用 computed 是相對較合適的唷！

那麼，明天再見囉！