vue3中methods和computed的区别

在 Vue3 中， methods 和 computed 的区别主要体现在以下方面：

- 用途：

-  methods ：用于定义组件中的方法，这些方法通常用于处理用户交互、事件响应、执行异步操作或调用 API 等，不具有缓存特性，每次调用都会执行方法中的代码。

-  computed ：用于声明计算属性，它是具有缓存功能的。计算属性会根据其依赖的响应式数据自动计算并返回结果，只有在依赖的数据发生变化时，才会重新计算属性的值。适合用于根据已有的响应式数据计算和派生新的数据，或者处理复杂的逻辑运算和过滤等，在视图中多次使用的复杂计算也适合使用 computed 。

- 响应性：

-  methods 是非响应式的，它不会自动更新视图中的数据。

-  computed 是响应式的，当它依赖的响应式变量发生变化时，会自动更新视图中的数据。

- 调用方式：

- 在模板中使用 methods 定义的方法时，需要加上括号来调用，例如 {{ methodsFn() }} 。

- 而使用 computed 定义的计算属性时，不需要加括号，可以直接像访问属性一样使用，例如 {{ computedFn }} 。

例如，如果有一个包含商品对象数组的购物车，要计算购物车中商品的总价，使用 computed 属性会更合适：

<template>

  <div>

    <ul>

      <li v-for="item in cart" :key="item.id">{{item.name}}</li>

    </ul>

    <p>total price: {{ totalPrice }}</p>

  </div>

</template>

<script>

export default {

  data() {

    return {

      cart: [

        { name: "product one", price: 20 },

        { name: "product two", price: 30 },

        { name: "product three", price: 40 },

      ],

    };

  },

  computed: {

    totalPrice() {

      let sum = 0;

      this.cart.forEach((item) => {

        sum += item.price;

      });

      return sum;

    },

  },

};

</script>

而处理一些用户交互操作，如点击按钮触发的事件等，则适合使用 methods ：

<template>

  <div>

    <p>{{ count }}</p>

    <button @click="increment">add</button>

  </div>

</template>

<script>

export default {

  data() {

    return {

      count: 0,

    };

  },

  methods: {

    increment() {

      this.count++;

    },

  },

};

</script>