Vue3入门指北（十）侦听器

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第二十八天，点击查看活动详情

前言

在某些场景下，我们可能需要监听某一地方的结果去修改另一个地方的状态。我们就可以通过使用watch（）函数，来实现状态变化时，触发内部的回调函数。

watch()

在组合式API中，可以如下使用：

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

const num = ref(0)

// 可以直接侦听一个 ref
watch(num, (newValue, oldValue) => {
  // 执行相应的操作
  ...
})
</script>

<template>
  <p>{{ num }}</p>
</template>

当然你也可以监听计算属性、响应式对象或者getter函数，也可以监听多个数据源：

// 多个来源组成的数组
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x is ${newX} and y is ${newY}`)
})

需要注意的一点是，不能把响应式对象的属性当作监听的数据源：

const math = reactive({ num: 0 })

watch(math.num, (value) => {
  console.log(`结果是：${value}`)
})

如果想要监听的话，需要通过getter函数的形式：

watch(
  () => math.num,
  (value) => {
    console.log(`结果是：${value}`)
  }
)

watchEffect()

熟悉vue2中的 watch 的同学，应该知道他是懒执行的，而vue3中也一样，只有当监听的数据源发生变化的时候，才会执行内部的回调。但是在某些情况下，我们可能需要在监听器创建时，执行一边回调。对于这种情况，我们就可以使用watchEffect()来解决。

const num = ref(0)
const busNum = ref(0)

function add() {
  busNum = num + 1
}
add()
watch(num, add)

针对如上的情况，我们就可以通过watchEffect简化。watchEffect会立即执行一百年回调函数，并且自动追踪并分析出响应源。

watchEffect( () => {
  busNum = num + 1
})

所以说，如上的例子中，回调会立即执行，并且会把num作为监听的数据源，在每次num更新的时候，其内部的回调会再次执行。

watchEffect只会追踪同步代码，并分析数据源。