vue2的監聽watch小爆料

LIJING0906發表於2018-08-25
Vue

此文首發於lijing0906.github.io
跟vue相愛相殺這麼久了，今天第一次來爆點小料(主要還是為自己做筆記)------vue2的watch監聽

路由監聽,也適用於普通變數（基本資料型別）的監聽

寫法一,普通監聽

    watch: {
        $route(nVal, oVal){
            console.log(nVal) //列印的是路由物件
        }
    }
複製程式碼

寫法二，深度監聽

    watch: {
        handler: function(nVal, oVal){
            console.log(nVal) //列印的是路由物件
        },
        deep: true
    }
複製程式碼

普通監聽和深度監聽的區別: 普通監聽只能監聽普通（基本資料型別）的變數，如果想監聽物件或者陣列的變化，就需要深度監聽。 但這裡路由是特殊的，既能用普通監聽，也能用深度監聽

寫法三，呼叫監聽方法

    watch: {
        '$route': 'getRoute' //$route:'getRoute'也OK 
    },
    methods: {
        getRoute(){
            console.log(this.$route.path) //列印的是路由物件的path屬性
        }
    }
複製程式碼

寫法四，立即執行或阻止複用

有這樣一種場景，page/a跳轉到page/b，這兩個頁面是同一個元件，結果就是路徑變了，但是元件的內容沒變，造成這個結果的原因是：vue-router檢測到這是同一個元件，決定複用這個元件， 所以寫在鉤子裡的方法不會執行。有兩個解決方法： 1.

    '$route': {
        handler: 'getRoute', //處理方法，寫在methods裡即可
        immediate: true //立即執行 
    }
複製程式碼
    <router-view :key='$route.fullpath'></router-view>
複製程式碼

通過繫結唯一的值來阻止複用，可以說是一勞永逸，但是會犧牲一點點效能，魚和熊掌不可兼得

監聽物件，也適用於陣列的監聽

前面的路由監聽中已經提到深度監聽能監聽物件和陣列的變化

物件整體的監聽

    data(){
        return {
            aObj:{
                aProp: 'a',
                bProp: 'b'
            }
        }
    },
    watch: {
        aObj: {
            handler: function(nVal, oVal){
                console.log(nVal) //列印的是aObj這個物件
            },
            deep: true
        }
    }
複製程式碼

物件某個屬性的監聽,這個也適用於對vuex的監聽

    data(){
        return {
            aObj:{
                aProp: 'a',
                bProp: 'b'
            }
        }
    },
    computed: {
        getA(){
            return this.aObj.aProp
        }
    },
    watch: {
        getA: function(nVal, oVal){
            console.log(nVal)
        }
    }
複製程式碼

最後的最後

以上是我目前工作中用到過的vue2的監聽，主要目的還是為自己記筆記
工作太忙，沒有心思繼續搞動態的hexo部落格了，先暫時用靜態的吧

相關文章