Vue 侦听器

目录

watch 侦听器

判断用户名是否被占用

侦听器的格式

对象格式的侦听器

immediate 选项

deep 选项

侦听对象单个属性的变化

---

watch 侦听器

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

判断用户名是否被占用

侦听器的格式

方法格式的侦听器

• 缺点：无法再刚进入页面的时候自动触发
• 如果侦听的是对象，那么对象中属性的变化并不会被侦听器接收到

对象格式的侦听器

• 可以通过 immediate 选项，让侦听器自动触发
• 可以通过 deep 选项，让侦听器深度侦听对象中每个属性的变化

对象格式的侦听器

1. 深度监听

• Vue 中的 watch 默认不监测对象内部值的改变（一层）
• 配置 deep: true 可以检测对象内部值的改变（多层）

2. 备注

• Vue 自身可以检测对象内部值的改变，但 Vue 提供的 watch 默认不可以
• 使用 watch 时根据数据的具体结构，决定是否采用深度监听

immediate 选项

• 默认值为 false，第一次进入页面不触发侦听器
• 当选项值设为 true 时，第一次进入页面就会触发侦听器

deep 选项

• 侦听的是对象，但对象中每个属性的变化都会被 "对象侦听器" 所接收到

侦听对象单个属性的变化

• 侦听对象单个属性的变化

温故而知新

// watch 监听器
watch: {
    // 完整写法
    username: {
        immediate: true,
        deep: true,
        handler(newValue, oldValue) {
            console.log(newValue, oldValue)
        }
    }
}

// 当不需要 immediate 和 deep 配置项时
watch: {
    username(newVal, oldVal) {
        console.log(newVal, oldVal)
    }
}

// $watch 完整写法
vm.$watch('username',{
    immediate: true, // 初始化时让 handler 调用一下
    deep: true, // 深度监听
    handler(newValue, oldValue) {
        console.log(newValue, oldValue)
    }
})

// 当不需要 immediate 和 deep 配置项时，可以进行简写
// 此处不可以写成箭头函数，当写成箭头函数时，this 指向 window
// 当写成 function 时，this 指向 vue 实例对象
vm.$watch('username', function(newValue, oldValue){
    console.log(newValue, oldValue)
})