vue3.0 watch侦听器

前言：

今天给大家讲解的是vue3.0中watch侦听器的使用及语法，看完文章希望能够帮助到你！

---

1.选项式 API 中的侦听器

在选项式 API 中，我们可以使用watch选项在每次响应式属性发生变化时触发一个函数

1.1函数式侦听器

• 在watch选项中声明的函数即为函数式侦听器，其中函数名就是要侦听的数据源，函数中的参数1为新数据值，参数2为旧数据值

<script>
export default {
   
    data: () => ({
   
        age: 30, // 年龄
        emp: {
   
            name: 'Jack', // 名字
            salary: 7000 // 薪水
        }
    }),
    // 侦听器
    watch: {
   
        /**
         * 侦听 age 数据源是否发生变化
         * @param {*} newData 新值
         * @param {*} oldData 旧值
         */
        age(newData, oldData) {
   
            console.log('newData: ' + newData)
            console.log('oldData: ' + oldData)
        },
        /**
         * 侦听 emp.name 数据源是否发生变化（通过采用字符串路径的形式来侦听对象中的某一个属性）
         * @param {*} newData 新值
         * @param {*} oldData 旧值
         */
        'emp.name'(newData, oldData) {
   
            console.log('newData: ' + newData)
            console.log('oldData: ' + oldData)
        }
    }
}
</script>

<template>
    年龄：<input type="number" v-model="age">
    <hr>
    员工的名字：<input type="text" v-model="emp.name">
</template>

1.2对象式侦听器

• 在watch选项中声明的对象即为对象式侦听器，对象名就是要侦听的数据源，其中对象里的handler函数为数据源发生变化后需要执行的代码块，其参数1为新数据值，参数2为旧数据值

<script>
export default {
   
    data: () => ({
   
        age: 30, // 年龄
        emp: {
   
            name: 'Jack', // 名字
            salary: 7000 // 薪水
        }
    }),
    // 侦听器
    watch: {
   
        // 侦听 age 数据源
        age: {
   
            /**
             * 如果 age 数据源发生变化，将执行handler的代码片段
             * @param {*} newData 新值
             * @param {*} oldData 旧值
             */
            handler(newData, oldData) {
   
                console.log('newData: ' + newData)
                console.log('oldData: ' + oldData)
            }
        },
        // 侦听 emp.name 数据源
        'emp.name': {
   
            /**
             * 如果 emp.name 数据源发生变化，将执行handler的代码片段
             * @param {*} newData 新值
             * @param {*} oldData 旧值
             */
             handler(newData, oldData) {
   
                console.log('newData: ' + newData)
                console.log('oldData: ' + oldData)
            }
        }
    }
}
</script>

<template>
    年龄：<input type="number" v-model="age">
    <hr>
    员工的名字：<input type="text" v-model="emp.name">
</template>

1.3对象式侦听器相关参数

1.3.1deep

watch默认是浅层的：被侦听的属性，仅在被赋新值时，才会触发回调函数，而嵌套属性的变化不会触发
如果想侦听所有嵌套的变更，你需要深层侦听器deep: true选项
深度侦听需要遍历被侦听对象中的所有嵌套的属性，当用于大型数据结构时，开销很大

watch: {
   
        // 侦听 emp 对象数据源
        emp: {
   
            // 默认的浅层次的侦听器：只有侦听的数据源的值发生变化时，才会触发 handler 函数，而改变侦听的数据源中的嵌套属性值并不会出发该函数
            handler(newData, oldData) {
   
                console.log('员工的新旧值：')
                console.log(newData)
                console.log(oldData)
            }
        },
        student: {
   
            deep: true, // 深度侦听：如果改变侦听对象中的嵌套属性值，也会触发 handler 函数，但是 newData 和 oldData 是相等的
            // 只有改变侦听对象的值时，newData 和 oldData 才是不相等的
            handler(newData, oldData) {
   
                console.log('学生的新旧值：')
                console.log(newData)
                console.log(