vue中监听属性、深度监听

  1. 监视属性watch: 当监听的属性变化时,回调函数自动调用,进行相关操作,监听的属性必须存在,才能进行监视!!!
  2. 监听属性的2种写法:

      正常写法
         第一种:new vue 时传入watch配置 
         watch:{
            监听的对象:{
               handler(){
                  
               }
            }
         }
         第二种:通过$.watch监视
         vm.$watch('监听的对象',
            {
               handler(){

         }
            })
      
      简写方法
      watch:{
            监听的对象(newvalue,oldvalue){
            }
         }

      vm.$watch('监听对象',handler(newValue,oldValue)=>{
         console.log('isHot被修改了',newValue,oldValue,this)
      }) 

3.深度监听:

(1).Vue中的watch默认只监听一层。

(2).在监视属性中配置deep:true可以监听对象内部值的改变,多层监听。

 "obj.onj.work.ss":{
                    deep:true,
                    handler(){
                        console.log('监听到对象的属性改变了');
                    }
                }

4.computed和watch之间的区别

(1). computed能完成的功能,watch都可以完成。

(2). watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作!!!!!!。

(3). watch没有缓存,computed有缓存

你可能感兴趣的:(it,web前端,Vue,vue.js,javascript,前端)