Vue 中监听watch 的变化以及watch 各个属性的详解

最新推荐文章于 2026-03-31 04:42:49 发布

原创最新推荐文章于 2026-03-31 04:42:49 发布 · 2.9k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

前端面试题专栏收录该内容

31 篇文章

订阅专栏

本文详细介绍了Vue.js中watch监听器的四种使用方法，包括基本的data变化监听、深度监听对象属性变化、调用方法及immediate属性的使用。同时，解释了immediate和handler如何配合确保初次绑定时执行监听函数，以及deep属性如何实现对象的深度监听。此外，还提到了数组和对象数组的监听策略。

1: watch 使用的几种方法
   通过watch 监听data 数据变化, 数据发生变化时, 就会打印当前值:
   watch: {
     data(val, oldValue) {
       console.log(val);
       console.log(oldValue);
     }
   }

2: 通过watch 监听docData 数据的变化， 数据发生变化时, this.change_number++
   (使用深度监听)
   watch: {
     handler(newVal) {
       this.change_number++
     }
     deep: true
   }
3: 通过watch 监听data 数据变化, 数据发生变化时, 执行changeData() 方法
    watch: {
      data: "chnageData"
    },

    methods: {
      changeData(curVal, oldVal) {
        console.log(curVal, oldVal);
      }
    }
3: 详解watch 监听器中immediate, handler 和deep 属性
   immediate 和 handler 
   这样使用watch 有一个特点, 就是当值第一次绑定他的时候, 不会执行监听函数, 只有孩子发生改变时才会执行。 如果我们在最初绑定值的也会执行函数, 则就需要使用到 immediate 属性。

 watch: {
   docData: {
     handler(neVal) {
       this.chnage_number++
     }
     immediate: true
   }
 }

4: deep 当需要监监听一个对象改变的时候, 普通的watch 方法无法监听到普通对象内部属性, 此时就需要 
   deep 属性对对象进行深度监听
   
   data() {
     return {
       docData: {
        'doc_id': 1,
        'tpl_data': 'abc'
       }
     }
   }   

   watch: {
      docData: {
        docData: {
          handler(newVal) {
            this.change_number++
          }    
        }
        deep: true
      }
   }

 设置为deep: true 则可以监听到docData_id 的变化, 此时会给dicData 的所有属性都加上这个监听器,  
 当对象属性比较多时, 每一个属性的变化都会执行handler。 如果只需要监听对象中一个属性值, 则可以做 
 一下优化: 使用字符串的形式监听对象。
 data() {
   return {
    docData: {
      'doc_id': 1,
      'tpl_data': 'abc'
    }
   }
 }
  
 watct: {
   'docData.doc_id': {
      handler(newVal, oldVal) {
        ....
      }
    }
    deep: true;
 }

 数组(一维， 二维) 的变化是不断需要通过监听器来进行监听,  对象数组中对象的属性变化则需要使用deep 深度监听。