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

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

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；