vue计算属性及函数的选择

首先，我们需要了解计算属性和普通方法之间的区别和用途。

计算属性

计算属性是Vue给我们提供的一种方便快捷的数据求值方式。它会根据依赖的数据自动更新，并且只会在需要时才进行计算，避免不必要的重复计算。计算属性的使用方式与普通属性类似，通过定义一个函数来计算值。

在一般情况下，我们通常使用计算属性来进行复杂的逻辑处理或者进一步计算已有的属性值。比如，我们有一个场景：商品列表需要展示折扣价格和原价，而折扣价格和原价是由商品的售价和优惠力度计算而来的。这时候，我们就可以通过定义一个计算属性来计算出折扣价格和原价：

data() {
  return {
    price: 500,
    discountRate: 0.8
  }
},
computed: {
  discountPrice() {
    return (this.price * this.discountRate).toFixed(2)
  },
  originalPrice() {
    return this.price.toFixed(2)
  }
}

在上面的代码中，我们定义了两个计算属性：discountPrice和originalPrice。discountPrice是通过当前的售价和优惠力度计算出来的折扣价格，而originalPrice则是当前售价的原价。

通过定义计算属性可以将复杂的逻辑处理抽象出来，让代码更加简洁易懂，方便复用。

普通方法

普通方法的使用方式与JavaScript的函数类似，通过定义一个函数来完成某个具体的任务。在Vue中，通常我们将普通方法用于处理事件或者直接在模板中调用。

在某些场景下，我们不需要将某个计算结果进行缓存，也不需要实时更新，此时我们可以选择使用普通方法。比如，我们有一个场景：用户表单中有一个“提交”按钮，点击后需要将表单提交到服务器。这时候，我们可以通过定义一个普通方法来实现表单的提交：

<template>
  <div>
    <form @submit.prevent="submitForm">
      <!-- 表单内容 -->
      <button type="submit">提交表单</button>
    </form>
  </div>
</template>
<script>
export default {
  methods: {
    submitForm() {
      // 提交表单代码
    }
  }
}
</script>

在上面的代码中，我们通过定义一个submitForm方法来处理表单的提交事件。当用户点击提交按钮时，submitForm方法将会被调用。

总结：

• 当需要做一些复杂的逻辑计算，或者需要将一个数据进行处理后再进行渲染时，应该选择使用计算属性。

• 当需要处理某个事件或者直接在模板中调用时，应该选择使用普通方法。