什么是 watch 侦听器

watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。
语法格式如下：

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

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

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

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

immediate 选项

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

watch: {
            username: {
                //handler 是固定写法，表示当 username 的值变化时，自动调用 handler 处理函数
                handler: async function (newVal) {
                    if (newVal === '') return
                    const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
                    console.logo(res)
                },
                immediate: ture
            }
        }

deep 选项

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

var vm = new Vue({
        el: '#app',
        data: {
            info: { username: 'admin' }
        },
        watch: {
            info: {
                handler(newVal) {
                    console.log(newVal.username)
                },
                deep: ture
            }
        }
    })

监听对象单个属性的变化

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

var vm = new Vue({
        el: '#app',
        data: {
            info: { username: 'admin' }
        },
        watch: {
            'info.username': {
                handler(newVal) {
                    console.log(newVal.username)
                }
            }
        }
    })