【vue篇】Vue 中 computed 和 methods 的本质区别：缓存的艺术

在 Vue 开发中，你是否曾纠结过：

"这个函数该定义为 computed 还是 methods？"

从结果上看，两者似乎都能实现相同功能。但性能和语义上却天差地别。

本文将通过代码示例、性能对比和原理剖析，彻底讲清 computed 与 methods 的核心差异。

---

一、表面相似，本质不同

✅ 功能等价性

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },

  // 方法 (methods)
  methods: {
    getFullName() {
      console.log('methods called');
      return this.firstName + ' ' + this.lastName;
    }
  },

  // 计算属性 (computed)
  computed: {
    fullName() {
      console.log('computed called');
      return this.firstName + ' ' + this.lastName;
    }
  }
}

在模板中使用：

<p>{{ getFullName() }}</p>
<p>{{ fullName }}</p>

✅ 最终显示结果相同 ：John Doe

---

二、核心差异：缓存机制（Cache vs No Cache）

特性	computed	methods
是否缓存	✅ 是	❌ 否
执行频率	仅依赖变化时重新计算	每次调用都执行

📌 场景演示：频繁渲染

<!-- 模板中多次调用 -->
<div>
  <p>{{ getFullName() }}</p>
  <p>{{ getFullName() }}</p>
  <p>{{ getFullName() }}</p>

  <p>{{ fullName }}</p>
  <p>{{ fullName }}</p>
  <p>{{ fullName }}</p>
</div>

输出结果：

// methods：每次调用都执行
methods called
methods called
methods called

// computed：只执行一次（有缓存）
computed called

💡 即使调用 10 次 fullName，也只计算一次！

---

📌 动态数据变化测试

// 修改数据
this.firstName = 'Jane';

此时：

• computed.fullName → 重新计算（依赖变化）
• methods.getFullName() → 不自动更新，需重新调用

---

三、性能对比：高频率场景下的差距

📊 场景：列表渲染 1000 条数据

<ul>
  <li v-for="user in users" :key="user.id">
    {{ formatName(user) }} <!-- methods -->
    <!-- vs -->
    {{ user.formattedName }} <!-- computed -->
  </li>
</ul>

方案 1：使用 methods

methods: {
  formatName(user) {
    return user.firstName + ' ' + user.lastName;
  }
}

• 渲染时调用 formatName 1000 次；
• 如果列表重新渲染（如排序），再次调用 1000 次；
• 性能瓶颈：重复计算。

方案 2：使用 computed

computed: {
  formattedName() {
    return this.user.firstName + ' ' + this.user.lastName;
  }
}

• 每个 user 实例的 formattedName 只在 firstName/lastName 变化时重新计算；
• 列表渲染时直接读取缓存值；
• 性能优势：避免重复计算。

---

四、原理剖析：为什么 computed 能缓存？

✅ computed 的工作流程

1. 依赖收集 ：首次读取 fullName 时，访问 firstName 和 lastName，触发 getter，建立依赖关系；
2. 缓存结果：将计算结果缓存；
3. 脏检查 ：当 firstName 或 lastName 变化时，标记 fullName 为"脏"；
4. 惰性更新 ：下次读取 fullName 时，发现"脏"，重新计算并更新缓存。

❌ methods 的工作方式

• 每次调用都是独立的函数执行；
• 不记录依赖；
• 不缓存结果；
• 纯函数调用。

---

五、何时使用？决策树

✅ 使用 computed 的场景

场景	示例
基于响应式数据计算新值	fullName, cartTotal
模板中频繁使用	避免重复计算
条件或过滤逻辑	activeUsers, hasItems
需要缓存以提升性能	复杂计算、大数据处理

computed: {
  totalPrice() {
    return this.items.reduce((sum, item) => sum + item.price * item.qty, 0);
  }
}

---

✅ 使用 methods 的场景

场景	示例
事件处理器	@click="submit"
不依赖响应式数据	工具函数、随机数生成
需要每次都执行	日志记录、外部 API 调用
接收参数	getItem(id)

methods: {
  submitForm() {
    console.log('Form submitted');
    api.submit(this.formData);
  },
  getRandomColor() {
    return '#' + Math.floor(Math.random()*16777215).toString(16);
  }
}

---

六、常见误区

❌ 误区 1：在 computed 中做副作用操作

// ❌ 错误：computed 应是纯函数
computed: {
  userInfo() {
    console.log('fetching...'); // 副作用
    return this.user;
  }
}

computed 应无副作用（如日志、API 调用）。

---

❌ 误区 2：用 methods 实现简单计算

// ❌ 浪费性能
<p>{{ calculateTax(price) }}</p>
<p>{{ calculateTax(price) }}</p>

methods: {
  calculateTax(price) {
    return price * 1.1; // 每次都计算
  }
}

应使用 computed 缓存结果。

---

💡 结语

"computed 是聪明的懒人，methods 是勤劳的工人。"

对比项	computed	methods
缓存	✅ 有	❌ 无
性能	高（避免重复计算）	低（每次都执行）
适用场景	数据计算、格式化	事件处理、副作用
调用方式	属性访问 {{ fullName }}	函数调用 {{ getName() }}

记住：

• 优先使用 computed 实现数据派生；
• 使用 methods 处理用户交互和副作用。