Vue3里computed和method该咋选？一篇讲透区别与场景

刚学Vue3的同学,肯定绕不开computed（计算属性）和method（方法）这俩东西，明明看起来都能处理数据逻辑，到底啥时候用computed，啥时候用method？今天咱掰开揉碎了讲区别、场景，以后写代码不纠结～

computed和method各自是干啥的？

先搞懂基本功能,才好对比～

计算属性（computed） 就像个“自动更新的计算器”，你给它一些依赖的响应式数据（比如data、props里的变量），它会基于这些依赖算出一个新结果，而且Vue会帮你缓存这个结果——只要依赖的数据没变化，下次用这个结果时直接拿缓存，不用重新计算。

举个栗子：做购物车时，商品的count（数量）和price（单价）存在data里，用computed写个totalPrice，它就根据count * price算出总价，只要count和price没变，totalPrice就一直用之前算好的数，不用每次渲染都重新乘法运算。

方法（method） 更像“随时能调用的工具函数”，你把逻辑包在method里，需要的时候主动调用它——比如点击按钮时触发，或者在模板里渲染时调用，但注意哦：模板里用method的话，每次组件重新渲染（比如其他数据变了），这个method里的函数就会重新执行一遍。

再举个栗子：在模板里写{{ formatTime(time) }}，用来把时间戳转成“YYYY - MM - DD”格式，只要组件有任何变化导致重新渲染（哪怕time本身没动），formatTime函数就会再跑一次，重新格式化时间。

核心差异：缓存、执行时机这些点咋不一样？

表面看都能处理逻辑,深层差异才是选谁的关键，咱从缓存机制、执行时机、依赖追踪这三点拆解：

缓存机制：computed有缓存，method“现用现做”

computed像“备餐台”：商家做好一份盖饭，只要没人改菜单（依赖不变），下一个点同样盖饭的直接从备餐台拿；
method像“厨房现做”：每次点盖饭，厨房都得重新炒一遍。

举个实际代码的例子：假设要拼接用户全名，firstName和lastName存在data里。

用computed写：

const fullName = computed(() => {
  return firstName.value + ' ' + lastName.value
})

只要firstName和lastName不变，fullName就一直用缓存的拼接结果，哪怕组件里其他不相关数据变了（比如购物车数量），fullName也不会重新计算。

要是用method写：

function fullName() {
  return firstName.value + ' ' + lastName.value
}

然后模板里用{{ fullName() }}，每次组件渲染（比如购物车数量变了导致页面重新渲染），fullName()都会重新执行，重新拼接字符串，要是firstName和lastName很长，或者组件频繁渲染，性能差距会特别明显。

执行时机：computed“惰性求值”，method“叫了就干”

computed是“懒”的——默认不会主动计算，只有当它被使用（比如模板里渲染，或者被其他computed依赖），而且依赖的数据有变化时，才会重新计算。

打个比方：做个“是否显示VIP标识”的computed，依赖是用户积分userScore，只要userScore没涨，这个computed就算定义了，也不会主动去判断“要不要显示VIP”；直到模板里用到<div v-if="isVIP">{{ vipTips }}</div>，或者userScore变化时，它才会触发计算。

method相反,是“主动调用才执行”，比如写个handleVIP()方法，要么在@click="handleVIP"里触发（点击时执行），要么在模板里写{{ handleVIP() }}（渲染时执行），只要调用它，不管依赖变没变，立马执行逻辑。

依赖追踪：computed自动跟踪，method“不管不顾”

Vue的响应式系统能自动识别computed里用了哪些响应式数据（比如data、props里的变量），这些数据就是“依赖”，一旦依赖变了，computed就会更新。

但method里就算用了响应式数据,Vue也不会把method当成“需要追踪依赖”的对象，比如在method里写：

function showVIP() {
  return userScore.value > 1000 ? 'VIP' : '普通用户'
}

当userScore变化时，showVIP()不会自动重新执行，除非你主动调用它（比如在watch里监听userScore变化后调用，或者用@click触发）。

啥场景用computed，啥场景用method？

知道差异后,结合场景选才高效。

computed适合这些场景：

• 基于已有响应式数据生成新数据，且希望缓存优化性能
  

  • 数据格式化：把时间戳转成“YYYY - MM - DD”，只要时间戳不变，格式化结果就缓存着；
  • 依赖多个数据的联动：购物车总价（依赖商品数量、单价、优惠折扣）；
  • 避免重复计算：比如一个复杂的筛选逻辑（依赖列表和筛选条件），用computed只在列表或条件变化时重新计算。

• 需要“属性式”的读写逻辑
  computed还能写setter，实现双向绑定。

  const fullName = computed({
    get() { return firstName.value + lastName.value },
    set(newVal) { 
      // 分割新值，反向更新firstName和lastName
      const [first, last] = newVal.split(' ')
      firstName.value = first
      lastName.value = last
    }
  })

  这种“读 + 写”的逻辑，method做不到（method只是函数，没有这种属性式的读写分离）。

method适合这些场景：

• 事件处理
  按钮点击、表单提交这些需要触发动作的场景，必须用method，比如@click="handleSubmit"，点击时执行提交逻辑。

• 复杂逻辑封装，不需要缓存
  比如封装一个“生成随机邀请码”“导出Excel”的函数，需要的时候调用，不需要缓存结果（因为每次调用结果不同，或逻辑不依赖响应式数据）。

• 模板里的一次性逻辑（但要注意性能）
  比如循环里的渲染函数：<li v-for="item in list">{{ formatItem(item) }}</li>，这种情况如果formatItem的逻辑不依赖响应式数据，或者依赖频繁变化，用method没问题；但如果依赖不变，优先用computed或者v - memo优化，否则每次渲染循环都会执行method，可能卡页面。

• 不依赖响应式数据的工具函数
  比如字符串截断、数组去重、生成UUID这些纯逻辑，放method里随时调用，和Vue的响应式系统无关。

实战里咋选？举个例子对比看

光说不练假把式,写个小案例直观感受～

需求：做个TodoList，需要显示“已完成任务数/总任务数”，还要有个“清空已完成”的按钮。

用computed处理统计，method处理事件

代码结构：

<template>
  <div class="todo-box">
    <p>完成率：{{ doneRate }}</p>
    <button @click="clearDone">清空已完成</button>
    <ul>
      <li v-for="(todo, idx) in todos" :key="idx">
        {{ todo.done ? '✅' : '□' }} {{ todo.text }}
      </li>
    </ul>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
// 模拟任务列表
const todos = ref([
  { done: true, text: '写Vue组件' },
  { done: false, text: '学computed和method' },
  { done: true, text: '优化代码' }
])
// 用computed统计完成率：依赖todos数组
const doneRate = computed(() => {
  const doneCount = todos.value.filter(t => t.done).length
  return `${doneCount}/${todos.value.length}`
})
// 用method处理清空事件：修改todos数据
function clearDone() {
  todos.value = todos.value.filter(t => !t.done)
}
</script>

为啥这么选？

• doneRate用computed：因为它依赖todos数组，只要todos里的任务完成状态或数量没变，doneRate就用缓存的结果，哪怕组件其他地方变化（比如按钮文字临时改成“清空”），doneRate也不会重新计算过滤数组，性能更优。

• clearDone用method：因为是点击事件，需要主动触发修改数据的逻辑，computed不能做“修改数据”这种副作用操作（它本质是计算属性，适合纯计算），所以必须用method。

反过来用会怎样？

要是把doneRate改成method：

function doneRate() {
  const doneCount = todos.value.filter(t => t.done).length
  return `${doneCount}/${todos.value.length}`
}

然后模板里用{{ doneRate() }}，会发生啥？

每次组件渲染（比如点“清空已完成”后todos变化导致重新渲染，或者其他不相关数据变化），doneRate()都会重新执行过滤数组的操作，如果todos有几千条数据，频繁渲染时页面会明显卡顿，性能直接雪崩。

记住这俩核心逻辑

computed是“聪明的缓存计算器”：适合依赖响应式数据的纯计算，能自动缓存、优化性能；
method是“灵活的工具人”：适合事件处理、复杂逻辑、不需要缓存的场景，能做各种副作用操作（比如修改数据、发请求）。

记住它们的核心差异（缓存、执行时机、依赖追踪），再结合场景选，代码既高效又好维护～ 下次写Vue3代码，别再纠结computed和method咋选啦～