Vue.js的computed咋用？理清场景、缓存和区别才是关键

computed是干啥的？和methods有啥核心区别？

先想明白：computed是“计算属性”，作用是基于已有的响应式数据（比如data、props），生成一个新的衍生值，举个实际例子：购物车页面里，每个商品有单价和数量，要实时算总价，这时候用computed就很合适——它会自动跟踪“哪些数据变了”，只在依赖变化时重新计算，否则直接用缓存结果。

那和methods有啥不一样？看个对比：

假设要做“把姓名转成大写”的功能：

• 用methods的话，每次组件渲染（哪怕无关数据变化），调用methods里的函数都会重新执行；
• 用computed的话，只有依赖的name变化时，才会重新计算，否则直接拿缓存好的结果。

简单说，computed是“懒计算+缓存”，methods是“每次调用都执行”，要是做复杂计算（比如遍历大数组过滤数据），用computed能避免重复计算，性能好很多；要是纯事件触发（比如点击按钮执行逻辑），那还是得用methods。

computed里能写异步代码吗？为啥总不生效？

直接说结论：computed里不适合写异步逻辑（比如setTimeout、axios请求），因为computed的设计逻辑是“同步返回一个计算后的值”，异步操作没法及时把结果返回给computed，自然就“不生效”。

举个反面例子：想通过异步请求拿用户昵称，然后拼接成欢迎语，要是在computed里写：

computed: {
  welcomeMsg() {
    axios.get('/user').then(res => {
      return `欢迎${res.data.nickname}`
    })
    // 这里根本没返回值！因为axios是异步的，函数执行完时请求还没结束
  }
}

这时候页面上welcomeMsg会是undefined，完全达不到预期。

那要处理异步场景咋办？换成watch更合适，比如监听用户ID变化，发起请求，拿到数据后更新data里的昵称，再让computed依赖这个昵称：

data() {
  return {
    userId: 1,
    nickname: ''
  }
},
watch: {
  userId(newId) {
    axios.get(`/user/${newId}`).then(res => {
      this.nickname = res.data.nickname
    })
  }
},
computed: {
  welcomeMsg() {
    return `欢迎${this.nickname}`
  }
}

这样userId变化时，watch触发请求更新nickname，welcomeMsg作为computed依赖nickname，自然就能正确渲染了。

computed的缓存啥时候生效？啥时候会“失灵”？

computed的缓存逻辑是：只有依赖的响应式数据变化时，才会重新计算；否则直接复用上次结果，这里的“响应式数据”，指的是data、props里声明的属性（因为Vue会对这些数据做劫持，实现响应式）。

缓存生效的场景：

比如data里有count，computed里写doubleCount() { return this.count * 2 }，只要this.count不变，不管页面渲染多少次，doubleCount都从缓存拿结果，不会重复计算。

缓存“失灵”（不更新）的场景：

• 依赖非响应式数据：如果computed里用了没在data/props里声明的变量，Vue没法跟踪它的变化，比如在script里直接声明let num = 1，然后computed依赖num，修改num时，computed完全没反应——因为num不是响应式的。
• 依赖的响应式数据没真的变化：比如给对象赋值新属性（但没触发响应式更新），或者数组用下标修改元素（this.list[0] = 1），Vue检测不到变化，computed也不会更新，这时候得用this.$set来触发响应式更新。

哪些场景用computed能优化性能？

computed的缓存特性，在这些场景下能帮我们少写重复代码、少做重复计算：

场景1：复杂数据的过滤/排序

比如页面有个大表格，要根据搜索关键词过滤数据，如果用methods，每次组件渲染（哪怕关键词没变化）都会重新遍历整个数组；用computed的话，只有list或searchKey变化时才会重新过滤：

computed: {
  filteredList() {
    return this.list.filter(item => item.name.includes(this.searchKey))
  }
}

场景2：多数据的组合与格式化

用户信息需要拼接“姓名+性别+年龄”，或者时间戳转成友好格式（5分钟前”），把这些逻辑放computed里，数据变化时自动更新，不用在模板里写一堆逻辑：

computed: {
  userInfo() {
    return `${this.name}（${this.gender}），${this.age}岁`
  },
  friendlyTime() {
    return formatTime(this.timestamp) // 假设formatTime是时间格式化函数
  }
}

场景3：避免重复计算

如果多个地方需要同一个计算结果（比如购物车总价在头部导航和底部结算栏都要显示），用computed只算一次，缓存起来复用；要是用methods，每个地方调用都会重新算一遍，性能差很多。

computed和watch怎么选？别再用错场景！

很多人分不清这俩，其实核心区别是“计算衍生值” vs “响应变化执行操作”：

特性	computed	watch
核心作用	基于依赖生成新值（侧重“计算”）	监听数据变化，执行副作用（侧重“响应”）
依赖关系	可以依赖多个响应式数据	可以监听单个/多个数据（用数组）
返回值	必须返回一个值（给模板或其他逻辑用）	不需要返回值，执行操作即可
适用场景	购物车总价、数据过滤、格式转换等	异步请求、DOM操作、复杂逻辑触发等

举个直观例子：

• 要把“用户名+用户ID”拼成标题 → 用computed（计算衍生值）；
• 用户登录状态从false变true后，自动跳转到首页 → 用watch（响应变化执行跳转操作）。

开发中用computed容易踩哪些坑？咋避？

用computed时，这些“坑”要特别注意：

坑1：依赖非响应式数据，结果不更新

比如想根据外部变量status计算状态文本，但status没放在data里：

let status = 'pending' // 非响应式！
export default {
  computed: {
    statusText() {
      return status === 'pending' ? '处理中' : '已完成'
    }
  }
}

这时候修改status，statusText完全没变化。解决方法：把status放到data里，让它变成响应式数据。

坑2：在computed里修改依赖数据，导致循环更新

computed的设计是“纯计算”，如果在里面修改依赖的data，会触发自己重新计算，陷入死循环：

computed: {
  totalPrice() {
    this.count += 1 // 错误！修改了依赖的count
    return this.goods.reduce((sum, item) => sum + item.price, 0)
  }
}

解决方法：计算逻辑和数据修改要分开，修改数据放到methods或watch里，computed只负责返回计算结果。

坑3：误解“缓存”，以为每次访问都执行

有人会疑惑：“我明明改了数据，computed咋没反应？” 本质是没理解缓存逻辑——只有依赖的响应式数据变化时，computed才会重新计算，如果数据没触发响应式更新（比如直接改数组下标、对象属性），得用this.$set来触发更新。

最后总结下：computed是Vue里处理“依赖计算+缓存复用”的利器，理解它的设计逻辑（响应式依赖、同步返回、缓存机制），分清和methods、watch的区别，才能在开发中少踩坑、写出更高效的代码～