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 也就跟着变了。