Vue3里computed和function该咋选？看完这篇不纠结

日常写Vue3项目时，不少同学对着代码犯愁：计算属性（computed）和方法（function）到底有啥区别？啥时候用computed，啥时候用function？今天咱们从功能本质、执行时机、性能、适用场景这几个方向掰碎了聊，看完你就有数了~

先搞懂：computed和function各自是干啥的？

你可以把computed理解成“智能缓存计算器”——它专门处理“基于响应式数据的计算逻辑”，而且会自动缓存结果，只有当它依赖的响应式数据变了，才会重新计算；没变化的时候，直接拿缓存的结果用。

而function（一般写在methods里，或者<script setup>里的普通函数）是“执行逻辑的工具”——你调用它，它就执行里面的代码，每次调用都重新跑一遍逻辑，不管结果有没有变。

举个🌰 ：做个“拼接全名”的功能

<template>
  <div>
    姓：{{ firstName }} | 名：{{ lastName }} <br>
    全名（computed版）：{{ fullName }} <br>
    全名（function版）：{{ getFullName() }}
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
const firstName = ref('李')
const lastName = ref('四')
// computed版本：依赖firstName和lastName
const fullName = computed(() => {
  console.log('computed执行啦！')
  return firstName.value + lastName.value
})
// function版本：每次调用都执行
function getFullName() {
  console.log('function执行啦！')
  return firstName.value + lastName.value
}
</script>

现在看控制台：

• 页面第一次渲染时，computed和function都会执行（各打印一次）。
• 要是修改firstName（比如改成“王”），computed会重新执行1次（因为依赖变了），而function会在组件重新渲染时再执行1次（因为组件渲染时要重新算模板里的{{ getFullName() }}）。

触发时机有啥不一样？

这是两者最核心的区别，直接影响你啥时候该选谁。

👉 computed的触发逻辑：“依赖变了才干活”

computed内部有个依赖跟踪+缓存机制：

1. 它会自动识别自己依赖了哪些响应式数据（比如上面的firstName和lastName）。
2. 只有这些依赖的数据发生变化时，computed才会重新计算结果；如果依赖没变化，哪怕组件重新渲染N次，computed也只会返回之前缓存的结果。

👉 function的触发逻辑：“调用一次干一次”

写在methods里的函数（或普通函数），触发时机由调用场景决定：

• 如果在模板里用（比如{{ getFullName() }}），组件每次渲染都会执行这个函数（不管数据有没有变化）。
• 如果是通过事件调用（比如@click="handleClick"），事件触发时执行。

性能表现差多少？

性能差异是选computed还是function的关键参考。

👉 computed：缓存兜底，减少重复计算

假设你做一个“购物车总价计算”功能，总价依赖“商品列表”和“每个商品的单价、数量”，用computed的话：

• 只有当某个商品的单价/数量变了，或者商品列表新增/删除了，computed才会重新计算总价。
• 其他时候（比如用户点了个不影响商品的按钮），直接用缓存的总价，不用重复计算。

这种“只在必要时计算”的特性，能帮你省很多性能，尤其是计算逻辑复杂、依赖数据多但变化少的场景。

👉 function：频繁调用可能拖慢页面

如果把“计算总价”写成function，并且在模板里调用（比如表格里每个商品行都调用一次），会发生啥？

• 组件每次渲染（哪怕只是无关数据变化），这个函数都会被调用N次（N是商品数量）。
• 要是商品有100个，每次渲染就执行100次计算逻辑，页面很容易变卡。

如果你只是在事件里调用function（比如点击按钮时计算一次），性能问题不大——毕竟调用次数少，但如果是模板里频繁调用复杂function，一定要警惕性能开销！

啥场景用computed，啥场景用function？

理解了本质和性能，再看场景就清晰了~

✅ 优先用computed的场景

1. 需要基于响应式数据做“缓存计算”
   购物车总价、列表过滤（根据搜索关键词过滤表格数据）、拼接字符串（像前面的全名）、数值计算（比如折扣后价格）……这些场景的共同点是：结果由响应式数据决定，且数据变化不频繁。

2. 需要在模板中“被动更新”结果
   比如模板里显示{{ totalPrice }}（computed），你不用手动调用函数，Vue会自动在依赖变化时更新DOM，代码更简洁。

✅ 优先用function的场景

1. 处理“事件逻辑”
   比如点击按钮跳转页面、提交表单、触发弹窗……这些动作是“用户主动触发”的，用function写在@click里，逻辑清晰。

2. 一次性逻辑/无响应式依赖的逻辑
   格式化时间（但时间不是响应式数据，每次调用格式可能不同）、处理固定参数的工具函数（比如把数字转成百分比，参数是固定传入的）……这些场景不需要缓存，每次调用重新算也没问题。

3. 异步逻辑/副作用操作
   computed要求返回同步值，不能写异步代码（比如async/await），如果要发请求、操作DOM、设置定时器这些“副作用”逻辑，必须用function。

容易踩的坑是啥？

最后聊聊新手常犯的错误，避开这些坑能少走弯路~

🔥 坑1：把computed当function用，写异步逻辑

computed的回调必须返回一个同步值，不能用async，也不能在里面发请求、操作DOM，要是你需要异步计算，得用watch或者function结合await。

🔥 坑2：在模板里频繁调用复杂function

前面说过，模板里的function每次渲染都执行，如果是循环渲染（比如v-for列表），再加上函数里有复杂计算，页面会巨卡，这种情况一定要换成computed或者把逻辑拆到computed里。

🔥 坑3：误解computed的“缓存”适用场景

不是所有计算逻辑都适合用computed！如果一个计算属性依赖10个响应式数据，而且这10个数据每秒变一次，那computed的缓存优势就没了（因为依赖频繁变化，每次都要重新计算），这种高频变化的场景，用function反而更直接。

一句话选法

• 要缓存+依赖响应式数据 → 用computed；
• 要事件处理+一次性逻辑+异步/副作用 → 用function。

其实记住核心区别：computed是“智能缓存的计算属性”，function是“灵活调用的工具函数”，根据场景选，代码既高效又好维护~

（如果还有疑问，评论区留言，咱们接着唠~）