Vue - watch高階用法

1. 不依賴新舊值的watch

很多時候，我們監聽一個屬性，不會使用到改變前后的值，只是為了執行一些方法，這時可以使用字符串代替

data:{
    name:'Joe'
},
watch:{
    name:'sayName'
},
methods:{
    sayName(){
        console.log(this.name)
    }
}

2.立即執行watch

總所周知，watch是在監聽屬性改變時才會觸發，有些時候，我們希望在組件創建后watch能夠立即執行一次。

可能想到的的方法就是在create生命周期中調用一次，但這樣的寫法不優雅，或許我們可以使用這樣的方法

data:{
    name:'Joe'
},
watch:{
    name:{
        handler: 'sayName',
        immediate: true
    }
},
methods:{
    sayName(){
        console.log(this.name)
    }
}

上面我們給入一個對象

handler： 觸發監聽執行的方法（需要用到改變前后的值時，可換成函數）

immediate： 監聽開始之后被立即調用

3. 深度監聽

在監聽一個對象時，當對象內部的屬性被改變時，無法觸發watch，我們可以繼續使用對象的方式為其設置深度監聽

data:{
    studen: {
        name:'Joe',
        skill:{
            run:{
                speed: 'fast'
            }
        }
    }
},
watch:{
    studen:{
        handler: 'sayName',
        deep: true
    }
},
methods:{
    sayName(){
        console.log(this.studen)
    }
}

設置deep為true后，無論嵌套多深，只要屬性值被改變都會觸發監聽。但這種方式開銷會較大，監聽器會一層一層往下找，為每個屬性添加監聽器。

如果我們只是監聽對象的某個屬性改變時，可以這樣做：

 

watch:{
    'studen.name':{
        handler: 'sayName'
    }
}

 

4.監聽執行多個方法

使用數組可以設置多項，形式包括字符串、函數、對象

data:{
    name:'Joe'
},
watch:{
    name:[
        'sayName1',
        function(newVal, oldVal){
              this.sayName2()
        },
        {
            handler: 'sayName3',
            immaediate: true
        }
    ]
},
methods:{
    sayName1(){
        console.log('sayName1==>', this.name)
    },
    sayName2(){
        console.log('sayName2==>', this.name)
    },
    sayName3(){
        console.log('sayName3==>', this.name)
    }
}        

 

watch文檔：https://cn.vuejs.org/v2/api/#watch