在 vue3 和 vue2 中，computed 计算属性和 methods 方法区别是什么

在 Vue 2 和 Vue 3 中，computed（计算属性）和 methods（方法）都是处理数据逻辑的方式，但它们在缓存机制、使用场景、执行时机等方面有显著区别，且这些区别在两个版本中保持一致。

1. 缓存机制（核心区别）

• computed 计算属性：
  会对计算结果进行缓存。只有当依赖的响应式数据发生变化时，才会重新计算；如果依赖数据不变，多次访问计算属性会直接返回缓存的结果，不会重复执行计算逻辑。

  示例（Vue 2/3 通用）：

  // 计算属性会缓存结果
  computed: {
    filteredList() {
      console.log('computed 执行了');
      return this.list.filter(item => item.active);
    }
  }
  

  多次访问 filteredList 时，若 list 未变化，只会打印一次 computed 执行了。

• methods 方法：
  没有缓存机制，每次调用都会重新执行函数，无论依赖的数据是否变化。

  示例（Vue 2/3 通用）：

  // 方法每次调用都会重新执行
  methods: {
    getFilteredList() {
      console.log('method 执行了');
      return this.list.filter(item => item.active);
    }
  }
  

  每次调用 getFilteredList() 或在模板中使用 {{ getFilteredList() }} 时，都会打印 method 执行了。

2. 使用场景

• computed：
  适合用于基于现有响应式数据派生新数据的场景，尤其是需要频繁访问结果时（如模板中多次引用）。
  例如：数据过滤、格式化（如日期转换）、数值计算（如总价 = 单价 × 数量）等。

• methods：
  适合用于处理业务逻辑、事件处理或不需要缓存的场景。
  例如：按钮点击事件、表单提交、一次性数据处理（如获取随机数）等。

3. 调用方式

• computed：
  在模板中使用时不需要加括号，直接作为属性访问（因为它本质是一个被缓存的属性）。
  示例：{{ filteredList }}（而非 {{ filteredList() }}）。

• methods：
  在模板中使用时必须加括号（作为函数调用）。
  示例：{{ getFilteredList() }} 或 @click="handleClick()"。

4. 依赖追踪

• computed：
  会自动追踪依赖的响应式数据（如 data、props 中的数据），当依赖变化时自动更新。

• methods：
  不会主动追踪依赖，仅在被调用时执行，其内部使用的响应式数据变化不会触发方法自动执行（除非手动调用）。

总结对比表

一句话总结

computed 是“带缓存的派生属性”，methods 是“无缓存的函数”。根据是否需要缓存和使用场景选择：需要缓存且基于响应式数据派生新数据时用 computed，需要执行动作或不需要缓存时用 methods。