一. 计算属性的基本使用

计算属性虽然书写时是方法的形式，但是本质是属性，所以起名时按照属性的起名规则，应为名词

data(){
	firstName:'aaa',
	lastName:'bbb'
}

computed:{
	fullName(){
		return this.firstName+' '+this.lastName
	}
}

<h2>{{fullName}}</h2>

二. 计算属性的复杂操作

计算书的总价格

      data: {
        books: [{
            id: 1,
            name: 'Unix编程艺术',
            price: 89
          },
          {
            id: 2,
            name: '代码大全',
            price: 67
          },
          {
            id: 3,
            name: '深入理解计算机原理',
            price: 87
          },
          {
            id: 4,
            name: '现代操作系统',
            price: 90
          }
        ]
      },

computed:{
	totalPrice(){
		let result=0;
		for(var i=0;i<this.books.length;i++){
			result+=this.books[i].price
		}
		return result
	}
}

<h2>总价格：{{totalPrice}}</h2>

三. 计算属性的setter和getter

methods和computed的区别：methods不会进行缓存，如果多次使用会调用多次。计算属性会进行缓存，如果多次使用，计算属性只会调用一次

methods和computed的核心区别：

1. methods是函数调用，computed是属性调用
2. computed有缓存功能，methods没有
3. computed定义的方法是以属性访问的形式调用的，methods定义的方法是以函数访问的形式调用的
4. computed是基于响应式依赖进行缓存的，只有响应式依赖发生改变时，才会重新求值
5. 对于任何复杂逻辑，都应当使用计算属性

计算属性的完整写法：

data: {
          firstName: "aaa",
          lastName: "bbb"
        },

computed(){
	fullName:function(){
		// 计算属性一般不使用set方法，是只读属性
		// 但是在某些情况下也可以使用set方法
		set:function(newValue){
			const names=newValue.split(" ");
			this.firstName=names[0];
			this.lastName=names[1];
		},
		get:function(){
			return this.firstName+this.lastName
		}
	}
}

默认情况下，computed中的set方法是不会执行的，只有被重新赋值时才会触发set方法

在控制台重新赋值
页面改变

计算属性的简便写法

computed(){
	fullName(){
		return this.firstName+" "+this.lastName
	}
}