watch侦听器的使用

最新推荐文章于 2024-06-24 09:47:04 发布

原创最新推荐文章于 2024-06-24 09:47:04 发布 · 366 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5

Vue的双向数据绑定是其一大亮点，而watch侦听器则提供了对数据变化的高级响应机制。通过watch，我们可以监听并处理数据的变化，例如在动态网页中监控数值的更新。深度侦听(deep)选项允许我们跟踪复杂对象的深层变化，而immediate属性则决定了是否在初始渲染时立即触发回调。理解并巧妙运用watch可以提升开发效率和代码的健壮性。

当我们在使用vue是最喜欢的莫过于vue的双向数据绑定,但是有一些属性也可以是我们开发的更方便,其中被我们忽视的一个属性watch侦听器.我们在开发的过程中，对于动态网页而言，大部分的数值都是在不断变化的，如果我们需要侦听某些数值的变化，Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动侦听器watch

侦听器的语法是 watch: {}

所有需要侦听的属性都放在watch里面注意它不是一个函数,不能写().

  watch:{
            arr:{
                deep:true,
                handler(newV,oldV){
                    console.log('newV',newV);//表示更新之后的arr
                    console.log('oldV',oldV);//表示更新之前的arr
                    
                },
                immediate:ture

            }
        }

watch属性中，我们看到形式依然是一个键值对的方式，但是值中我们包了一个大括号，并且除了处理函数外，还加了一句deep:true，这句就是深度侦听的标志。

深度侦听中还有一个属性，immediate 表示第一次加载时就会侦听