1、计算属性的基本使用

(1)当模板{{ }} 里面的插值比较麻烦时，可以将数据放到计算属性，然后用该计算属性。
(2)计算属性是放在vue实例的computed中定义，与methods类似，都是定义函数。
(3)计算属性定义在computed中，调用时使用mustache语法调用且后面不跟()

<div id="app">
  <h2>{{firstName+ ' ' + lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>
  //拼接全名
  //这种拼接后看起来比较复杂，则我们可以用methods,调用方法实现
  <h2>{{getFullName()}}</h2>
  //用methods里面放的是一个方法，我们用如果直接放一个属性会更好
  //使用计算属性
  <h2>{{FullName}}</h2>
</div>

<script>
  const app = new Vue({
    el:"#app",
    data:{
      firstName:"Lebron",
      lastName:"James"
    },
    methods:{     //定义函数，以函数方式使用；
      getFullName:function () {
        return this.firstName+ ' ' +this.lastName
      }
    },
    computed:{    //计算属性，里面定义函数，将函数以属性方式使用；
      FullName:function () {
        return this.firstName+ ' ' +this.lastName
      }
    }
  })
</script>

2、计算属性的复杂操作

<div id="app">
	// 要实现计算书的总价格
	// 常规方法很累赘
	<h2>总价格:{{books[0].price + books[1].price + books[2].price + books[3].price }}</h2>
	// 用计算属性来实现
	<h2>总价格：{{totalPrice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            books: [
                { id: 110, name: 'Unix编程艺术', price: 119 },
                { id: 111, name: '代码大全', price: 101 },
                { id: 112, name: '深入理解计算机原理', price: 56 },
                { id: 113, name: '现代操作系统', price: 87 },
            ]
        },
        computed: {
            totalPrice: function () {
                let res = 0;
                for (let i = 0; i < this.books.length; i++) {
                    res += this.books[i].price;
                }
                return res;
            }
        }
    })
</script>

3、计算属性的setter和getter方法

计算属性的标准写法为：
computed: {
      fullName:{
      set: function () {
      },
      get: function () {
         return this.firstName + ' ' + this.lastName
      }
    }
}
但是一般在使用时，只需要实现get方法；set方法不用设置实现，所以一般直接不要；
直接写为：
computed:{
   fullName:function(){        
   	 return this.firstName + ' ' + this.lastName
   }
}
在ES6里面对象内函数的增强写法
computed:{
   fullName(){        
   	 return this.firstName + ' ' + this.lastName
   }
}

4、计算属性和methods的对比(缓存)

计算属性具有缓存机制。
methods中的方法每使用一次就会被调用一次，不管里面的数据是否发生变化。而使用计算属性时，只要里面影响结果的变量没有发生变化，无论计算属性被使用多少次，函数都只会被调用一次。

<div id="app">
	<!-- 1.通过定义methods，使用了4次方法，且data中变量没有变化，函数就会被调用4次 -->
	<!-- <h2>{{getFullName()}}</h2>
	<h2>{{getFullName()}}</h2>
	<h2>{{getFullName()}}</h2>
	<h2>{{getFullName()}}</h2> -->
	<!-- 2.通过computed，使用了4次方法，且data中变量没有变化，但函数只会被调用1次-->
	<h2>{{fullName}}</h2>
	<h2>{{fullName}}</h2>
	<h2>{{fullName}}</h2>
	<h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            firstName: 'koby',
            lastName: 'Bryant'
     },
     methods: {
          getFullName: function () {
              console.log('getFullName');
              return this.firstName + ' ' + this.lastName;
          }
      },
      computed: {
          fullName: function () {
              console.log('fullName');
              return this.firstName + ' ' + this.lastName;
          }
      }
    })
</script>