一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。
我要一步一步往上爬~大家好，今天我们来一起学习一下计算属性这个概念，拿下Computed用法。
一、计算属性
1. 定义
要用的属性不存在，所以要通过已有的属性加工得出的属性称为计算属性。data里面定义的就是属性，这里的firstName:'小'中firstName是属性名，小为属性值。
data:{
firstName:'小',
lastName:'李',
}
computed是一项全新的配置项，代码是不和data写在一起的，内部把计算的整个过程写成对象的形式，这里表现为fullname
computed:{
fullName:{
}
}
2. 原理：
对象里面要写个get（）方法，它的作用是当有人读取fullname对象时，会自动调用get，get的返回值就作为fullname对象的值。这里的底层原理其实就是Objcet.defineproperty方法提供的getter和setter
computed:{
fullName:{
get(){},
set(value){}
}
}
3. 优势
与使用methods实现相同结果对比，computed的效率更高，调试起来更方便，因为它内部具备缓存机制，也就是缓存的数据可以复用。
methods读取一次满勤会调用一次，而get只有在被初次读取里面的对象（这里是fullName）时以及所依赖的数据发生变化时，这两种情况下才会被调用。
对应的，set是在fullName被修改时被调用，value就是接收到的值，举个栗子，在网页的console中输入vm.fullname=小 张，set被调用修改fullname。
get(){
console.log(this)
return this.firstName + ' ' + this.lastName
},
set(value){
console.log('set',value)
const arr = value.split(' ')
this.firstName = arr[0]
this.lastName = arr[1]
}
4. 注意点
在get中不能写成return firstName + lastName，这样会报错没有被定义，this代表vm实例，vm实例上的属性是可以直接使用的，所以要写成this.firstName这种形式。
5. 简写形式
在不使用set的情况下，我们可以将computed代码段写成如下形式，更加简便
fullName(){
return this.firstName + '-' + this.lastName
}
二、完整案例
<body>
<div id="root">
姓：<input type="text" v-model="firstName"> <br/><br/>
名：<input type="text" v-model="lastName"> <br/><br/>
全名：<span>{{fullName}}</span> <br/><br/>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
firstName:'小',
lastName:'李',
},
computed:{
fullName:{
get(){
console.log(this)
return this.firstName + ' ' + this.lastName
},
set(value){
console.log('set',value)
const arr = value.split(' ')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
})
</script>
效果图：
