【八股系列】vue中计算属性computed和普通属性method的区别是什么？

1. 计算属性computed

• computed是基于它们的依赖项进行缓存的。如果依赖项没有发生变化，Vue.js 将返回缓存的结果，而不是重新计算。这可以大大提高性能，尤其是在处理复杂的计算时。
• computed是只读的。一旦在模板中使用了计算属性，就不应该在组件中修改它的值。如果需要修改，可以将其转换为一个方法。
• computed可以返回一个函数。这在需要在模板中使用函数式编程时很有用。例如，你可以使用 v-for 指令来循环执行一个函数，并返回一组结果。
• computed不需要加小括号。computed可以向普通属性一样，直接使用，不需要额外加小括号调用。

2. 普通属性method

• method在每次调用时都会重新执行。不生成缓存。
• method需要加小括号调用。method每次使用时，都需要加小括号调用。

3. 应用场景

3.1. computed

• 复杂的计算: 如果你需要在模板中执行一个复杂的计算，并且这个计算涉及到多个响应式属性，那么使用计算属性是最合适的。
• 过滤/格式化数据: 计算属性可以用于对数据进行过滤或格式化，以便在模板中使用。
• 依赖于其他属性: 如果一个属性的值取决于其他属性，并且需要在多个地方使用，那么使用计算属性可以避免代码冗余。

3.2. method

• 事件处理: method 通常用于处理用户交互，例如点击事件、表单提交等。在事件处理函数中，可以调用 method 来执行相关的操作。
• 异步操作: method 也可以用于执行异步操作。例如，在 method 中可以调用 API、进行数据库查询等，并在操作完成后执行某些操作。
• 需要在模板中执行副作用: method 也可以用于执行一些需要在模板中执行的副作用操作。例如，在 method 中可以修改组件的状态、触发事件等。

4. 与侦听器watch的对比

• watch可以用于观察一个特定的值，并在值发生变化时执行某些操作。
• watch不返回值，而是执行副作用。在某些情况下，侦听器可能更合适，尤其是需要在值发生变化时执行异步操作时。

5. 示例

<template>
  <div>
    <!-- 使用 computed 属性 -->
    <p>Reversed message: {{ reversedMessage }}</p>

    <!-- 使用 method -->
    <p>Uppercase message: {{ uppercaseMessage() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!'
    };
  },
  computed: {
    // Computed property
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  },
  methods: {
    // Method
    uppercaseMessage() {
      return this.message.toUpperCase();
    }
  }
};
</script>