點燈坊

失くすものさえない今が強くなるチャンスよ

使用 watch() 追蹤 State 處理 Side Effect

Sam Xiao's Avatar 2024-02-01

除了使用 computed() 為特定 State 加工外，Vue 還提供 watch() 可追蹤特定 State 處理 Side Effect。

Version

Vue 3.4

Composition API

<template>
  <div>{{ count }}</div>
</template>

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

let count = ref(0)
onMounted(() => setInterval(() => count.value++, 1000))
watch(count, (newValue) => console.log(newValue))
</script>

Line 8

let count = ref(0)
  • ref()：宣告 count state

Line 9

onMounted(() => setInterval(() => count.value++, 1000))
  • setInterval()：每一秒鐘對 count state 遞增

Line 10

watch(count, (newValue) => console.log(newValue))
  • watch()：追蹤 count state，當 count state 一有變動，就會執行傳入 function
  • 傳入 function 可接受兩個參數：newValue 與 oldValue

console.log() 因為不是 return 值，所以算 side effect

Options API

<template>
  <div>{{ count }}</div>
</template>

<script>
export default {
  data: () => ({
    count: 0
  }),
  mounted() {
    setInterval(() => this.count++, 1000)
  },
  watch: {
    count(newValue) {
      console.log(newValue)
    }
  }
}
</script>
  • 最後附上相同功能的 Options API 供參考
  • State 宣告在 data() function
  • watch() function 改成 watch Object，將要偵測的 state 以 method 命名

Conclusion

  • Watch 在 Options API 與 Composition API 下有顯著差異
  • Watch 在 Options API 是以 method 形式宣告在 watch Object 下
  • Watch 在 Composition API 是以 function 傳入 watch()

Reference

Vue, 偵聽器

# Vue