vue小结之 watch监听（对象，单个字段属性）

最新推荐文章于 2025-06-10 16:19:27 发布

原创最新推荐文章于 2025-06-10 16:19:27 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了Vue中的watch特性，重点讲解了如何使用deep属性进行深层监听对象属性的变化，以及immediate属性在初始值传递时的触发应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

好记性不如个烂笔头：方便每次使用忘记的时候，看看点滴的累积，点滴的成长！

watch监听使用：

1.监听对象：

当isLogin为0 的时候 input:checkbox会为false 1是true。

deep属性：data某对象obj
watch 的一个属性，默认值是 false，表示深度监听，比如我们 data 里有busiCode[]数组：监听字段isLogin，

注意关键字deep：一层层的寻找你要监听的字段，直到找到为止！如果没有该属性，则监听不到isLogin。

  watch:{
        data: {
            handler(newVal, oldVal) {
                if(this.data.busiCode[0].isLogin === true){
                    this.data.busiCode[0].isLogin = 1
                } else if(this.data.busiCode[0].isLogin === false) {
                    this.data.busiCode[0].isLogin = 0
                }
            },
            deep: true
        } 
    },

监听某字段比如图片宽高的变化，赋值给相应的div：

  watch:{
        data: {
            handler(newVal, oldVal) {
               this.imgDivWidth = this.imgWh;//监听图片宽，设置div宽度
               this.imgDivHig = this.imgHig;//监听图片高，设置div高度
            },
         immediate:true
      
        }
    },

如果父组件向子组件传值时这时候值并没有发生改变我们却想在初始的时候就触发watch 就需要这个属性了 immediate 默认为false 为true时只初始化可以被监听

immediate属性：立即发生改变，使用场景：当父组件向子组件传值的时候，在初始的时候就赋值执行wa

代码这里就不放置了。就是deep:true一样的位置一样的写法它俩可以共存：immediate: true；