Vue中computed和watch咋选？区别、场景一次讲透

terry 10小时前阅读数 71 #SEO

文章标签 computed；watch

做Vue开发时，不少同学会纠结：计算属性（computed）和侦听器（watch）到底有啥不一样？啥时候用computed，啥时候用watch？今天咱就把这俩的区别、用法、场景掰碎了讲清楚。

先搞懂：computed是干啥的？

computed叫计算属性，作用是基于已有响应式数据，生成一个新的响应式结果，举个例子：

假设做个用户信息展示，页面需要显示“姓 + 名”组成的全名，姓（firstName）和名（lastName）是两个响应式数据，那用computed就特合适：

export default {
  data() {
    return {
      firstName: '张',
      lastName: '三'
    }
  },
  computed: {
    fullName() {
      return this.firstName + this.lastName;
    }
  }
}

页面里直接用{{ fullName }}，当firstName或lastName变化时，fullName会自动更新。

但computed不止是“拼接字符串”这么简单，它自带缓存——只要依赖的响应式数据（比如这里的firstName、lastName）没变化，多次访问fullName时，不会重新执行函数，直接用缓存结果，这能减少不必要的计算，提升性能。

computed更像“主动生成数据”：你需要一个基于已有数据推导出来的新数据时，优先考虑computed。

再看：watch主要用来做什么？

watch叫侦听器，核心是“监听某个响应式数据的变化，然后执行一段逻辑”，它更像“被动响应变化”，举几个典型场景：

异步操作：比如用户登录后，token变化了，需要用新token发请求拉取用户信息，因为发请求是异步的，这时候用watch监听token：

export default {
data() {
  return { token: '' }
},
watch: {
  token(newVal) {
    // 新token来了，发请求
    axios.get('/api/user', { headers: { token: newVal } })
      .then(res => { ... });
  }
}
}

复杂逻辑响应：比如表单里多个字段变化后，要同时更新多个状态、调用多个方法，或者监听路由参数变化（比如Vue Router的$route.params），切换页面时重置组件状态。
防抖/节流场景：比如搜索框实时搜索，用户输入时频繁触发请求不好，用watch结合防抖函数，等用户停止输入再发请求（虽然computed也能实现，但watch的写法更直观）。

和computed最大的不同是：watch没有缓存（除非手动配置），只要监听的数据变化，就会执行回调；而且watch允许做异步操作，因为它不需要返回值，只需要“数据变了就执行逻辑”。

computed和watch核心区别在哪？

光看概念可能有点懵，咱从5个维度对比，一眼看清差异：

对比维度	computed（计算属性）	watch（侦听器）
核心作用	生成基于依赖的新响应式数据	监听数据变化后执行副作用
依赖关系	依赖多个响应式数据（也可单个）	只监听一个或多个指定数据
触发时机	依赖变化时自动更新结果	监听的数据变化时执行回调
缓存机制	有缓存，依赖不变则复用结果	无缓存（除非手动配置`immediate`/`deep`）
异步支持	不支持（必须同步返回结果）	支持（回调里可写异步逻辑）

举个更具体的例子感受下：
比如做“购物车总价计算”，商品列表（goodsList）和每个商品的数量（num）是响应式数据，总价（totalPrice）由这两个数据计算而来——这时候用computed，因为是“基于已有数据生成新数据”。

但如果需求是“总价变化后，自动把最新价格上报给后端”，这时候就要用watch监听totalPrice的变化，在回调里发请求——因为这是“数据变化后执行副作用（发请求）”。

实际开发里咋选更合适？

别死记硬背区别，结合场景选才是王道，分享3个实战思路：

场景1：需要“推导新数据”时，选computed

只要你需要一个由其他响应式数据计算而来的新数据，优先用computed。

拼接字符串（如用户全名）
计算列表过滤/排序后的结果（如“已完成的任务列表”）
购物车总价、折扣后价格等

这些场景的共性是：结果由已有数据推导，且需要响应式更新，computed的缓存还能避免重复计算，性能更优。

场景2：需要“数据变化后执行复杂逻辑”时，选watch

当数据变化后，要做的事不是“生成新数据”，而是“执行一段逻辑（比如异步请求、修改多个状态、调用第三方库）”，这时候必须用watch，典型例子：

用户登录后，token变化 → 发请求拉取用户信息（异步操作）
路由参数变化 → 重置组件内的表单、分页等状态变化 → 结合防抖做实时搜索（异步+节流/防抖）

场景3：两者都能实现？看“是否需要异步”

有些简单场景，监听输入框内容，实时显示长度”，用computed和watch都能写：

// computed写法
computed: {
  inputLength() {
    return this.inputVal.length;
  }
}
// watch写法
watch: {
  inputVal(newVal) {
    this.length = newVal.length;
  }
}

这时候咋选？看是否需要异步，如果只是同步计算长度，computed更简洁；如果输入后要发请求（比如根据输入内容查数据库），必须用watch（因为computed不能写异步）。

容易踩的坑和注意点

用的时候这些细节要留心，不然容易出bug：

computed里别“反向修改依赖”

比如在computed的函数里，修改它依赖的响应式数据，会导致循环更新，举个错例：

computed: {
  fullName() {
    // 错误！这里修改了firstName，而fullName又依赖firstName
    this.firstName = '李'; 
    return this.firstName + this.lastName;
  }
}

computed的职责是“计算结果”，不是“修改依赖”，否则会触发无限循环更新，页面直接崩掉。

watch的deep和immediate要慎用

deep: true：开启深度监听，比如监听对象或数组的内部变化，但性能开销大，尽量只在必要时用（比如监听对象里的某个深层属性，也可以用字符串路径'obj.prop'监听，比deep更轻量）。
immediate: true：页面初始化时就执行一次回调，如果需要“页面加载时就根据初始值执行逻辑”，才加这个配置，否则别乱加，避免重复执行。