vue watch的基本用法

watch 侦听器

watch是vue中的监听数据变化的一个选项，用于声明在数据更改时的侦听回调。

基本用法

1、是一个对象，键是要侦听的表达式（可以是data或computed或props的值），值一般是对应的回调函数。

 <div id="app">
 	a:<input type="text" v-model.number="a">
 </div>

//vue代码
 var vm=Vue.createApp({
 	data(){
    	return{
    		a:21
            }
    },
    watch:{
   //可以是key：value的形式
    	a(){
            console.log('a改变了')            
        }       
    }
    vm.mount('#app')//挂载dom
	vm.a='666'  //数据发生变化
})

2、函数a可以接收两个形参，分别是，newValue，oldValue-见名知意，一个是新值，一个是旧值。

a(newValue,oldValue){
    console.log('现在的值'+newValue);
    console.log('更新之前的值'+oldValue);
}

3、也可以是字符的写法，存放的是定义在methods中的函数名 如：b:‘fn’

 methods:{
   fn(newValue,oldValue){
        console.log(newValue,oldValue)
   }   
 },
 watch:{
     b:'fn'   //fn是一个函数
 }

4、也可以侦听到对象中的某个属性的变化，比如 ‘obj.sid’:function(){} 只监听对象的某个具体属性，可以避免其他属性受到监听变化。

data(){
	return{
         a:213,
         b:'阿珍',
         c:'111',
         obj:{ //侦听的对象
            sid:'123'
         }
     }
},
  watch:{
    'obj.sid':function(){  //侦听对象obj中sid属性的变化            
          console.log('newValue:'+newValue);
    }
 }

5、key:value的形式 ，value可以是一个对象，处理函数要写在handler属性中， 比如 c:{}

1. deep和immediate是watch中额外的选项，还有其他的watch属性。

deep:true/false 深度监听，意思是如果没有开启deep是无侦听到对象中内部属性的变化，如果想侦听到对象中内部的或者更深一层属性的变化，开启deep就能。注意：深度侦听需要遍历被侦听对象中的所有嵌套的
property，当用于大型数据结构时，开销很大。因此请只在必要时才使用它，并且要留意性能。

immediate:true/false 无论值是否发生改变，时刻都会监听

2. 建议用对象+handler函数的写法

6、c:{ //c也可以是对象和数组，c.某个属性，但是不支持更复杂的表达式，如c.d.f 详细看官方文档

handler(newValue,oldValue){
 	console.log('c'+newValue,oldValue);
},
deep:true ,//启用深度监听
immediate:true  //侦听器创建时触发，第一次调用时，旧值为undefined。
},

7、key:value的形式 ，value可以是一个数组，数据里面可以存放跟形式的数据，字符串、函数、对象（handler）等

 d:[
 // 数组的每一项可以是对象的形式、字符串的形式、handler对象等
     'fn1',
      function(newValue,oldValue){
          console.log('123');
      }
 ]