在 Vue 中计算变量时，methods和computed哪个好？
在 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 属性会缓存计算结果，并在属性的基础上实现响应式更新，而方法则会重新执行计算。
