首页 Vue

# 侦听器

watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作

1
2
3
4
5
6
7
8
9
10
11
const vm = new Vue({
    el: '#app',
    data: {username: ''},
    watch: {
        //监听username值的变化
        //newVal是变化之后的新值, oldVal是变化之前的旧值
        username(newVal, oldVal) {
            console.log(newVal, oldVal)
        }
    }
})

侦听器的格式

  • 方法格式的侦听器
    • 缺点 1 : 无法在刚进入页面的时候自动触发
    • 缺点 2 : 如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器
  • 对象格式的侦听器
    • 好处 1 : 可以通过 immediate 选项，让侦听器自动触发
    • 好处 2 : 可以通过 deep 选项，让侦听器深度监听对象中每个属性的变化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
data: {
    info: {
        username: 'zhangsan',
            gender: 'male'
    }
},
watch: {
    //当info对象中的username或者gender改变时, 不会触发方法格式侦听器
    info(newVal, oldVal) {
        console.log('值改变了')
    }

    //对info对象中的username或者gender改变时, 当deep属性设置为true时, 会触发对象格式侦听器
    info: {
        handler() {
            console.log('值改变了')
        },
        deep: true
    }
}

如果要侦听的是对象的子属性的变化，则必须包裹一层单引号 ‘info.username’(newVal){do somthing}

更新于 阅读次数 次