面试题：Vue 中 computed 和 methods 的区别是什么？

在 Vue 中，computed 和 methods 都用于定义可以在模板中使用的函数或计算属性，但它们在实现方式和使用场景上有显著的区别。以下是它们的详细对比：

一、`computed` 和 `methods` 的区别

特性	`computed`	`methods`
定义方式	计算属性，基于依赖的缓存	普通方法，每次调用都会执行
缓存机制	有缓存，依赖不变时直接返回缓存值	无缓存，每次调用都会重新计算
使用场景	适合计算依赖于响应式数据的值	适合执行不依赖缓存的操作
调用方式	像属性一样访问（无需括号）	像函数一样调用（需要括号）
性能优化	高效，适合复杂计算或频繁使用的值	无优化，适合一次性操作
响应式依赖	自动追踪依赖，依赖变化时重新计算	不自动追踪依赖

二、详细说明

1. `computed`（计算属性）

定义：computed 是基于响应式依赖的缓存属性。
特点：
- 只有当依赖的响应式数据发生变化时，才会重新计算。
- 适合用于计算依赖于其他数据的值。
- 在模板中像属性一样使用，无需调用括号。
示例：


  <template>
    <div>
      <p>原始值: {{ message }}</p>
      <p>计算属性: {{ reversedMessage }}</p>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        message: 'Hello Vue!'
      };
    },
    computed: {
      reversedMessage() {
        return this.message.split('').reverse().join('');
      }
    }
  };
  </script>
  <template>
    <div>
      <p>原始值: {{ message }}</p>
      <p>计算属性: {{ reversedMessage }}</p>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        message: 'Hello Vue!'
      };
    },
    computed: {
      reversedMessage() {
        return this.message.split('').reverse().join('');
      }
    }
  };
  </script>
  <template>
    <div>
      <p>原始值: {{ message }}</p>
      <p>计算属性: {{ reversedMessage }}</p>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        message: 'Hello Vue!'
      };
    },
    computed: {
      reversedMessage() {
        return this.message.split('').reverse().join('');
      }
    }
  };
  </script>

2. `methods`（方法）

定义：methods 是普通的 JavaScript 方法。
特点：
- 每次调用都会执行，没有缓存机制。
- 适合用于执行不依赖缓存的操作，如事件处理。
- 在模板中需要像函数一样调用，使用括号。
示例：


  <template>
    <div>
      <p>原始值: {{ message }}</p>
      <p>方法调用: {{ reverseMessage() }}</p>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        message: 'Hello Vue!'
      };
    },
    methods: {
      reverseMessage() {
        return this.message.split('').reverse().join('');
      }
    }
  };
  </script>
  <template>
    <div>
      <p>原始值: {{ message }}</p>
      <p>方法调用: {{ reverseMessage() }}</p>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        message: 'Hello Vue!'
      };
    },
    methods: {
      reverseMessage() {
        return this.message.split('').reverse().join('');
      }
    }
  };
  </script>
  <template>
    <div>
      <p>原始值: {{ message }}</p>
      <p>方法调用: {{ reverseMessage() }}</p>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        message: 'Hello Vue!'
      };
    },
    methods: {
      reverseMessage() {
        return this.message.split('').reverse().join('');
      }
    }
  };
  </script>

三、使用场景对比

1. 适合使用 `computed` 的场景

复杂计算：当需要基于响应式数据进行复杂计算时，使用 computed 可以避免重复计算。
频繁使用：当某个值在模板中多次使用时，使用 computed 可以利用缓存提高性能。
依赖追踪：当需要自动追踪依赖并在依赖变化时更新值时，使用 computed。

2. 适合使用 `methods` 的场景

事件处理：当需要响应用户交互（如点击事件）时，使用 methods。
无缓存需求：当不需要缓存结果时，使用 methods。
动态参数：当需要传递参数时，使用 methods。

四、性能对比

computed：由于有缓存机制，适合用于计算频繁使用或依赖复杂的数据，性能更高。
methods：每次调用都会重新计算，适合用于一次性操作或事件处理。

五、总结

特性	`computed`	`methods`
缓存	有缓存	无缓存
调用方式	像属性一样访问	像函数一样调用
使用场景	计算依赖于响应式数据的值	执行不依赖缓存的操作
性能	高效，适合复杂计算或频繁使用的值	无优化，适合一次性操作