vue watch监听

KLW752025-12-28 10:14

watch选项配置一个函数来监听某个响应式属性的变化。监听回调函数默认在数据发生变化时回调，且接收新值和旧值两个参数。

watch选项不仅可以监听data对象中外部的属性，还可以监听其内部的属性监听内部属性就要写

'属性值':function(){

}

即时回调与深度监听

watch回调默认是在数据发生变化时自动调用，但是可以初始化时就执行一次监听。watch的属性不能再是一个函数了，需要是一个配置对象，并通过handler配置来指定监听回调函数。同时我们可以通过配置immediate为true来指定监听回调函数在初始化过程中执行第1次，当然在被监听数据发生改变时也会执行。

复制代码

watch:{
    监听的值:{
        handler(newVal,oldval){
        
        },
        immediate:true

    }
}

可以理解为添加，immediate:true，初始化时就会执行1次

watch默认是浅层监听，只有在被监听属性本身发生变化时才会触发回调，它监听不到属性对象内部的数据变化。可以通过将deep配置为true来实现深度监听到对象或数组内任意数据的变化

复制代码

watch:{
    监听的值:{
        handler(newVal,oldval){
        
        },
        immediate:true,
        deep：true

    }
}