在 Vue 开发中计算变量，methods 和 computed 哪个方法更好？

Vue 6月前 24

在Vue开发中，我们通常需要对数据进行计算，以便展示或者进行业务逻辑处理。而在计算变量时，Vue提供了两种方法：methods和computed。那么在两者之间该如何选择呢？本文将从两个方面进行详细分析。

1.性能

首先，我们来看性能方面。methods和computed的主要区别在于计算结果的缓存机制。methods每次都会重新计算，而computed只有在相关响应式数据发生改变时才会重新计算。

这意味着，在计算复杂的变量时，computed会比methods更高效。因为methods每次都需要重新计算，而computed只需要在数据发生变化时重新计算一次。这样就能够大大减少计算量，提高性能。

例如，我们有一个需求：根据用户的年龄计算出其出生年份。我们可以使用methods和computed两种方法来实现。

<template>
  <div>
    <p>年龄：{{ age }}</p>
    <p>出生年份：{{ getBirthYear() }}</p>
    <p>出生年份（computed）：{{ birthYear }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 25,
      birthYear: 0,
    };
  },
  methods: {
    getBirthYear() {
      return new Date().getFullYear() - this.age;
    },
  },
  computed: {
    birthYearComputed() {
      return new Date().getFullYear() - this.age;
    },
  },
};
</script>

在上面的代码中，我们分别使用methods和computed两种方法来计算出生年份。可以看到，当age数据变化时，methods的getBirthYear()方法会重新计算，而computed的birthYearComputed只会在age数据变化时重新计算。

因此，在性能方面，computed更优秀一些。

2.功能

除了性能方面的区别，methods和computed还有一些功能上的区别。methods可以接受参数，而computed不可以。这意味着，如果我们需要根据不同的参数计算出不同的结果，就需要使用methods。

例如，我们有一个需求：根据用户的年龄和性别计算出其出生年份。我们可以使用methods来实现。

<template>
  <div>
    <p>年龄：{{ age }}</p>
    <p>性别：{{ gender }}</p>
    <p>出生年份：{{ getBirthYear(gender) }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 25,
      gender: 'male',
    };
  },
  methods: {
    getBirthYear(gender) {
      const baseYear = gender === 'male' ? 1970 : 1980;
      return baseYear + this.age;
    },
  },
};
</script>