快捷導航

Vue?watch監(jiān)聽使用的幾種方法

更新時間：2022年12月22日 10:31:25 作者：script~

watch是由用戶定義的數(shù)據(jù)監(jiān)聽，當監(jiān)聽的屬性發(fā)生改變就會觸發(fā)回調(diào)，這項配置在業(yè)務(wù)中是很常用。在面試時，也是必問知識點，一般會用作和computed進行比較。那么本文就來帶大家從源碼理解watch的工作流程，以及依賴收集和深度監(jiān)聽的實現(xiàn)

一、watch使用的幾種方法

1、通過 watch 監(jiān)聽 msg 數(shù)據(jù)的變化。

watch: {
    msg(oldValue, newValue) {
        console.log(oldValue)
        console.log(newValue)
    }
}

2、通過 watch 監(jiān)聽 obj數(shù)據(jù)的變化。（深度監(jiān)聽 deep）

data（） {
    return {
        obj: {
            'name': "趙",
            'age': 18
        },
    }
},
watch: {
    obj: {
        handler(oldValue,newVal) {
             console.log(oldValue)
             console.log(newValue)
        },
        deep: true  // 深度監(jiān)聽
    }
}

3、通過 watch 監(jiān)聽 data 數(shù)據(jù)的變化，數(shù)據(jù)發(fā)生變化時,執(zhí)行 change 方法

watch: {
    data： 'change' // 值可以為methods的方法名
}，
methods: {
    change(oldVal,newVal){
　　　console.log(oldVal,newVal)
　 }
}

二、watch中的immediate與handler和deep屬性

1、immediate屬性

使用watch時有一個特點，就是當值第一次綁定時，不會執(zhí)行監(jiān)聽函數(shù)，只有值發(fā)生改變時才會執(zhí)行。如果我們需要在最初綁定值的時候也執(zhí)行函數(shù)，則就需要用到immediate屬性。

2、handler屬性

watch中需要具體執(zhí)行的方法

3、deep屬性

當需要監(jiān)聽一個對象的改變時，普通的watch方法無法監(jiān)聽到對象內(nèi)部屬性的改變，此時就需要deep屬性對對象進行深度監(jiān)聽，數(shù)組字符串一般不需要

data（） {
    return {
        obj: {
            'name': "王",
            'age': 18
        },
    }
},
watch: {
    obj: {
        // 執(zhí)行方法
        handler(oldValue,newVal) {
             console.log(oldValue)
             console.log(newValue)
        },
        deep: true, // 深度監(jiān)聽
        immediate: true  // 第一次改變就執(zhí)行
    }
   // 如果只需要監(jiān)聽對象中的一個屬性值，則可以做以下優(yōu)化：使用字符串的形式監(jiān)聽對象屬性：
    'obj.name': {
        // 執(zhí)行方法
        handler(oldValue,newVal) {
             console.log(oldValue)
             console.log(newValue)
        },
        deep: true, // 深度監(jiān)聽
        immediate: true  // 第一次改變就執(zhí)行
    }
}

到此這篇關(guān)于Vue watch監(jiān)聽使用的幾種方法的文章就介紹到這了,更多相關(guān)Vue watch監(jiān)聽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: