迹忆客 专注技术分享

在 Vue 中计算变量时，我们通常会使用两种方法：methods 和 computed。虽然两者都可以用来计算变量，但在使用时还是存在一些区别的。本文将详细介绍 methods 和 computed 的差异以及在何种情况下该使用哪种方法。

methods：

methods 可以理解为 Vue 的一个方法库，我们可以在其中定义一些方法，然后在模板中调用这些方法。当我们需要计算一些比较复杂的变量时，可以使用 methods 来进行一系列的计算。例如下面的例子：

<template>
  <div>
    <p>{{reverseMsg}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'hello'
    }
  },
  methods: {
    reverseMsg(){
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

在上面的例子中，我们想要翻转 message 的字符串，所以我们定义了一个 reverseMsg 方法来实现这个功能。在 template 中调用 reverseMsg 方法，可以得到翻转后的字符串。

computed：

computed 可以理解为 Vue 的一个计算属性，我们可以在其中定义一些计算属性，然后在模板中调用这些计算属性。当我们需要计算一些与数据相关的变量时，可以使用 computed 来进行计算。例如下面的例子：

<template>
  <div>
    <p>{{reversedMsg}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'hello'
    }
  },
  computed: {
    reversedMsg() {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

在上面的例子中，我们同样想要翻转 message 的字符串，但是我们使用 computed 来实现这个功能。我们将 reversedMsg 定义为 computed 属性，然后在模板中调用它，可以得到翻转后的字符串。

methods 和 computed 哪个好？

以上两种方法都可以用来计算变量，但在实际使用时还是要根据具体情况来选择。如果我们需要进行比较复杂的计算，或者需要进行一些异步操作，就需要使用 methods 来实现。如果我们需要进行一些较为简单的计算，或者需要监听某个属性的变化来实时刷新变量，就需要使用 computed 来实现。

总的来说，如果能使用 computed 来计算变量，尽可能地使用 computed 来实现，因为 computed 会在数据改变之后自动更新计算，而 methods 会重新调用方法。但是在一些特殊情况下，比如异步操作，使用 methods 更加方便。

总结

在 Vue 中，使用 methods 和 computed 计算变量都可以实现我们的需求，但还是要根据具体情况来选择使用哪种方法。方法和计算属性的区别主要存在于计算过程中，computed 属性会缓存计算结果，并在属性的基础上实现响应式更新，而 methods 则会重新执行计算。