在前幾天的範例當中，我們知道了可以透過雙向綁定來達成當值更換時視圖也更新的功能，然而當我們想在視圖上顯示被處理過的資料但又不想破壞原屬性時，除了在雙括號裡面使用一連串的處理，也可以使用 Vue 提供的 computed 屬性

Computed

{{userList[0].split(" ")}} 您好

同等於

{{firstUserName}}
new Vue({
    data(){
        return {
            userList:[]
        }
    },
    computed: {
        firstUserName(){
            return this.userList[0].split(" ")
        }
    }
})

當然，我們一樣可以透過 method 達到類似的用途，不過 computed 重要的地方在於它是有緩存機制的，所以當下一次的 data 更新後，computed 裡面的值會判斷綁定的屬性有沒有更動，若沒有就不進行重新渲染，節省效能

而且 computed 除了能夠根據偵測的值進行加工，也可以在獲取值的時候進行變動，這就是 computed 的 getter 與 setter
我們可以以常見的 checkbox list 的全選為例

<div><input type="checkbox" v-model="allUser">全選</input></div>
<div><input type="checkbox" v-model="leo">Leo</input></div>
<div><input type="checkbox" v-model="elon">elon</input></div>
<div><input type="checkbox" v-model="angus">angus</input></div>
new Vue({
    data() {
      return {
        leo: false,
        elon: false,
        angus: false
      };
    },
    computed: {
        allUser: {
            get(){
                return this.leo && this.elon && this.angus
            },
            set(val){
                this.leo = val;
                this.elon = val;
                this.angus = val;
            }
        }
    }
}).$mount("#app");

這邊在 allUser 的值為 true 以前，也就是所有人被打勾之前，點選 allUser 的 checkbox 都會給予 allUser 的 setter 一個 true 的值，就可以將內部的所有 user 更改為 true 了，若要實作表單相當的好用

Watch

然而，有時候我們是想在數值變動的時候做其他與此數值無關的事情，這時候就可以使用我們的監控屬性了

new Vue({
    data(){
        reuturn {
            user: 'leo'
        }
    },
    watch: {
        user: {
            handler(newVal, oldVal){
            },
            deep: false,
            immediate: false,
        }
    }
})

watch 是綁在你想要監控的值上面，當那個值有所變動後會觸發 handler ，讓你可以根據新值或是舊值來進行一系列的操作，並且 watch 提供另外兩個參數，分別是：

• deep[Boolen]: 監聽深層數據，用在陣列內層或是物件內曾使用
• immediate[Boolen]:是否在剛綁定 watch 時就執行此 handler ，默認 false

雖然 watch 可以做到 computed 所做到的事情，然而 watch 是在每次數據變動後都會立刻去執行，相較 computed 下比較消耗效能，因此該再怎樣的時間點使用這兩個屬性是一個值得思考的地方
今天的內容就到這邊啦~