vue 中的侦听属性watch

最新推荐文章于 2024-09-09 16:42:29 发布

那年1998

最新推荐文章于 2024-09-09 16:42:29 发布

阅读量492

点赞数

CC 4.0 BY-SA版权

分类专栏：框架

本文链接：https://blog.youkuaiyun.com/qq_38857381/article/details/90340167

框架专栏收录该内容

1 篇文章

订阅专栏

博客介绍了数据监听的作用是监听数据变化，阐述了简单数据类型和复杂类型的监听方式。对于复杂类型监听 obj 需配置参数，如 deep 设为 true 实现深度监听，immediate 设为 true 可立即监听，handler 为深度监听对应函数名。还提到一种简单方式但不能页面加载就监听。

侦听的作用：监听数据的变化的

使用

<div id="app">
    <h1>{{ num }}</h1>
</div>

（1）简单的数据类型：

    const vm = new Vue({
        el:'#app',
        data:{
            num:100
        },
        watch:{
            num (newVal ,oldVal){  //获取新的值，得到修改前的值
                console.log('新的值' , newVal ,'旧的值'  ,oldVal)
            }
        }
    })

（2）复杂类型

const vm = new Vue({
    el:'#app',
    data:{
        obj:{  //对象的形式 
            name:'szf',
        }
    },
    watch:{
        obj:{
            handler(newVal){
                console.log(newVal.name);  //因为复杂类型直接写  监听的是对象的地址  所以不会打印
            }
        }
    }
})

监听 obj ,如果监听成功 newVal 就是obj的最新值 newVal 也是对象

因为obj是复杂类型引用类型,直接这么写,监听的是对象的地址

所以需要配置参数

（1）deep：true：深度监听

（2）immediate: true, //立即监听这样在页面刷新的时候就开始监听了，而不是等到第一次触发

（3）handler（newVal）：深度监听对应的函数名必须为handler,否则无效果,因为watcher里面对应的是对handler的调用

const vm = new Vue({
    el:'#app',
    data:{
        obj:{  //对象的形式 
            name:'szf',
        }
    },
    watch:{
        obj:{
            deep:true,
            immediate:true,
            handler(newVal){
                console.log(newVal.name);  //因为复杂类型直接写  监听的是对象的地址  所以不会打印
            }
        }
    }
})

还有一种方式简单粗暴点，但是不能够页面加载就监听（相当于上面的代码少了immediate参数）

 'obj.name'(newVal){
       console.log(newVal);
    }