Vue的watch侦听器

watch侦听器是我们监视数据变化的一种函数，并可以针对数据的变化来做出对应的操作

与Vue2的过滤器相似，watch侦听器也需要在Vue实例对象中添加一个watch节点

<div id="app">
    <input type="text" v-model="test">
</div>

const vm = new Vue({
    el:'#app',
    data:{
        test:'hello Vue'
    },
    watch:{
        //侦听test值的变化
        //要监视哪个数据的变化就把键作为方法名
        //newVal是变化后的新值--oldVal是变化前的旧值
        test(newVal,oldVal){
            console.log(newVal,oldVal)
        }
    }
})

这样我们就可以实时监听数据的变化，并触发指定的执行操作

这时我们有一个问题：

我们想要进入网站页面就立即触发依次侦听器-----这个问题该怎么实现呢？

上面的普通方法格式侦听器肯定是实现不了的，我们需要使用对象格式的侦听器，并通过immediate选项让侦听器自动触发：

watch:{
    test:{
        handler(newVal,oldVal){
            console.log(newVal,oldVal)
        },
        immediate : true
    }
}

这样我们每次进入网站页面或者刷新页面都会触发一次侦听器：

除了immediate选项，我们的侦听器还有一个deep选项，是用来进行深度监听的：

如果我们侦听的是一个对象，当这个对象中的属性发生了变化的时候，如果不使用deep深度监听的话是不可能监听到对象中属性的变化的，并且侦听器也不会触发

当我们开启深度监听后，只要对象中的任何一个属性发生了变化，都会触发侦听器：

<div id="app">
    <input type="text" v-model="test.val">
</div>

const vm = new Vue({
    el:'#app',
    data:{
        test:{
            val : "hello Vue"
        }
    },
    watch:{
        test:{
            handler(newVal){
                console.log(newVal)
            },
            deep:true
        }
    }
})

这样监听的是对象属性，如果我们想要监听对象的子属性变化，我们需要：

const vm = new Vue({
    el:'#app',
    data:{
        test:{
            val : "hello Vue"
        }
    },
    watch:{
        'test.val'(newVal){
            console.log(newVal)
        }
    }
})

俩种书写方式都可以，个人感觉如果业务不繁琐的话还是''引号方式比较好用

猜你喜欢