vue(三)watch 侦听器

1. 什么是 watch 侦听器

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

语法格式如下：

 const vm = new Vue({
        el: '#app',
        data: { username: '' },
        watch: {
            //监听username值的变化
            //newVal是"变化后的新值"，oldVal是"变化之前的旧值"
            username(newVal, oldVal) {
                console.log(newVal, oldVal);
            }
        }
    })

2. 使用 watch 检测用户名是否可用

监听 username 值的变化，并使用 axios 发起 Ajax 请求，检测当前输入的用户名是否可用：

watch: {
    // 监听 username 值的变化
        async username(newVal) {
        if (newVal === '') return
        // 使用 axios 发起请求，判断用户名是否可用
        const { data: res } = await axios.get('https://xxxx.xx/api/finduser/' + newVal)
        console.log(res)
    }
}

3. immediate 选项

默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使 用 immediate 选项。示例代码如下：

watch: {
        username: {
            // handler 是固定写法，表示当 username 的值变化时，自动调用 handler 处理函数
            handler: async function (newVal) {
                if (newVal === '') return
                const { data: res } = await axios.get('https://xxx.xx/api/finduser/' + newVal)
                console.log(res)
            },
            // 表示页面初次渲染好之后，就立即触发当前的 watch 侦听器
            immediate: true
        }
    }

4. deep 选项

如果 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用 deep 选 项，代码示例如下：

const vm = new Vue({
        el: '#app',
        data: {
            info: { username: 'admin' }
        },
        watch: {
            info: {
                handler(newVal) {
                    console.log(newVal.username);
                }
            },
            // 开启深度监听，只要对象中任何一个属性变化了，都会触发“对象的侦听器”
            deep: true
        }
    })

5. 监听对象单个属性的变化

如果只想监听对象中单个属性的变化，则可以按照如下的方式定义 watch 侦听器：

 const vm = new Vue({
        el: '#app',
        data: {
            info: { username: 'admin' }
        },
        watch: {
            // 如果要侦听的是对象的子属性的变化，则必须包裹一层单引号
            'info.username': {
                handler(newVal) {
                    console.log(newVal.username);
                }
            },
            deep: true
        }
    })

6.侦听器的格式

1.方法格式的侦听器

• 缺点1：无法在刚进入页面的时候，自动触发！！！

• 缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器！！！

2.对象格式的侦听器

        好处1：可以通过 immediate 选项，让侦听器自动触发！

        好处2：可以通过 deep 选项，让侦听器深度监听对象中每个属性的变化！！！