【Vue】用Vue代码详细介绍computed计算属性的用法

当需要进行一些复杂的、依赖于其他属性的计算时，可以使用计算属性来处理这些计算，而不是在模板中直接进行计算。以下是使用Vue实现计算属性的示例：

<div id="app">
  <p>商品价格：{{ price }} 元</p>
  <p>折扣后价格：{{ discountPrice }} 元</p>
</div>

javascript

var app = new Vue({
  el: '#app',
  data: {
    originPrice: 100, // 商品原价
    discount: 0.8 // 折扣
  },
  computed: {
    price: function() {
      // 计算商品价格
      return this.originPrice;
    },
    discountPrice: function() {
      // 计算折扣后的价格
      return this.originPrice * this.discount;
    }
  }
});

在上面的代码中，我们定义了两个计算属性：price和discountPrice。price属性直接返回商品原价，而discountPrice属性则返回商品原价乘以折扣。在模板中，我们可以直接使用{{ price }}和{{ discountPrice }}来显示商品价格和折扣后价格。

需要注意的是，计算属性的计算是惰性的，也就是说，它们只有在需要时才会进行计算，然后缓存起来，直到依赖的属性发生变化时才重新计算。这样可以避免不必要的计算，提高了应用程序的性能。