Vue－Composition API（watch & watchEffect）

會讓人想起 React 的東西。

簡述

watch 的用法就跟 options API 中的用法差不多，這邊就不多解釋，主要會特別介紹的是 watch Effect。

這邊先來看段 code：

<template>
  <div class="home">
    <input type="text" v-model="search" placeholder="search" />
    <br />
    <!-- 更新 search2 不會有任何效果 -->
    <input type="text" v-model="search2" placeholder="search2" />
    <br />
    <button @click="onCancel">Canel Watch & Effect</button>
  </div>
</template>

<script>
  import { ref, watch, watchEffect } from 'vue'

  export default {
    setup() {
      const search = ref('')
      const search2 = ref('')
      // 回傳值 = stopHandler
      const stopWatchSearch = watch(
        search,
        (now, prev) => {
          console.log('run watch')
          console.log('new', now)
          console.log('old', prev)
        },
        {
          deep: true
        }
      )
      // 回傳值 = stopHandler
      const stopWatchEffect = watchEffect(() => {
        console.log('run effect', search.value)
      })

      const onCancel = () => {
        stopWatchSearch()
        stopWatchEffect()
      }

      return { search, search2, stopWatchSearch, onCancel }
    }
  }
</script>

附註：如果想實際玩玩看的話能可以到這裡。

這個範例其實是用 watch 和 watchEffect 去監聽 search 和 search.value 的值，不過這兩個的行為有幾個差別：

1. watch 在第一次 reder 時不會被執行，watchEffect 會
2. watch 必須明確的指定要「監聽哪個值」他才會做出反應，而 watchEffect 則是會自動根據 callback 所「用到的值」來做出反應（這邊用到的值是 search.value）

另外這兩個 hook 都會回傳一個 stopHandler，是拿來取消 watch 和 watchEffect 的效果。

總而言之，watchEffect 就跟 React useEffect 有點像，只是 Vue 已經自動幫你處理好 dependencies 的問題了。

Cleanup function

這邊要順便提一下 watchEffect 其實有提供「Clean up」的功能，用起來會像這樣：

watchEffect((onCleanup) => {
  onCleanup(() => console.log('clean up'))
})

就跟 React 裡面的 cleanup function 一樣，他會在 unmount 的時候執行。