Vue.js学习之计算属性

下面是关于"Vue.js学习之计算属性"的完整攻略。

什么是计算属性

在Vue.js中，我们经常需要根据已经存在的数据，通过一些复杂的逻辑计算出新的值，然后再去渲染页面。

Vue.js提供了计算属性（computed）来方便我们实现这个需求。计算属性本质上是一个方法，它可以接收已经存在的数据为参数，然后根据这些数据进行计算，最终返回一个新的值。

一个计算属性示例：

<div id="app">
  <p>商品价格: {{price}}元</p>
  <p>商品折扣: {{discount_percentage}}%</p>
  <p>商品折后价: {{discounted_price}}元</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    price: 100,
    discount: 0.8
  },
  computed: {
    discount_percentage: function() {
      return parseInt(this.discount * 100);
    },
    discounted_price: function() {
      return parseInt(this.price * this.discount);
    }
  }
});

在上面的示例中，我们定义了一个计算属性discount_percentage，它的值是折扣乘以100并取整数。我们还定义了另一个计算属性discounted_price，它的值是商品价格乘以折扣，并取整数。

注意每个计算属性在内部都有一个getter（读取器）和setter（设置器），我们可以在getter中进行数据处理和计算，最终再返回结果。setter通常是不必要的。

计算属性的缓存机制

计算属性还带有一个重要的特性，就是计算属性是基于依赖进行缓存的。也就是说，只要计算属性所依赖的数据没有发生变化，那么计算属性就会直接返回缓存中的结果，而不需要重新计算。

这个特性意味着当我们需要进行复杂的数据计算时，使用计算属性可以提高性能。

一个带有缓存机制的计算属性示例：

<div id="app">
  <p>总金额: {{total}}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    list: [
      { name: '商品1', price: 10 },
      { name: '商品2', price: 20 },
      { name: '商品3', price: 30 }
    ]
  },
  computed: {
    total: function() {
      var sum = 0;
      for (var i = 0; i < this.list.length; i++) {
        sum += this.list[i].price;
      }
      return sum;
    }
  }
});

在上面的示例中，我们定义了一个计算属性total，它的值是list数组中所有商品价格的总和。

计算属性的缓存机制可以让我们在list数组没有发生变化的情况下，multiple方法只被调用一次，提升了页面的性能。

计算属性的用法示例2

让我们看一个计算属性的用法实例2：

<div id="app">
  <div>
      First Name: <input type="text" v-model="firstName">
  </div>
  <div>
      Last Name: <input type="text" v-model="lastName">
  </div>
  <div>
      Full Name: {{ fullName }}
  </div>
</div>

var app = new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName;
    }
  }
});

在上面的示例中，我们定义了两个输入框，一个用于输入firstName，一个用于输入lastName，然后用计算属性计算出fullName并渲染到页面上。

计算属性fullName会根据firstName和lastName的变化而变化。因此，当用户在页面上输入数据时，fullName会重新计算并更新页面。

结尾

这是关于"Vue.js学习之计算属性"的完整攻略，概述了计算属性的用法，以及计算属性的缓存机制。通过示例，我们可以更好的理解计算属性的用法和原理。