Vue 中计算属性的 setter 和 getter

计算属性其实是非常强大的，这一节深入的学习下计算属性，先看一段代码：
<div id=”app”>
{{fullName}}
</div>
let vm = new Vue({
el: ‘#app’,
data: {
firstName: ‘Dell’,
lastName: ‘Lee’
},
computed: {
fullName(){
return this.firstName + ‘ ‘ + this.lastName
}
}
})
插值表达式{{fullName}}首先回去data中去找fullName这个属性，找不到再去计算属性中去找，找到之后在将它显示在页面之中。
计算属性中的fullName我们换一种写法：

<div id=”app”>
{{fullName}}
</div>
let vm = new Vue({
el: ‘#app’,
data: {
firstName: ‘Dell’,
lastName: ‘Lee’
},
computed: {
fullName:{
get(){
return this.firstName + ‘ ‘ + this.lastName
},
set(value){
var arr = value.split(‘ ‘)
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
})
当我去使用这个计算属性的时候，调用插值表达式，去读这个内容，它就会走get的方法
当我去设置这个属性属性值的时候，set方法会被执行，同时会拿到设置的这个值，我就可以通过这个值去设置firstName和lastName。
computed有这样一个特性，它呢什么时候会重新计算，当它依赖的值发生变化时，它就会重新去计算 ，重新计算之后，那么你看，当你set fullName时，this.firstName的值就会发生变化，恰好这个值又是fullName所依赖的一个值，所以就会引起fullName的重新计算，重新计算之后，fullName的值变了，页面上显示的fullName也就跟着变了。