深入了解vue.js 之watch用法

這篇文章給大家分享的內容是深入了解vue.js 之watch用法，有著一定的參考價值，有需要的朋友可以參考一下

watch ：

觀測Vue實例上的資料變動，對應一個對象，
鍵：就是需要監測的那個東西，
值：

1.可以是當鍵變化時執行的函數，有兩個參數，第一個是變化前的值，第二個是變化後的值。
 2.可以是函數名，得用單引號包裹。
 3.可以是一個對象，這個對像有三個選項：
 （1）handler ：一個回呼函數，監聽到變化時應該執行的函數。
 （2）deep ：boolean值，是否有深度監聽。 （一般監聽時是不能監聽到物件屬性值的變化的，陣列的變化可以聽到）
 （3）immediate ：boolean值，是否立即執行handler函數。

watch的三個情況：

1. 普通的watch：

    el:'#app',
    data:{
        meter:1000,
        kilameter:1
    },
    watch:{
        meter:function(val){
            this.kilameter = val * 0.1;
        },
        kilameter:function(val){
            this.meter = val *1000;
        }
    }
})

2.陣列的watch：

    el:'#app',
    data:{
        arr:[1,2,3]
    },
    watch:{
        arr:function(oldV,newV){
            console.log(oldV);
            console.log(newV);      
        }
    }
})

3.對象的watch：

    el:'#app',
    data:{
        obj : {
            a:111,
            b:222
        }   
    },
    watch:{
        obj:{
            handler:function(oldV,newV){
                console.log(oldV);
            },
            deep:true
        }
    }
)

               

相關推薦：

VueJs探索之watch用法詳解

VueJs $watch()方法總結!!

以上是深入了解vue.js 之watch用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！