在Vue的世界中，我们使用的是声明式编程，也就是我们操作的是数据，再将数据绑定到视图上。当数据发生变化时，视图也会相应地更新。两个实现该机制的关键功能是watch和computed。其实，这两个功能存在许多相似之处，但在实际使用过程中也有所不同。

Vue3中Watch和Computed的基本使用

首先，我们来看一下Vue3中watch和computed的基本使用方式。

Computed：

<template>
  <div>{{ fullName }}</div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const firstName = ref('John')
    const lastName = ref('Doe')

    const fullName = computed(() => `${firstName.value} ${lastName.value}`)

    return { fullName }
  }
}
</script>

Watch：

<template>
  <div>{{ fullName }}</div>
</template>

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

export default {
  setup() {
    const firstName = ref('John')
    const lastName = ref('Doe')

    const fullName = ref('')

    watch([firstName, lastName], ([newFirstName, newLastName]) => {
      fullName.value = `${newFirstName} ${newLastName}`
    }, { immediate: true })

    return { fullName }
  }
}
</script>

使用场景

计算值的显示

当我们需要从多个响应式源派生出新的数据时，computed是一个很好的选择。在以上的例子中，我们将firstName和lastName合并成了一个新的字符串fullName。计算属性的结果会被缓存，直到它的依赖关系发生变化才会重新计算。因此，如果firstName和lastName都没有发生变化，每次访问fullName时，都将返回之前计算的结果，而不是重新执行函数。

响应值的变化

有时候，我们希望在响应式数据发生变化时执行具体的操作，而不是计算新的值。在这个场合下，我们应该使用watch。在上面的watch例子中，我们将firstName和lastName的变化绑定到了一个生成fullName的函数上。这样，只有当firstName或lastName发生改变时，watch才会重新运行这个函数，与computed不同，每次触发watch都会执行回调并进行相应的操作。

异步操作

在Vue3中，computed仅能用同步函数，而watch则可以用于异步操作。比如，我们可以利用watch effect来发起API请求：

import { ref, watch } from 'vue'

export default {
  setup() {
    const userId = ref('')
    const user = ref(null)

    watch(userId, async (newUserId) => {
      const response = await fetch(`xxxxx`)
      user.value = await response.json()
    })

    return { userId, user }
  }
}

在这个示例中，我们使用watch来监听userId的变化，并在它发生变化时发送API请求。如果你试图在computed中完成相同的事情，会发现这并不可行，因为你不能在计算属性中返回Promise。

总结起来，Vue3中的watch和computed主要所针对的场景分别是：当需要对数据变动进行相应的操作时，选择watch；当需要根据多个响应式变量计算出新的值的时候，选择computed。不同的需求对应不同的工具，理解它们各自的特性和适用场景，我们便可以更好地使用Vue3来构建应用。 #日新计划更文活动

Vue3：watch和computed的使用场景

Vue3中Watch和Computed的基本使用

使用场景

计算值的显示

响应值的变化

异步操作