请简述computed与methods的区别

computed和methods都是在Vue中用于定义方法的关键字，但是它们的作用是不同的。

computed是计算属性，它是根据已有的数据计算出新的数据，并将计算结果缓存起来。当计算所依赖的数据发生变化时，computed会重新计算这个值并更新视图。computed方法的结果可以像data中的数据一样在模板中使用。computed适用于需要根据已有数据计算新值的场景，比如根据商品价格和数量计算总价。

methods是普通方法，它可以在模板中通过事件绑定调用。methods适用于需要响应用户事件、或者进行一些逻辑处理的场景，比如点击按钮弹出提示框。

下面是computed和methods的一个简单示例：

<template>
  <div>
    <p>商品价格：{{ price }}</p>
    <p>商品数量：<input type="text" v-model="quantity"></p>
    <p>商品总价：{{ totalPrice }}</p>
    <button @click="showAlert">点击我</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 10,
      quantity: 1
    }
  },
  computed: {
    totalPrice() {
      return this.price * this.quantity
    }
  },
  methods: {
    showAlert() {
      alert('我被点击了')
    }
  }
}
</script>

在上面的代码中，我们定义了一个computed属性totalPrice，它根据price和quantity计算出商品的总价，并将计算结果缓存起来。当price或quantity发生变化时，totalPrice会自动更新。而methods中的showAlert方法则是一个普通方法，用于在点击按钮时弹出提示框。