Vue监视属性

最新推荐文章于 2024-07-16 09:35:10 发布

相爱相杀的代码

最新推荐文章于 2024-07-16 09:35:10 发布

阅读量228

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_51676421/article/details/125821599

版权

Vue监视属性

关键字watch

watch默认不监测对象内部的值的改变

       //第一种写法
             watch:{
                isHOT:{
                   immediate:true,//初始化的时候被调用一下
                    handler(newValue,oldValue){
                        console.log('isNOT被修改了',newValue,oldValue)
                     }
               }
             }

        })
        //第二种写法
        vm.$watch('isHOT',{
              
                    immediate:true,//初始化的时候被调用一下
                    //handler当isNot被改变时调用
                    handler(newValue,oldValue){
                        console.log('isNOT被修改了',newValue,oldValue)
                    }
                })

第二种写法监视属性必须存在。

深度监视：

指定deep为true

number:{a.... b.....}

 //第一种写法
            watch:{
                //监测所有number属性
                // number:{
                //     deep:true,//深度监视
                //     handler(){
                //         console.log('a,b修改了')
                //     }
                // },
                //单独监视一个
                'number.a':{
                    handler(){
                        console.log('a单独的被修改了')
                    }
                }
            }

简写：

data:{

isHOT:true

      //第一种写法-----只有handler的时候才可以简写
      //属性（）{}
            watch:{
                isHOT(newValue,oldValue){
                        console.log('isNOT被修改了',newValue,oldValue)
                    }      
            }
      //第二种写法
      //vm.$watch('属性',函数)
         vm.$watch('isHOT',{
                    function(newValue,oldValue){
                         console.log('isNOT被修改了',newValue,oldValue)
                     }
                 })