iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 9
0

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 是相對較合適的唷!

那麼,明天再見囉!


上一篇
Day 8 : Computed 計算屬性
下一篇
Day 10 : Filter 過濾
系列文
Vue 學習筆記 - 讓你30天掌握 Vue31

1 則留言

0
kanboo
iT邦新手 5 級 ‧ 2018-10-11 09:39:55

每天一回顧,謝謝....

額外補充,
若使用「arrow function」的話,
在 setTimeout 裡,就可以直接使用 this

new Vue({
  el: '#app',
  data: {
      isTrigger: false
  },
  watch: {
      isTrigger: function () {
        // const vm = this;
        setTimeout(()=> {
          //vm.isTrigger = false;
          this.isTrigger = false;
        },3000)
    }
  }
})
Magisheng iT邦新手 5 級 ‧ 2018-10-18 20:12:12 檢舉

對~感謝補充!!

我要留言

立即登入留言