computed 和 watch 有什么区别？

详细解析#

对比#

computed#

• 缓存基于响应式依赖：依赖变化时只做标记，下次读取时才重新计算，原理详见 Vue 3 的响应式原理
• 在模板中调用方法也能得到同样的结果，但方法每次渲染都会执行一遍，computed 只在依赖变化后才重新计算
• getter 中不要修改其他状态、发异步请求或操作 DOM
• 可以通过 get / set 定义可写的计算属性，在 set 中修改源数据。比如"全选"复选框：get 判断是否每一项都已勾选，set 把每一项都设为同样的状态

watch#

数据源可以是 ref、reactive 对象、getter 函数，或者由它们组成的数组。

• 直接监听一个 reactive 对象时，会隐式开启深度监听，任何嵌套属性变化都会触发回调
• 监听 reactive 对象的某个属性时要写成 getter，例如 watch(() => state.count, cb)；写成 watch(state.count, cb) 传进去的只是一个数字，监听不到变化

watchEffect：不需要指定数据源，创建时立即执行一次，并自动收集回调中用到的响应式数据作为依赖。它只追踪同步执行部分访问的数据，第一个 await 之后访问的数据不会被收集。

停止、暂停和清理#

• watch 和 watchEffect 都返回一个函数，调用它就能停止监听。在 setup 中同步创建的侦听器会在组件卸载时自动停止，在异步回调中创建的要手动停止
• Vue 3.5 起，这个返回值上还有 pause() 和 resume() 方法，可以暂停和恢复监听。暂停期间如果数据变了，恢复后会补执行一次回调
• 清理副作用：用回调的第三个参数 onCleanup 注册清理函数，它会在下一次回调执行前、以及侦听器停止时调用，适合取消上一次还没完成的请求。Vue 3.5 起也可以从 vue 中导入 onWatcherCleanup，但它只能在回调的同步部分调用，不能放在 await 之后

代码示例#

搜索框：关键词变化时发请求，并取消上一次还没完成的请求，避免旧请求后返回、覆盖新结果。

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

const keyword = ref('')
const results = ref([])

watch(keyword, async (value, oldValue, onCleanup) => {
  if (!value.trim()) {
    results.value = []
    return
  }

  const controller = new AbortController()
  // 关键词再次变化时，会先执行这里注册的清理函数，取消这次请求
  onCleanup(() => controller.abort())

  try {
    const res = await fetch(`/api/search?q=${encodeURIComponent(value)}`, {
      signal: controller.signal,
    })
    results.value = await res.json()
  } catch (err) {
    // 被取消的请求会抛出 AbortError，忽略即可
    if (err.name !== 'AbortError') console.error(err)
  }
})
</script>

<template>
  <input v-model="keyword" placeholder="搜索文章" />
  <ul>
    <li v-for="item in results" :key="item.id">{{ item.title }}</li>
  </ul>
</template>

面试官可能追问#

易错点#

• watch(state.count, cb) 监听不到变化，要写成 watch(() => state.count, cb)
• 对象被原地修改时，深度监听回调中的新值和旧值指向同一个对象，无法直接对比
• watchEffect 只收集同步部分的依赖，await 之后用到的数据变化时不会触发它