vue2监听器watch

监听器watch

实时监视数据变化，执行一些业务逻辑或异步操作，一旦监听的数据变化了立马执行

• watch声明在跟data同级的配置项中

• 两种写法

  1. 简单类型数据直接监听（使用的是方法的写法）

     watch: {
       // 该方法会在数据变化时，触发执行
       数据属性名 (newValue, oldValue) {
         一些业务逻辑 或 异步操作。 
       },
       '对象.属性名' (newValue, oldValue) {
         一些业务逻辑 或 异步操作。 
       }
     }
     

     eg：

     data: { 
       num: 0,
       obj: {
         num: 0
       }
     },
     
     watch: {
       // 该方法会在数据变化时，触发执行
       // 接收一个新值一个旧值，只要新值可以省略旧值参数
       num (newValue, oldValue) {
           
         一些业务逻辑 或 异步操作。 
       },
           // js中属性名有特殊字符需要加引号
       'obj.num' (newValue, oldValue) {
         一些业务逻辑 或 异步操作。 
       }
     }
     

  2. 添加额外的配置项（使用的是对象的写法）

     • deep: true 对复杂类型进行深度的监听，比如对象中的所有属性
     • immdiate: true 初始化，进入页面立即执行一次

     watch: {// watch 完整写法
       对象: {
         deep: true, // 深度监视
         immdiate:true,//立即执行handler函数
         handler (newValue) {
             // 处理逻辑
           console.log(newValue)
         }
       }
     }
     

     eg：

     data: { 
       obj: {
         num: 0,
         money: 0
       }
     },
     
     watch: {
       obj: {
         deep: true, // 深度监视
         immdiate:true,//立即执行handler函数
         handler (newValue) {
             // 处理逻辑
           console.log(newValue)
         }
       }
     }