Vue3计算属性与侦听器的核心差异是什么？如何快速选对使用场景？

kknone
140 阅读17分钟

计算属性：响应式数据的“衍生咖啡机”

在Vue3中，计算属性（Computed）是处理衍生值的“神器”——它基于响应式依赖自动计算结果，并缓存这个结果。只有当依赖的响应式数据发生变化时，计算属性才会重新计算；否则，它会直接复用之前的缓存结果，避免不必要的性能消耗。

核心特性：缓存与依赖追踪

计算属性的本质是纯函数（输入相同则输出相同，无副作用），它的缓存机制是其与普通方法的核心区别。比如，我们需要将用户的firstName和lastName合并为完整姓名：

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

const firstName = ref('John') // 响应式依赖1
const lastName = ref('Doe')   // 响应式依赖2

// 计算属性：基于依赖衍生完整姓名
const fullName = computed(() => {
  console.log('计算fullName...') // 仅当依赖变化时打印
  return `${firstName.value} ${lastName.value}`
})
</script>

<template>
  <p>{{ fullName }}</p> <!-- 首次渲染时计算，之后依赖不变则复用缓存 -->
  <p>{{ fullName }}</p> <!-- 复用缓存，不重新计算 -->
</template>

运行这段代码，你会发现console.log只执行一次——即使模板中多次使用fullName，计算属性也不会重复计算。而如果用普通方法（function getFullName() { ... }），每次渲染都会执行函数，当页面复杂时会明显影响性能。

典型场景：需要缓存的衍生值

计算属性适合以下场景：

  • 字符串拼接（如fullName）
  • 数值计算（如购物车总价totalPrice）
  • 列表过滤（如filteredList，但注意：如果列表是大型数组，过滤操作本身的性能消耗可能超过缓存的收益，此时需权衡）

侦听器：响应式数据的“变化报警器”

如果说计算属性是“安静的衍生者”，侦听器（Watch/WatchEffect）就是“活跃的响应者”——它专门处理副作用操作（如异步请求、DOM修改、日志记录等非纯函数操作）。当监听的响应式数据变化时，侦听器会触发预先定义的回调函数，执行这些副作用。

Vue3提供两种侦听器：watch（精准监听）和watchEffect（自动追踪）。

watch：精准控制的“定点报警器”

watch是惰性的——默认情况下，只有当监听的数据源发生变化时才会执行回调。它适合需要明确控制触发时机的场景，比如：

  • 监听用户输入并发起搜索请求（避免初始空请求）
  • 验证密码一致性（仅当确认密码变化时触发）
<script setup>
import { ref, watch } from 'vue'

const password = ref('')
const confirmPassword = ref('')
const passwordError = ref('')

// 监听confirmPassword的变化，验证密码一致性
watch(confirmPassword, (newVal, oldVal) => {
  if (newVal !== password.value) {
    passwordError.value = '两次密码不一致'
  } else {
    passwordError.value = ''
  }
})
</script>

<template>
  <input v-model="password" type="password" placeholder="密码" />
  <input v-model="confirmPassword" type="password" placeholder="确认密码" />
  <p class="error">{{ passwordError }}</p>
</template>

watch的进阶用法：

  • 监听多个数据源：watch([a, b], (newValues, oldValues) => { ... })
  • 深度监听对象：watch(() => user.value.address, (newAddr) => { ... }, { deep: true })（监听对象内部属性变化）
  • 立即执行：watch(..., { immediate: true })（初始化时就执行一次回调）

watchEffect：自动追踪的“智能报警器”

watchEffect是立即执行的，并且会自动追踪回调函数中的响应式依赖。它适合需要快速响应多个依赖的场景，比如：

  • 监听窗口尺寸变化并更新页面标题
  • 监听表单输入并实时保存草稿
<script setup>
import { ref, watchEffect } from 'vue'

const width = ref(window.innerWidth)
const height = ref(window.innerHeight)

// 自动追踪width和height的变化，更新页面标题
watchEffect(() => {
  document.title = `窗口尺寸：${width.value}x${height.value}`
})

// 监听窗口resize事件，更新响应式数据
window.addEventListener('resize', () => {
  width.value = window.innerWidth
  height.value = window.innerHeight
})
</script>

watchEffect的优势是简洁——不需要显式指定监听的数据源，Vue会自动收集回调中的响应式依赖。但它的缺点也很明显：无法直接获取旧值（因为依赖是自动追踪的），且无法精准控制监听的数据源。

计算属性 vs 侦听器：清晰的功能边界

很多初学者会混淆计算属性和侦听器，其实它们的核心区别在于**“做什么”，而非“怎么用”**。我们可以用一张表格明确两者的边界：

维度计算属性（Computed）侦听器（Watch/WatchEffect）
核心目标生成衍生值（如fullName、totalPrice）执行副作用（如异步请求、DOM操作）
函数性质纯函数（无副作用、输入决定输出）非纯函数（有副作用、可能依赖外部环境）
缓存机制有缓存（依赖不变则复用结果）无缓存（每次触发都执行回调）
触发时机依赖变化时自动更新数据变化时触发（watch惰性，watchEffect立即）
旧值获取无法直接获取旧值watch可以获取旧值，watchEffect不能

直观例子：区分衍生值与副作用

  • 衍生值：根据age计算isAdult（age >= 18）——用计算属性。
  • 副作用：当isAdult变化时，发送请求更新用户权限——用侦听器。

选择策略：一句话搞定“该用谁”

记住这个简单的判断逻辑，90%的场景都能快速决策：

  1. 如果需要“衍生值 + 缓存”：用计算属性（Computed）。
    比如：购物车总价、用户名拼接、状态判断（isAdult）。
  2. 如果需要“副作用 + 联动”：用侦听器（Watch/WatchEffect）。
    • 若需要精准控制触发时机/获取旧值：用watch（比如验证密码一致性、搜索请求）。
    • 若需要自动追踪依赖/立即执行：用watchEffect（比如更新页面标题、实时保存草稿）。
往期文章归档
免费好用的热门在线工具

实战示例：购物车与搜索功能的组合

我们用一个综合示例展示两者的配合——实现一个带搜索功能的购物车：

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

// 1. 响应式数据：购物车列表
const cart = ref([
  { id: 1, name: 'Vue3实战指南', price: 59, quantity: 1 },
  { id: 2, name: 'TypeScript手册', price: 79, quantity: 2 },
  { id: 3, name: '前端工程化', price: 99, quantity: 1 }
])

// 2. 计算属性：购物车总价（衍生值 + 缓存）
const totalPrice = computed(() => {
  return cart.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
})

// 3. 侦听器：搜索功能（副作用 + 联动）
const searchQuery = ref('') // 搜索关键词
const filteredCart = ref([...cart.value]) // 过滤后的购物车

// 监听搜索关键词变化，过滤购物车
watch(searchQuery, (newQuery) => {
  filteredCart.value = cart.value.filter(item => 
    item.name.toLowerCase().includes(newQuery.toLowerCase())
  )
}, { immediate: true }) // 初始化时立即过滤

// 辅助方法：修改商品数量
const updateQuantity = (id, newQty) => {
  const item = cart.value.find(i => i.id === id)
  if (item) item.quantity = newQty
}
</script>

<template>
  <div class="cart-container">
    <!-- 搜索栏 -->
    <input 
      v-model="searchQuery" 
      placeholder="搜索商品..." 
      class="search-input"
    />

    <!-- 购物车列表 -->
    <div class="cart-items">
      <div 
        v-for="item in filteredCart" 
        :key="item.id" 
        class="cart-item"
      >
        <h4>{{ item.name }}</h4>
        <p>价格：{{ item.price }}元</p>
        <input 
          type="number" 
          v-model.number="item.quantity" 
          @input="updateQuantity(item.id, item.quantity)"
          class="quantity-input"
        />
      </div>
    </div>

    <!-- 总价 -->
    <div class="total-price">
      总价：{{ totalPrice }}元
    </div>
  </div>
</template>

<style scoped>
.cart-container { max-width: 600px; margin: 20px auto; }
.search-input { width: 100%; padding: 8px; margin-bottom: 15px; }
.cart-item { border-bottom: 1px solid #eee; padding: 10px 0; }
.quantity-input { width: 60px; padding: 4px; }
.total-price { font-size: 1.2em; font-weight: bold; margin-top: 10px; }
</style>

这个示例中：

  • totalPrice用计算属性：因为它是cart的衍生值，需要缓存（避免每次渲染都重新计算总价）。
  • 搜索功能用watch：因为搜索是副作用操作（修改filteredCart），且需要初始化时立即执行（immediate: true），确保页面加载时就显示过滤后的结果。

课后Quiz：巩固你的理解

问题1：以下场景适合用计算属性还是侦听器？为什么？

场景：根据用户选择的“主题色”（themeColor）和“字体大小”（fontSize），生成CSS变量（--main-color、--font-size），并当CSS变量变化时，自动更新页面的样式。

答案解析：

  • 生成CSS变量：适合用计算属性。因为CSS变量是themeColor和fontSize的衍生值，需要缓存（避免重复生成相同的CSS字符串）。
  • 更新页面样式：适合用侦听器。因为修改页面样式是DOM副作用操作，需要在CSS变量变化时触发。

具体实现：

const themeColor = ref('#2c3e50')
const fontSize = ref('16px')

// 计算属性：生成CSS变量字符串
const cssVars = computed(() => {
  return `--main-color: ${themeColor.value}; --font-size: ${fontSize.value};`
})

// 侦听器：更新页面样式
watch(cssVars, (newVars) => {
  document.documentElement.style.cssText = newVars
}, { immediate: true })

问题2：watch的deep: true选项会影响性能吗？为什么？

答案解析：

会影响性能。因为deep: true会让Vue递归遍历对象的所有属性，监听每个属性的变化。如果对象很大（比如有多层嵌套的属性），递归遍历会消耗较多的性能。

优化建议：优先使用函数式监听（watch(() => obj.value.prop, ...)）代替deep: true，因为函数式监听只会监听指定的属性，而非整个对象。

常见报错与解决方案

在使用计算属性和侦听器时，初学者常遇到以下问题：

报错1：计算属性无限循环

错误表现：Maximum recursive updates exceeded（超过最大递归更新次数）。
原因：计算属性中修改了自身的依赖，导致无限循环。比如：

const count = ref(0)
// 错误：计算属性修改了依赖count
const double = computed(() => {
  count.value++ // 禁止！计算属性不能修改响应式依赖
  return count.value * 2
})

解决：计算属性必须是纯函数，不能修改任何响应式数据。如果需要修改数据，用侦听器代替。

报错2：watch监听对象不触发

错误表现：修改对象的属性时，watch没有触发。
原因：watch默认只监听对象的引用变化（即obj = newObj），不监听对象内部属性的变化（如obj.value.name = 'newName'）。
解决：

  1. 使用函数式监听（推荐）：watch(() => obj.value.name, ...)（监听对象的具体属性）。
  2. 使用deep: true：watch(obj, ..., { deep: true })（监听整个对象的所有属性变化，适合对象较小的场景）。

报错3：watchEffect无法获取旧值

错误表现：需要旧值但无法获取，比如：

const count = ref(0)
watchEffect(() => {
  console.log('旧值：', ???, '新值：', count.value) // 无法获取旧值
})

原因：watchEffect是自动追踪依赖的，Vue无法预先知道哪些依赖会变化，因此无法保存旧值。
解决：如果需要旧值，改用watch：

watch(count, (newVal, oldVal) => {
  console.log('旧值：', oldVal, '新值：', newVal)
})

参考链接：

avatar
文章
阅读
粉丝