徹底弄懂 Vue 監聽對象 watch 中 deep 和 immediate 的用法

watch 對象

監聽模型變量的變化。是一個對象，以鍵值對形式出現。

值可以是函數：就是當你監控的模型變量變化時，需要執行的函數，這個函數有兩個形參，第一個是變化后的值，第二個是變化前的值。

值也可以是函數名：不過這個函數名要用單引號 '' 來包裹。

 

值是包括選項的對象：選項包括有三個。

handler：其值是一個回調函數。即監聽到變化時應該執行的函數。

deep：其值是 true 或 false ；確認是否深入監聽。deep 的意思就是深入觀察，監聽器會一層層的往下遍歷，給對象的所有屬性都加上這個監聽器（受現代 JavaScript 的限制 (以及廢棄 Object.observe )，Vue 不能檢測到對象屬性的添加或刪除）。

immediate：其值是 true 或 false；immediate : true 代表如果在 watch 里聲明了之后，就會立即先去執行里面的 handler 方法，如果為 false 就跟我們以前的效果一樣，不會在綁定的時候就執行。

 

請看如下示例代碼：

 

var vm = new Vue({
        el: '#box',
        data: {
            lists: [
                {
                    id: 1,
                    title: 'lorem',
                    profile: {id: 1, username: 'lorem'}
                },
                {
                    id: 2,
                    title: 'andy',
                    profile: {id: 2, username: 'andy'}
                }
            ]
        },
        watch: {
            //  改成了一個對象，屬性值 handler 固定寫法
            lists: {
                handler: function (newVal, oldVal) {
                    console.log('lists change....')
                },
                deep: true,
                // 代表開啟深度監控。意思是數據的任何一個屬性發生變化，監視函數需要執行
                immediate: true,
                // 如果immediate 設置為true, 代表代碼一加載 立馬執行監視函數
            }
        }
    })