Vue2 中 methods 和 computed 的区别及在 Vue3 中的情况

目录

Vue2 中 methods 和 computed 的区别及在 Vue3 中的情况

一、Vue2 中 methods 和 computed 的区别

1. 功能实现

2. 执行机制

二、Vue3 中的情况

1. setup 函数中的使用

三、总结

---

在 Vue2 中，methods和computed都是用于定义在组件中的属性，它们都可以完成一些特定的功能，但又存在一些明显的区别。

一、Vue2 中 methods 和 computed 的区别

1. 功能实现

• methods中定义的是方法，例如在视频中定义了一个名为total的方法，在使用时需要加上括号去执行它，通过方法来进行一些计算或执行特定的操作。
• computed是计算属性，在视频中同样定义了一个名为total的计算属性，它直接返回计算结果，无需像方法那样通过括号调用执行。

2. 执行机制

• methods：只要调用一次，就会执行一次。例如在视频中，通过打印message（即methods中的方法）可以看到，调用四次就执行了四次。
• computed：具有缓存机制。如果计算属性依赖的值没有发生改变，即使调用多次，也只会执行一次，后续的调用会直接使用第一次计算后的缓存结果。只有当依赖的值发生改变时，才会重新计算。

二、Vue3 中的情况

在 Vue3 中，methods和computed的基本概念和使用方式与 Vue2 类似，但也有一些细微的变化和优化。

1. setup 函数中的使用

在 Vue3 中，组件的逻辑通常在setup函数中编写。以下是在 Vue3 中使用methods和computed的示例代码：

<template>
  <div>
    <p>数量：<input v-model.number="quantity" /></p>
    <p>单价：<input v-model.number="unitPrice" /></p>
    <p>总价：{{ total }}</p>
  </div>
</template>

<script>
import { reactive, computed } from 'vue';

export default {
  setup() {
    const state = reactive({
      quantity: 1,
      unitPrice: 29
    });

    const total = computed(() => state.quantity * state.unitPrice);

    const methods = {
      updateTotal() {
        return state.quantity * state.unitPrice;
      }
    };

    return {
     ...state,
      total,
      methods
    };
  }
};
</script>

在上述代码中，quantity和unitPrice被定义为响应式数据，total是一个计算属性，它会根据quantity和unitPrice的变化自动更新。而updateTotal是一个方法，可以通过methods.updateTotal()来调用，它的作用与计算属性类似，但每次调用都会执行一次计算。

三、总结

在 Vue2 和 Vue3 中，methods和computed都有各自的特点和用途。computed适合用于计算结果依赖于其他数据且计算过程较为复杂的情况，它的缓存机制可以提高性能。而methods则适用于执行一些特定的操作或逻辑，每次调用都会执行相应的代码。在实际开发中，根据具体的需求选择合适的方式来实现功能，可以提高代码的可读性和性能。