Vue中watch用法详解
那该多好 Lv2
  2021-06-22 19:01:52 2021-06-22 19:01      

基本用法

当data中变量的值变化时，watch监听到并且执行

1
2
3
4
5
6
7
8
9
10
11
12
export default {
  data(){
    return {
      value:''
    }
  },
  watch:{
    value(newVal, oldVal){
      /* 要执行操作 */ 
    }
  }
}

handler方法和immediate属性

上面的例子只有value的值变化时，watch才会执行。如果想从开始的时候就对value进行监听，就需要用到 handler 和 immediate属性

1
2
3
4
5
6
7
8
9
10
watch:{
  value:{
    handler(newVal, oldVla) {
      /* 要执行操作 */ 
    },
    // 当immediate 值为true时, 会立即执行handler方法
    // 如果值为false，效果同上面例子
    immediate:true
  }
}

deep属性（深度监听）

当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变。需要添加deep属性对 对象进行深度监听

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
export default {
  data(){
    return {
      obj:{
        a: 1,
        b: 2,
        c:{
          d:3
          f:4
        }
      }
    }
  },
  watch:{
    obj:{
      handler(newVal, oldVal){},
      immediate:true,
      deep:true
    }
  }
}

此时会给整个对象的属性都加上监听，当对象属性较多时，每个值变化都会触发handler函数。
如果只需要监听一个属性，可以使用字符串形式监听对象内的单个属性

1
2
3
4
5
6
7
watch:{
  'c.d':{
    handler(newVla, oldVal){},
    immediate:true,
    deep:true
  }
}

数组（一维、多维）的变化不需要通过深度监听，对象数组中对象的属性变化需要deep的深度监听

 评论