在 Vue.js 开发中，computed 和 watch 是两个核心概念，它们都用于响应数据变化，但各有侧重。很多初学者容易混淆，本文将结合实际场景，详细拆解它们的区别与适用场景，帮助你写出更高效、更清晰的代码。

1. computed：计算属性

计算属性是基于已有数据“推导”出的新数据。Vue.js 会缓存计算结果，只有当依赖的响应式数据发生变化时，才会重新计算。这种特性避免了不必要的重复计算，提升了性能。

适用场景

• 对数组进行过滤、排序或映射等操作，例如根据搜索关键词动态过滤用户列表。
• 将一个或多个数据组合成新的展示形式，比如将 firstName 和 lastName 拼接成全名。
• 需要复杂逻辑运算时，将逻辑封装在计算属性中，保持模板简洁可维护。

示例

<template>
  <p>全名：{{ fullName }}</p>
</template>
<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  }
}
</script>

2. watch：侦听器

侦听器用于观察一个数据的变化，并在变化时执行相应的操作（如异步请求、复杂逻辑）。它没有缓存机制，每次数据变化都会触发回调函数。

适用场景

• 需要在数据变化时执行异步或开销较大的操作，例如根据搜索框内容变化发送网络请求。
• 监听非响应式数据的变化（例如浏览器的 URL 变化）。
• 当需要执行特定操作而不只是更新视图时，例如保存草稿、动画触发等。

示例

<template>
  <input v-model="searchQuery">
</template>
<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  watch: {
    searchQuery(newVal, oldVal) {
      // 防抖处理，然后发送请求
      this.debouncedFetch(newVal)
    }
  }
}
</script>

3. 核心区别总结

• 缓存：computed 有缓存，依赖不变则直接返回缓存，提高性能；watch 无缓存，每次变化都执行。
• 异步：computed 必须是同步操作，不能执行异步代码；watch 可以执行异步操作。
• 适用性：computed 适用于由已有数据推导新数据；watch 适用于执行副作用操作（如网络请求、手动操作 DOM）。

4. 实际开发中的选择建议

大多数情况下，能用 computed 实现的优先用 computed，因为它更高效且易于测试。只有当需要执行异步任务或复杂副作用时，才考虑使用 watch。乐柠教育在前端课程中，会通过大量实战案例帮助学员深入理解这些响应式原理，让你在项目中游刃有余。

例如，在做一个搜索组件时，数据过滤用 computed，搜索建议的请求用 watch 配合防抖。这样的组合既保证了界面流畅，又实现了实时搜索功能。

5. 小结

掌握 computed 和 watch 的区别，是 Vue.js 进阶的关键一步。记住：computed 用于声明式地计算派生数据，watch 用于响应数据变化执行命令式操作。如果你希望系统学习更多 Vue.js 高级技巧，乐柠教育的前端全栈课程将带你从原理到实战，全面提升开发能力。

如需系统学习相关技术，欢迎了解乐柠教育课程与实训项目。