Vue之監聽(tīng)方法案例詳解

vue中的監聽(tīng)方法

watch

注意

名字 你想監聽(tīng)哪個(gè)屬性，就要和他起一樣的名字

1.作用

用來(lái)監聽(tīng)vue實(shí)例中的數據變化
可以隨時(shí)修改狀態(tài)的變化

2.觸發(fā)條件

當你監聽(tīng)的屬性發(fā)生變化時(shí)，會(huì )自動(dòng)調用對應的監聽(tīng)方法

3.使用場(chǎng)景

用于異步處理，開(kāi)銷(xiāo)比較大的運算

4.示例

	 watch:{
             name(newvalue,oldvalue){
                  //計算屬性可以接受兩個(gè)參數,第一個(gè)參數是新的屬性值,第二參數是老的屬性值
                    // this.age
                    // console.log('name屬性發(fā)生變化了')
                    console.log(newvalue,oldvalue)
                }

5.監聽(tīng)對象時(shí)

<script>
export default {
    data() {
        return {
            obj: {
                name: "張三",
                age: 20,
                children: [
                    {
                        name: "李四",
                        age: 27
                    },
                    {
                        name: "王五",
                        age: 23
                    }
                ]
            }
        };
    },
    watch: {
        obj: {
            handler: function(newVal, oldVal) {
                console.log("newVal:", newVal);
                console.log("oldVal:", oldVal);
            },
            deep: true,
            immediate: true
        },
        "obj.name": function(newVal, oldVal) {
            
            console.log("newVal obj.name:", newVal);
            console.log("oldVal obj.name:", oldVal);
        }
    },
};
</script>

監聽(tīng)對象的時(shí)候，需要加deep:true，這樣才能深入底層去實(shí)時(shí)監聽(tīng)，如果沒(méi)有加的話(huà)，對象是監聽(tīng)不到變化的。

immediate屬性：布爾值
immediate：true：首次加載就監聽(tīng)數據變化
immediate：false：只有發(fā)生改變才監聽(tīng)

deep:true；

是開(kāi)啟深層次的監聽(tīng)，即所有屬性都加上監聽(tīng)器，如果其中一個(gè)發(fā)生改變了就執行handler函數。

到此這篇關(guān)于Vue之監聽(tīng)方法案例詳解的文章就介紹到這了,更多相關(guān)Vue之監聽(tīng)方法內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！