vue watch进阶版

最新推荐文章于 2024-09-06 22:20:29 发布

weixin_42416999

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量45

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_42416999/article/details/129090431

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js中watch对象的使用，包括如何定义监听器handler，如何通过deep属性实现对对象内部嵌套数据变化的监听，以及使用immediate属性在声明时立即执行handler。同时展示了如何同时使用多个处理方法。

摘要由CSDN通过智能技术生成

基础使用

watch:{
    a(){
     //doSomething
    }
}

handler函数:以对象和handler函数的方式来定义一个监听属性，handler就是处理监听变动时的函数

watch:{
    a:{
        handler:'doSomething'
    }
},
methods:{
    doSomething(){
        //当 a 发生变化的时候，做些处理
    }
}

deep属性:

当watch的是一个Object类型的数据，如果这个对象内部的某个值发生了改变，并不会触发watch动作！

也就是说，watch默认情况下，不监测内部嵌套数据的变动。但是很多情况下，我们是需要监测的！

为解决这一问题，就要使用deep属性

watch:{
    obj:{
        handler:'doSomething',
        deep:true
    }
},
methods:{
    doSomething(){
        //当 obj 发生变化的时候，做些处理
    }
}

immediate属性:

watch 的handler函数通常情况下只有在监听的属性发生改变时才会触发。

但有些时候，我们希望在组件创建后，或者说watch被声明和绑定的时候，立刻执行一次handler函数，这就需要使用immediate属性了，它默认为false，改为true后，就会立刻执行handler。

watch:{
    obj:{
        handler:'doSomething',
        deep:true,
        immediate:true
    }
},
methods:{
    doSomething(){
        //当 obj 发生变化的时候，做些处理
    }
}

同时使用多个方法:使用数组可以设置多项，形式包括字符串、函数、对象

  watch: {
    // 你可以传入回调数组，它们会被逐一调用
    a: [
        
      'handle1',
        
      function handle2 (val, oldVal) { /* ... */ },
        
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
        
    ],
    
  }