vue 侦听器 ---- 选项式 API

如果我们希望在代码逻辑中监听某个数据的变化，一旦监听到数据发生了变化就做一些业务处理的工作，比如说，用户在文本框中输入内容，会自动去判断该用户名是否可用。此时就需要用侦听器watch来完成了；

通俗来说，数据一旦发生了变化就通知侦听器， 从而针对数据的变化做特定的操作，而侦听器本质是一个函数，数据一旦发生变化，就通知侦听器绑定的函数，做一些事情。

<script>
// 在选项式 API 中，我们可以使用watch选项在每次响应式属性发生变化时触发一个函数
// 在watch选项中声明的对象即为对象式侦听器，对象名就是要侦听的数据源，其中对象里的handler函数为数据源发生变化后需要执行的代码块，其参数1为新数据值，参数2为旧数据值
    export default{
        data:()=>({
            age:30,
            maXage:30,
            emp:{
                "name":"Annie",
                "sallary":3000
            },
            student: {
                name: 'Tom', // 名字
                age: 18 // 年龄 
            },
            account: 'James', // 账号
            password: '123456' // 密码
        }),
        watch:{
            /**
             * 函数式侦听器
             * 侦听 age 数据源是否发生变化
             * @param {*} newData 新值
             * @param {*} oldData 旧值
             */
            age(newVal,oldVal){
                console.log("年龄的新值："+newVal,"年龄的旧值："+oldVal)
            },
            // 对象式侦听器
            // 在watch选项中声明的对象即为对象式侦听器，对象名就是要侦听的数据源，
            // 其中对象里的handler函数为数据源发生变化后需要执行的代码块，其参数1为新数据值，参数2为旧数据值
            maXage:{
                /**
                 * 如果 age 数据源发生变化，将执行handler的代码片段
                 * @param {*} newData 新值
                 * @param {*} oldData 旧值
                 */
                handler(newData, oldData) {
                    console.log('newData: ' + newData)
                    console.log('oldData: ' + oldData)
                }
            },
            /**
             * 侦听 emp.name 数据源是否发生变化（通过采用字符串路径的形式来侦听对象中的某一个属性）
             * @param {*} newData 新值
             * @param {*} oldData 旧值
             */
            'emp.name'(newVal,oldVal){
                console.log("姓名的新值："+newVal,"姓名的旧值："+oldVal)
            },
            /**
             * watch默认是浅层的：被侦听的属性，仅在被赋新值时，才会触发回调函数，而嵌套属性的变化不会触发
             * 如果想侦听所有嵌套的变更，你需要深层侦听器deep: true选项
             * 深度侦听需要遍历被侦听对象中的所有嵌套的属性，当用于大型数据结构时，开销很大
             */
            student: {
                // 深度侦听：如果改变侦听对象中的嵌套属性值，也会触发 handler 函数，但是 newData 和 oldData 是相等的
                // 只有改变侦听对象的值时，newData 和 oldData 才是不相等的
                deep: true, 

                // watch 默认是懒执行的：仅当数据源变化时，才会执行回调；但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调，
                // 可采用immediate: true选项
                immediate: true, // 创建侦听器时立即执行一次该 handler 函数

                handler(newData, oldData) {
                    console.log('学生的新旧值：')
                    console.log(newData)
                    console.log(oldData)
                }
            },
            password:{
                // 默认情况下，用户创建的侦听器回调，都会在 Vue 组件更新之前被调用；这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。
                handler(newData, oldData){
                    console.log('密码的新旧值：')
                    console.log(newData)
                    console.log(oldData)
                    console.log(document.getElementById('titlePassword').innerHTML)
                }
            },
            account:{
                // 如果想在侦听器回调中能访问被 Vue 更新之后的DOM，你需要指明flush: 'post'选项
                flush:'post',
                handler(newData, oldData){
                    console.log('账号的新旧值：')
                    console.log(newData)
                    console.log(oldData)
                    console.log(document.getElementById('titleAccount').innerHTML)
                }
            }
        },
        methods:{
            changeStudent(){
                // 如果改变侦听对象中的嵌套属性值，也会触发 handler 函数，但是 newData 和 oldData 是相等的

                this.student.name="Draw"
                this.student.age=58

                // 只有改变侦听对象的值时，newData 和 oldData 才是不相等的
                this.student = {
                    name:"Json",
                    age:18
                }
            }
        }
    }
    
</script>

<template>
   年龄：<input type="number" v-model="age">
   <br>
   最大龄：<input type="number" v-model="maXage">
    <br>
    员工的名字：<input type="text" v-model="emp.name">
    <hr>
    <h2>学生信息</h2>
    学生的名字：<input type="text" v-model="student.name">
    <br>
    学生的年龄：<input type="number" v-model="student.age">
    <br>
    <button @click="changeStudent">改变学生信息</button>
    <br>
    <hr>
    <h3 id="titleAccount">
        账号：<span>{{ account }}</span>
    </h3>
    账号：<input type="text" v-model="account">
    <h3 id="titlePassword">
        账号：<span>{{ password }}</span>
    </h3>
    密码：<input type="text" v-model="password">
</template>