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