前端vue计算属性compured

计算属性（computed）是Vue.js中一个非常有用的特性，它可以根据已有的数据计算出一个新的数据，并且这个新的数据会根据已有的数据自动更新。在Vue.js中，计算属性是通过computed选项来定义的。

计算属性的特点：
1. 计算属性是基于它们的响应式依赖进行缓存的，只有当响应式依赖发生改变时才会重新计算。
2. 计算属性默认只有getter，不过也可以提供setter，从而实现双向绑定。

下面是一个计算属性的例子：

<template>
  <div>
    <p>原价：{{ price }}</p>
    <p>折扣价：{{ discountPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 100,
      discount: 0.8
    }
  },
  computed: {
    discountPrice() {
      return this.price * this.discount
    }
  }
}
</script>

在上面的例子中，我们定义了一个计算属性discountPrice，它依赖于price和discount这两个响应式数据。当price或discount发生改变时，discountPrice会自动重新计算。