Vue监测属性

看B站教学视屏做的笔记

1. 当被监视的属性变化时，回调函数自动调用，进行相关操作

2. 监视的属性必须存在，才能进行监视

3. 监视的两种写法：

   • new Vue时传入watch配置
   • 通过vm.$watch监视

4. 深度监视

   • Vue中的watch默认不监测对象内部值的改变（一层）
   • 配置deep:true可以监测对象内部值改变（多层）
   • Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
   • 使用watch是根据数据的具体结构，决定是否采用深度监视

const vm = new Vue({
    el:'#root',
    data:{
        isHot:true,
        numbers:{
            a:1,
            b:2
        }
    },
    watch:{
        //完整写法
        isHot:{
            immediate:true,//初始化时调用handler
            handler(newValue,oldValue){
                console.log(newValue,oldValue)
            }//isHot发生变化是调用handler
        }
        //简单写法
        isHot(newValue,oldValue){
    		console.log(newValue,oldValue)
		}
        //监视多级结构中某属性的变化
        'numbers.a':{
        	handler(){
    			console.log('a改变了')
			}
    	}
        //监视多级结构中所有属性的变化
        numbers:{
            deep:true,//深度监视开关，默认false
            handler(){
    			console.log('a改变了')
			}    
        }
    }
    //$watch完整写法
    vm.$watch('isHot',{
    	immediate:true,//初始化时调用handler
        handler(newValue,oldValue){
        	console.log(newValue,oldValue)
    	}//isHot发生变化是调用handler
	})
    //$watch简单写法
	vm.$watch('isHot',(newValue,oldValue){
        	console.log(newValue,oldValue)
	})
})