tags: Vue.js ItIron2020

前言

昨天我們簡單介紹了computed屬性並比較了它與methods屬性的主要差別，今天我們則要繼續地看剩下的vue屬性! watch在很多時候都相當實用，使用方法也很簡單! 我們馬上開始今天的進度吧!

什麼是watch

watch就是看，念作襪取。 watch有著監看、觀察的意思，在vue實體中用來檢查某個屬性的值是否有出現任何變動，如果有則針對那些變動做出某些操作，基本寫法也相當的單純。

watch: {
   // 你要監聽的值，可以是data屬性的變數、或是computed計算後的值
   fullName: function(val, oldVal) {
     // 傳入的函數中表示當值變動時，你所要執行的callback，其中第一個參數表示變動後的值
     
   }
}

watch的基礎用法

我們就用接續昨天的範例吧! 一樣麻煩你開啟這隻pen，我們看一下簡單的示範。
在之前的程式瑪中，我們加上watch屬性去觀察firstName的變化，並印出變化後的結果，請你打開console一邊觀看。

<script>
export default {
  data() {
    return {
      firstName: 'Danny',
      lastName: 'Wang'
    };
  },
  methods: {
    getFullName() {
      return `${this.firstName} ${this.lastName}`
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  },
  watch: {
    firstName: function(val) {
      console.log(`the firstName has been change,the new value is ${val}`)
    }
  }
};
</script>

現在請你在輸入框隨便修改firstName，假設今天我改為Danny123
你在console應該會看到以下的訊息!

the firstName has been change,the new value is Danny123

你會發現它順利的印出變動後的值! 不過其實wacth監聽的對象可以傳入第二個參數，第二個參數則是預設為變動前的數值，我們稍微修改一下上方範例。

watch: {
    firstName: function(val, oldVal) {
      console.log(`the firstName has been change,the new value is ${val}`)
      console.log(`the oldVal is ${oldVal}`)
    }
}

一樣的情況下，你會發現輸出結果同樣也印出了舊有的值

the firstName has been change,the new value is Danny123
the oldVal is Danny

watch監聽物件屬性

在某些特別的情況，你想觀察的可能是藏在data某個物件的值、或是某個陣列，比方說今天你在data內是這個樣子

data() {
    return {
      person: {
        name: 'Danny',
        id: 9831032
      }
    };
},

我們都知道你單純監聽person物件是沒有用的XDD，那要如何監聽裡面的值呢? 作法也是相當簡單，只是有些小細節要注意

watch: {
   "person.name" : function(val) {
      
   }
}

我們會是監聽該key值，並以字串的方式傳入，除此之外就沒什麼不同囉!

同樣的方法自然也可以應用在陣列上，畢竟本質是相同的?，假設你今天要觀察某個陣列的長度是否有變化，那你就可以採用這樣的寫法，我有把這個例子寫在demo pen中，想更了解的話可以去玩玩看。

"arr.length" : function(val) {
      console.log(`the new length is ${val}`)
}

watch options

watch屬性中有一些可傳入的選項讓你更精確的控制整個流程，不過為了傳入options，在寫法上會稍微不太一樣，我們就用一開始的firstName做為例子吧! 原先你是這樣寫的

watch: {
    firstName: function(val, oldVal) {
      
    }
}

但如果你想傳入options，上述的寫法就必須改為以下，以物件的方式表示，其中包含

• handler function
• options(其中包含immediate & deep，預設為false)

watch: {
    firstName: {
      handler(val, oldVal) {
        
      },
      immediate: true,
      deep: true
    }
}

• immediate
  若設置為true，handler在初始化的時候就會執行一次，不管監控的值有沒有變化，有關於初始化的概念在之後的文章介紹life cycle時會再提到，這邊先有個印象即可!

• deep
  若設置為true，則會一同監聽深層的值是否有變化，比方說之前的例子，你便可以直接監聽整個person物件，這樣當person物件中有任何變化時都會觸發handler function。

結語

我們今天介紹了watch屬性，該屬性用途相當廣，常見的使用包括監聽使用者的輸入並給予對應的訊息、監聽傳入的資料並更新畫面等，不過初次接觸時在使用上可能會有些困惑，這些都是很正常的反應! 多學、多用、多錯，漸漸的自然會變成你的東西，不用太緊張?
這幾天的進度比較輕鬆! 希望大家能學得開心~! 我們明天見!

此文章同步發布於個人部落格，有興趣的大大也可以來參觀一下:D