監視屬性

本篇會提及Vue內的一項配置watch配置項
其可以有效監測數據的更新、改變

handler

在watch的基礎上及是配置一個handler()函數式
handler(val1,val2)其可以接受兩種參數
可以依照需求看需不需要第二個參數使用
val1 : 為新數據
val2 : 為就數據
只要在數據發生異動watch就會回調handler()函數式
以下是範例：

<script>
var i = 0;
var vm = new Vue({
    el : "#root",
    data : {
            name : 'Adam',
    },
    watch : {
        name : {
            handler( val1, val2 ){
                i ++;
                console.log("更改數據" + i + "次");
                console.log("新數據 : ", val1);
                console.log("舊數據 : ", val2);
            }
        }
    }
})
</script>

依上面的程式碼,當name的數據發生改變,例如：
Adam -> Andy
那就會取得到val1 = 'Andy', val2 = 'Adam'
這樣的參數

immediate

watch調用handler()的時機在於數據的變化
但如果有像需求需要在頁面的初始化終究調用handler()函數式
那就是在數據為更新時使用handler
這時候可以設置immediate : true
這項設定平時默認為false
開啟後可以達到以上的效果
以下程式碼：

<script>
var i = 0;
var vm = new Vue({
    el : "#root",
    data : {
        name : 'Adam',
    },
    watch : {
        name : {
            immediate: true,
            handler( val1, val2 ){
                i ++;
                console.log("更改數據" + i + "次");
                console.log("新數據 : ", val1);
                console.log("舊數據 : ", val2);
            }
        }
    }
})

深度監視-deep

data的配置通常不會只是單一key對上一個value
一個對象中可能裡面有眾多數據
但對於watch而言其看的是監視屬性的變化
若見天有一項配置如下

<script>
var vm = new Vue({
    el : "#root",
    data : {
        number : {
            num : 1,
            num2 : 100
        }
    },
    watch : {
        "number" : {
            handler(){
                console.log("目前總和 : ", this.number.num2 + this.number.num);
            }
        }
    }
})
</script>

更新number.num或是number.num2都不會觸發handler()的回調
對watch而言,number的對象確確實實換了一個
才是handler()調用的時機點
但這樣對開發來說並不是很有彈性
watch中有一項設定：deep(默認false)

<script>
var vm = new Vue({
    el : "#root",
    data : {
        number : {
            num : 1,
            num2 : 100
        }
    },
    watch : {
        "number" : {
            deep : true,
            handler(){
                console.log("目前總和 : ", this.number.num2 + this.number.num);
            }
        }
    }
})
</script>

將其開啟可以達到number.num或是number.num2的異動也能觸發handler()的回調

簡寫

講了兩項配置,但依情況而定還是很有可能在開發中不會用到除了handler()函數式以外的設定
這時候可以審略handler()將配置從對象改成函數式回調

<script>
var i = 0;
var vm = new Vue({
    el : "#root",
    data : {
            name : 'Adam',
    },
    watch : {
        name( val1, val2 ){
            i ++;
            console.log("更改數據" + i + "次");
            console.log("新數據 : ", val1);
            console.log("舊數據 : ", val2);
        }
    }
})
</script>

計算屬性 VS 監視屬性

• watch： 可以達到computed達不到的功能,比如說watch的異步功能
• computed： 功能上沒辦法像watch功能多,但computed的使用上比watch好上很多,操作上相對直觀,可讀性、維護性上都比watch好,通常若非必要,會選擇使用computed(methods也是)

總結

提及了事件綁定,計算屬性,監視屬性
三者的共通點都會做邏輯運算
在配置時需要注意：

• 所有被 Vue()管理的函數, 最好寫成普通函數, this以便於指向 vm或組件實例對象
• 所有不被 Vue()管理的函數 EX : 定時器回調, AJAX回調等等 , 最好寫成箭頭函數, 這樣 this的指向才是 vm或組件實例對象

在vue實例中配置函數為了能夠方便的取用data數據,this的使用量是頻繁的
箭頭函數的使用回拿到最外層windox的配置項
這點即為重要,在使用Vue的時候要注意到取得的物件