Vue计算属性

计算属性就是当其所依赖的属性的值发生变化的时候，这个属性的值会自动更新，与之相关的东西也会自己更新。计算属性可以完成各种复杂的逻辑，但是最终都要返回一个结果。计算属性可以依赖多个vue实例的数据，只要其中一个发生变化，计算属性就会重新调用，相应的视图也会随之进行更新。

下面我们看个实例：

<template>
  <div id="computed">
    <li v-for="book in books">
      {{ book.name}}
      <p>书籍价格：{{book.price}}</p>
      <p>书籍数量:{{book.count}}</p>
      <button v-on:click="addBook(book)">加购</button>
      <button v-on:click="delBook(book)">减购</button>
      <p></p>
    </li>
    <p><b>当前书籍总价是：</b>{{ totalPrice }}人民币哦！</p>

  </div>
</template>

<script>
  export default ({
    name: 'ComputedProperty',
    data() {
      return {
        books: [
          {
            id: 0,
            name: 'Vue.js实战',
            price: 45,
            count: 2
          },
          {
            id: 1,
            name: 'Vue权威指南',
            price: 75,
            count: 10
          }
        ]
      }
    },
    methods: {
      addBook: function (book) {
        this.books[book.id].count += 1;
      },
      delBook: function (book) {
        if(this.books[book.id].count <= 0)
          return;
        this.books[book.id].count -= 1;
      }
    },
    computed: {
      totalPrice: function () {
        var price = 0;
        for (var i = 0; i < this.books.length; i++) {
          price += this.books[i].price * this.books[i].count;
        }
        return price;
      }
    }
  })
</script>

<style scoped>

</style>

这里我们模拟一个购物车的情况，里面是购买的书籍和数量，通过计算属性计算我们购买的书籍的总价，运行程序：

当我们点击按钮的时候，可以增加和减少当前书籍的数量，大家也可以看到，通过计算属性显示的书籍总价也会随之改变。

在我们实际使用中，计算属性还有两个比较有用的小技巧。
1.计算属性可以依赖其他计算属性
2.计算属性不仅可以依赖当前vue实例的数据，还可以依赖其他vue实例的数据

还是一样我们通过一个例子来看：

<template>
  <div>
    您的姓名是：{{fullName}}
  </div>
</template>

<script>
  import Vue from 'vue';

  var app1 = new Vue({
    data: {
      firstName: 'Liu'
    },
    computed: {
      formatName: function () {
        var format_name  = this.firstName + '-';
        return format_name;
      }
    }
  });
  var app2 = new Vue({
    data: {
      lastName: 'Sir'
    }
  });
  export default {
    name: "MultDependentProperty",
    computed: {
      fullName: function () {
        return app1.formatName + app2.lastName;
      }
    }
  }
</script>

<style scoped>

</style>

这里我们定义了两个Vue实例，我们在当前实例的计算属性中拼接实例1中的姓和实例2中的名字来组成我们完整的姓名，并且在实例1中的计算属性中在姓的后面加上‘-’。这里为了在一块演示，所以代码这么写了，主要是 为了让大家可以一次性对上面提到的两点有个直观的认识。

运行结果：

大家在很多教程中也会看到关于计算属性的gettter和setter的介绍，在绝大多数情况下我们只会用到计算属性的getter方法来读取计算属性，很少在业务中使用setter，所以在这里只是给大家看下两者的写法；

computed: {
      formatName: {
        get:function () {
          var format_name  = this.firstName + '-';
          return format_name;
        },
        set: function (newValue) {
          this.firstName = newValue;
        }
      }
    }

在使用setter的时候也很简单正常赋值就好了，有过其他语言编程基础的很容易就理解了，比如c#中的get和set方法。

  fullName: function () {
        app1.formatName = "Wang";
        console.log(app1.firstName);
        return app1.formatName + app2.lastName;
      }

这里我们还用上面的例子来演示，所以修改了一下代码，大家可以自己试试。

关于计算属性缓存的问题，这里我们只提一点，我们可以通过cache开关来控制我们的程序是否开启缓存，语法如下：

 computed: {
      cache: false,
      welcome: function () {
        return Date.now() + " Welcome to Vue!";
      }

默认情况下，是开启缓存的。