一、计算属性是什么？
1. 定义
要用的属性不存在，要通过已有属性计算得来。
2. 原理
底层借助了 Object.defindproperty 方法提供的getter和setter。
3. get函数什么时候执行
1）初次读取会执行一次；
2）当依赖的数据发生改变时会被再次调用；
// 计算属性：拿着已有的属性去加工计算，得到新的属性
// 属性和计算属性是分开放的，计算属性在computed里面
computed: {
fullName: {
// get的作用：当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
// get什么时候调用？两个时机：
// 1.初次读取fullName时；
// 2.所依赖的数据发生变化时；
get() {
console.log("get被调用了",this);//此处的this就是vm
return this.firstName +'-'+ this.lastName;
},
//set什么时候调用？ 当fullName被修改时
//set不是必须写的，不被改写时候不需要写
set(value) {
console.log("set被调用了");
let arr = value.split("-");
this.firstName = arr[0];
this.lastName = arr[1];
},
}
}
4. 优势
与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5. 备注
1）计算属性最终会出现在vm上，直接读取使用即可。
2）如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
6. 简写
只读不改可以用简写
computed: {
//完整写法
fullName: {
get() {
return this.firstName + "-" + this.lastName;
},
},
//简写
fullName() {
return this.firstName + "-" + this.lastName;
},
}
二、使用插值语法/methods/计算属性有什么区别
姓名案例： 输入框分别输入姓和名，全名展示姓名的组合。
方法一：插值语法实现
效果：
可以实现；
模板中应该只包含简单表达式，否则不便于观察，违反 vue风格；
姓：<input v-model="firstName" /><br /><br />
名：<input v-model="lastName" /><br /><br />
全名：<span>{{firstName}}{{lastName}} </span>
方法二：methods实现
效果：
可以实现；
data中的任何数据发生变化，模板都会重新解析；
多次调用fullName()方法，方法执行多次；
姓：<input v-model="firstName" />
名：<input v-model="lastName" />
全名：<span>{{fullName()}} </span>
全名：<span>{{fullName()}} </span>
methods: {
fullName() {
console.log("fullName被调用了");
return this.firstName + this.lastName;
},
},
方法三：计算属性实现
效果：
可以实现；
所依赖的数据发生变化时，才会重新执行
姓：<input v-model="firstName" />
名：<input v-model="lastName" />
全名：<span>{{fullName()}} </span>
全名：<span>{{fullName()}} </span>
computed: {
fullName() {
return this.firstName + this.lastName;
},
}
总结
1、不同方法的执行结果是完全相同的。
2、根据Vue风格指南，插值语法的模板中应该只包含简单表达式，复杂表达式则应该重构为计算属性或方法。
3、使用methods方法，每次调用都会重新执行函数。
使用计算属性，所依赖的数据发生变化时，才会重新计算。所依赖的数据没有变化，会直接返回之前的计算结果，不再执行函数。
与methods实现相比，计算属性内部有缓存机制（复用），效率更高，调试方便。
