Vue 筆記 - Computed 與 Watch

如果想要偵測資料的變動時，可以使用 Watch 來追蹤其變化，使用 watch，是用物件呈現１應將要觀察的屬性帶入函式使用。

練習範例 - watch

HTML

欲顯示於網頁的樣式

<div id="app">{{ fullName }}</div>

Vue

先設定一組資料 data，透過 watch 來觀察其變化，透過 watch 觀察 firstName 跟 lastName， 而 firstName 跟 lastName 兩個函式所帶入的參數，就是自己的值，並加上另外要組合的函式，所以只要 data 資料變更， watch 就會接收到，並顯示於網頁上。

var vm = new Vue({
  el: "#app",
  data: {
    firstName: "Foo",
    lastName: "Bar",
    fullName: "Foo Bar",
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + " " + this.lastName;
    },
    lastName: function (val) {
      this.fullName = this.firstName + " " + val;
    },
  },
});

computed 改寫

但這個範例使用 watch，就不太聰明，可以改用 computed，原因是組合名字，是馬上就可以得到的資料，不需要特別觀察後再給予值，若用 computed 改寫後會如下方呈現，直接組合起來即可。

var vm2 = new Vue({
  el: "#app2",
  data: { firstName: "Foo", lastName: "Bar" },
  computed: {
    fullName: function () {
      return this.firstName + " " + this.lastName;
    },
  },
});

透過 watch 觀察物件後使其恢復原來狀態

watch 有趣的地方就可以改變後的結果，例如：我點擊一個按鈕讓網頁元素有個正方形可以旋轉 45 度，透過 watch 讓正方形自動三秒後轉回原本的樣子。

HTML

首先在 .box 綁定 class 名稱與其變數，button 綁定 @click 事件，效果設定為 true。

<div class="box" :class="{'rotate': trigger }"></div>
<button class="btn btn-outline-primary" @click="trigger =true">Counter</button>

Vue

1. data 資料中給予預設的 trigger 變數為 false。
2. 為了讓 .box 在三秒鐘後自動回復原狀，所以透過 watch 觀察 trigger 這個變數。
3. 並宣告一個 vm 變數為 this，指的就是 trigger 自己。
4. 使用到時間關係的動作，就會想到 setTimeout，並透過這個函式，使 trigger 這個變數本身，於三秒後變為 false，也就是原本的狀態。

var app = new Vue({
  el: "#app",
  data: {
    trigger: false,
  },
  watch: {
    trigger() {
      var vm = this;
      setTimeout(() => {
        vm.trigger = false;
      }, 3000);
    },
  },
});