Vue－監聽特定的值（watch）

I’ll be wating you.

簡述

有時候你可能會想要在 data 改變時做一些事情，例如說一個 Todo-list 更新的時候可能想同步更新到 localStorage 中。

雖然可以透過 beforeUpdate 來處理，不過要知道它的特性是「任何畫面上的資料更新時都會觸發」，這樣就有可能做了無意義的更新，所以才需要用 watch 來「監聽某一個值」。

我覺得這就跟 React 裡 useEffect 的 dependencies array 還蠻相似的，總之它的用法是這樣：

export default {
  data() {
    return {
      todos: [],
    }
  }
  watch: {
    // 監聽 todos 這個陣列
    todos: {
      // todos 改變時的 handler
      handler(current, prev) {
        localStorage.setItem('projects', JSON.stringify(current))
      },
      // deep comparing
      deep: true
    }
  }
}

附註：handler 是 config 的 key，所以不能亂改名。

這邊的寫法是屬於有額外 config 的寫法，因為我們想監聽「整個 toods」的內容，而 todos 顯然是一個 reference type，所以必須讓他用 deep 模式來比對，否則預設只會用 shallow 來做。

如果你想監聽的值是單純的 primitive type，那可以簡化成這樣：

export default {
  data() {
    return {
      todos: [],
      filter: 'all'
    }
  }
  watch: {
    // 監聽 filter 這個字串
    filter() {
      // do something when filter is changed
    }
  }
}

想知道更多用法可以參考官方文件。