Vue2 侦听器

监听数据变化，做出相对应的操作

方法格式的侦听器

1
2
3
4
5
6
7
8
9
10
11
12
const vm = new Vue({
   el: '#app',
   data: {
    userName:'';
   },
   methods: {},
   watch: {
    userName(newVal, oldVal) {
      console.log(newVal, oldVal);
    }
   }
})

侦听器函数需要写在 watch 节点内部

侦听器本质上是一个函数，将需要监听的数据作为函数名

改变后的新值作为该函数的第一个参数，改变前的旧值作为第二个参数

每次监听的数据发生变化时，都会调用相对应的侦听器

缺点：

  1. 刚进入页面不会立即触发侦听器，只有当监听的数据的值改变时才会触发
  2. 如果监听的数据是对象的话，对象内属性发生改变，不会触发监听器

对象格式的侦听器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const vm = new Vue({
   el: '#app',
   data: {
    userInof: {
     userName: '',
      userAge: 0,
      userSex: ''
    }
   },
   methods: {},
   watch: {
      userInfo: {
        handler(newVal, oldVal) {
          console.log(newVal, oldVal);
        },
        immediate: true,
        deep: true
      },
     'userInfo.userName'(newVal, oldVal) {
       console.log(newVal, oldVal);
     }
   }
})

handler为侦听器函数

immediate是一个布尔类型的值

  • 当值为 true 时，会立即触发一次侦听器
  • 值为 false 时，效果与方法格式的侦听器相同

deep 是一个布尔类型的值，当值为 true 时，开启深度监听，当对象的属性发生变化时，也会触发侦听器

如果监听的是对象的子属性，则需要包裹一层单引号