vue中计算属性和方法的区别及说明

Vue中计算属性和方法是两种常用的方式来处理数据的操作和计算。它们有不同的特点和用途，下面就具体说一下它们在使用中的区别及说明。

计算属性

计算属性是Vue中用于动态计算和返回结果的属性。计算属性会根据响应式数据的变化自动更新计算结果。计算属性有以下几个特点：

计算属性会缓存计算结果，只有在响应式数据发生变化时才会重新计算。这种缓存主要是为了避免重复计算和提高效率；
计算属性可以依赖多个响应式数据，只有当这些数据发生变化时才会重新计算计算属性的值；
计算属性可以在模板中像普通属性一样使用，也可以在其他计算属性中使用。

下面是一个计算属性的示例，该计算属性返回数组numbers中大于等于10的元素个数。

<template>
  <div>
    <p>数组numbers中大于等于10的元素个数为：{{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numbers: [3, 11, 2, 15, 6, 10, 13, 9],
    };
  },
  computed: {
    count() {
      return this.numbers.filter((n) => n >= 10).length;
    },
  },
};
</script>

方法

方法是Vue中常用的用于处理用户交互和数据操作的函数。方法包含以下几个特点：

方法不会自动响应式更新，需要手动调用才会更新；
方法可以传递参数，且参数可以是常量或响应式数据；
在模板中通过事件绑定调用方法。

下面是一个方法的示例，该方法接收一个参数n，将数组numbers中所有元素加上n，并更新计数器counter。

<template>
  <div>
    <p>计数器：{{ counter }}</p>
    <ul>
      <li v-for="(n, index) in numbers" :key="index">
        {{n}}
        <button @click="add(n)">+1</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numbers: [1, 2, 3, 4, 5],
      counter: 0,
    };
  },
  methods: {
    add(n) {
      this.numbers[index] += n;
      this.counter++;
    },
  },
};
</script>