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