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(oldData)
            }
        }
    },;

1.3.2immediate

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

watch: {
        account: {
            // 默认形况下，侦听器懒执行的：仅当数据源变化时，才会执行回调
            handler(newData, oldData) {
                console.log('账号的新旧值：')
                console.log(newData)
                console.log(oldData)
            }
        },
        student: {
            deep: true,
            immediate: true, // 创建侦听器时立即执行一次该 handler 函数
            handler(newData, oldData) {
                console.log('学生的新旧值：')
                console.log(newData)
                console.log(oldData)
            }
        }
    }

1.3.3flush

默认情况下，用户创建的侦听器回调，都会在 Vue 组件更新之前被调用；这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。
如果想在侦听器回调中能访问被 Vue 更新之后的DOM，你需要指明flush: 'post’选项

 watch: {
        account: {
            handler(newData, oldData) {
                console.log('账号的新旧值：')
                console.log(newData)
                console.log(oldData)
                // 侦听器默认情况下，回调函数中访问 Dom 将是更新之前的状态
                console.log(document.getElementById('titleAccount').innerHTML)
            }
        },
        password: {
            flush: 'post', // 更改回调的触发机制（Dom 更新后）
            handler(newData, oldData) {
                console.log('密码的新旧值：')
                console.log(newData)
                console.log(oldData)
                // 回调函数中访问 Dom 将是更新之后的状态
                console.log(document.getElementById('titlePassword').innerHTML)
            }
        }
    }

1.4this.$watch 侦听器

1.4.1 创建侦听

使用组件实例的 $watch()方法来命令式地创建一个侦听器；它还允许你提前停止该侦听器
语法：this.$watch(data, method, object)
 	1. data：侦听的数据源，类型为String
	2. method：回调函数，参数一新值，参数二旧值
	3. object：配置
		a. deep：深度侦听
    	b. immediate：创建时立即触发
    	c. flush: 'post'：更改回调机制（DOM更新后）

<script>
export default {
    data: () => ({
        account: 'Abc', // 账号
        emp: {
            name: 'Jack', // 名字
            salary: 7000 // 薪资
        },
        student: {
            name: 'Annie', // 名字
            age: 18 // 年龄
        }
    }),
    // 声明周期函数：页面成功渲染后
    mounted() {
        // 通过组件的实例调用$watch函数来创建侦听器

        // 语法：this.$watch(data, method, object)
        // 1. data：侦听的数据源，类型为String
        // 2. method：回调函数，参数一新值，参数二旧值
        // 3. object：配置
            //   a. deep：深度侦听
            //   b. immediate：创建时立即触发
            //   c. flush: 'post'：更改回调机制（DOM更新后）
        this.$watch('account', (newData, oldData) => {
            console.log('账号的新旧值：')
            console.log(newData)
            console.log(oldData)
        })

        this.$watch('emp.salary', (newData, oldData) => {
            console.log('薪资的新旧值：')
            console.log(newData)
            console.log(oldData)
        }, { immediate: true })


        this.$watch('student', (newData, oldData) => {
            console.log('学生的新旧值：')
            console.log(newData)
            console.log(oldData)
            console.log(document.getElementById('titleAge').innerHTML)
        }, { deep: true, flush: 'post' })
    }
}
</script>

<template>
    账号：<input type="text" v-model="account">
    <hr>
    薪资：<input type="numner" v-model="emp.salary">
    <hr>
    <h3 id="titleAge">
        学生年龄：<span>{{ student.age }}</span>
    </h3>
    学生年龄：<input type="numner" v-model="student.age">
</template>

1.4.2 停止侦听

需要自行停止侦听器，这时可以调用$watch() API 返回的函数

<script>
export default {
    data: () => ({
        account: 'Abc', // 账号
        stopAccountWatch: null // 调用该函数，可以停止侦听账号数据源
    }),
    // 声明周期函数：页面成功渲染后
    mounted() {
        this.stopAccountWatch = this.$watch('account', (newData, oldData) => {
            console.log('账号的新旧值：')
            console.log(newData)
            console.log(oldData)
        })
    }
}
</script>

<template>
    账号：<input type="text" v-model="account">

    <button @click="stopAccountWatch">停止侦听账号数据源</button>
</template>';

2.组合式 API 中的侦听器

在组合式API中，我们可以使用watch函数或者watchEffect函数在每次响应式状态发生变化时触发对应的回调函数

2.1 watch()函数

2.1.1创建侦听

语法：watch(source, callback, options)
1. source：需要侦听的数据源，可以是ref(包括计算属性)、一个响应式对象、一个 getter函数、或多个数据源组成的数组
2. callback：回调函数
	a. 侦听单个数据源：回调函数的第一个参数为新值，第二个参数为旧值
	b. 侦听多个数据源组成的数组：一个参数数组是新值，第二个参数数组是旧值
3. options：配置，Object类型
	a. deep: true：深度侦听，一般用在侦听的是getter函数返回的对象
	b. immediate: true：创建好侦听器立即执行
 	c. flush: 'post'：更改回调的触发机制（Dom更新后）

<script setup>
// 引入 watch 函数
import { ref, reactive, watch } from 'vue'

// 账号
let account = ref('Abc')

// 员工
let emp = reactive({
   name: 'Jack',
   salary: 7000
})

// 密码
let password = ref('123456')

// 侦听：创建完侦听器后立即执行一边
watch(
   account,
   (newData, oldData) => {
       console.log('===== 账号 =====')
       console.log(newData)
       console.log(oldData)
   },
   // 创建完侦听器后立即执行一边
   { immediate: true }
)

// deep: true：深度侦听，侦听函数返回的对象时，其嵌套属性值发生变换，依然可以触发回调函数，但是 newData, oldData 是相等的
watch(
   () => emp,
   (newData, oldData) => {
       console.log('===== 员工 =====')
       console.log(newData)
       console.log(oldData)
   },
   // 深度侦听
   { deep: true }
)

watch(
   password,
   (newData, oldData) => {
       console.log('===== 密码 =====')
       console.log(newData)
       console.log(oldData)
       // 默认情况下回调的触发机制在Dom更新之前执行
       console.log(document.getElementById('titlePassword').innerHTML)
   },
   // 更改回调函数的触发机制（Dom更新之后）
   { flush: 'post' }
)
// 侦听：多个数据源组成的数组
watch(
   // 侦听多个数据源组成的数组
   [account, () => emp.salary, dept],
   // 参数一：新值数组，参数二：旧值数组
   ([newAccount, newSalary, newDept], [oldAccount, oldSalary, oldDept]) => {
       console.log('===== 账号新旧值 =====')
       console.log(newAccount)
       console.log(oldAccount)
       console.log('===== 薪资新旧值 =====')
       console.log(newSalary)
       console.log(oldSalary)
       console.log('===== 部门新旧值 =====')
       console.log(newDept)
       console.log(oldDept)
   }
)
</script>

<template>

   账号：<input type="text" v-model="account">
   <hr>
   员工薪资：<input type="number" v-model="emp.salary">
   <hr>
   <h1 id="titlePassword">
       密码：
       <i>{{ password }}</i>
   </h1>
   密码：<input type="password" v-model="password">

</template>

2.1.2 停止侦听

停止侦听器：调用watch()返回的函数即可

<script setup>
// 引入 watch 函数
import { ref, watch } from 'vue'

// 账号
let account = ref('Abc')

// 停止侦听器：调用 watch 返回的函数即可
let stopAccountWatch = watch(
    account,
    (newData, oldData) => {
        console.log('===== 账号 =====')
        console.log(newData)
        console.log(oldData)
    }
)
</script>

<template>

    账号：<input type="text" v-model="account">

    <button @click="stopAccountWatch">停止账号侦听器</button>

</template>

2.2 watchEffect()函数

watchEffect()会立即执行一遍回调函数，如果这时函数产生了副作用，Vue 会自动追踪副作用的依赖关系，自动分析出响应源

<script setup>
// 引入 watch 函数
import { reactive, ref, watchEffect } from 'vue'

// 账号
let account = ref('Abc')

// 员工
let emp = reactive({
    name: 'Jack',
    salary: 7000
})

// 创建成功后立即执行一遍
watchEffect(() => {
    // 此处用到了数据源，如果该数据源的值发生了变化，会重新执行该回调函数
    console.log('账号：' + account.value)
    console.log('员工的薪资：' + emp.salary)
})

</script>

<template>
    账号：<input type="text" v-model="account">
    <hr>
    员工薪资：<input type="number" v-model="emp.salary">
</template>

2.2.1 回调的触发时机

默认情况下，用户创建的侦听器回调，都会在 Vue 组件更新之前被调用；这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。
如果想在侦听器回调中能访问被 Vue 更新之后的DOM，你需要指明flush: ‘post’ 选项，或者你也可以使用更方便的别名watchPostEffect()函数

<script setup>
import { onMounted, reactive, ref, watchEffect, watchPostEffect } from 'vue'

// 账号
let account = ref('Abc')

// 密码
let password = ref('123456')

// 员工
let emp = reactive({
    name: 'Jack',
    salary: 7000
})

// 当视图渲染成功后
onMounted(() => {
    // 侦听账号
    watchEffect(() => {
        console.log('-------------------------------------')
        console.log('账号：' + account.value)
        // 默认情况下，回调触发机制：在 Dom 更新之前
        console.log(document.getElementById('titleAccount').innerHTML)
    })

    // 侦听密码
    watchEffect(
        () => {
            console.log('=====================================')
            console.log('密码：' + password.value)
            // 默认情况下，回调函数触发机制：在 Dom 更新之前
            console.log(document.getElementById('titlePassword').innerHTML)
        },
        // 更改回调函数触发机制：在 Dom 更新之后
        { flush: 'post' }
    )

    // 侦听薪资
    watchPostEffect(() => {
        console.log('=====================================')
        console.log('员工薪资：' + emp.salary)
        // 回调函数的触发机制：在 Dom 更新之后
        console.log(document.getElementById('titleSalary').innerHTML)
    })
})
</script>

2.2.2 停止侦听

要手动停止一个侦听器，请调用watchEffect或watchPostEffect()返回的函数

<script setup>
import { ref, watchEffect, watchPostEffect } from 'vue'

// 账号
let account = ref('Abc')

// 密码
let password = ref('123456')

// 调用 watchEffect 返回的函数，可以停止该侦听器
let stopWacthAccount = watchEffect(() => {
    console.log('-------------------------------------')
    console.log('账号：' + account.value)
})

// 调用 watchPostEffect 返回的函数，可以停止该侦听器
let stopWacthPassword = watchPostEffect(() => {
    console.log('=====================================')
    console.log('密码：' + password.value)
})

</script>

<template>
    账号：<input type="text" v-model="account">
    <button @click="stopWacthAccount">停止账号侦听器</button>
      
    <hr>
      
    密码：<input type="text" v-model="password">
    <button @click="stopWacthPassword">停止密码侦听器</button>
</template>

2.3 watch和watchEffect的对比

2.3.1 watch

1. watch显式指定依赖数据，依赖数据更新时执行回调函数
2. 具有一定的惰性lazy 第一次页面展示的时候不会执行，只有数据变化的时候才会执行
(设置immediate: true时可以变为非惰性，页面首次加载就会执行）
3. 监视ref定义的响应式数据时可以获取到原值
4. 既要指明监视的属性，也要指明监视的回调

2.3.2 watchEffect

1. watchEffect自动收集依赖数据，依赖数据更新时重新执行自身
2. 立即执行，没有惰性，页面的首次加载就会执行
3. 无法获取到原值，只能得到变化后的值
4. 不用指明监视哪个属性，监视的回调中用到哪个属性就监视哪个属性

总结

以上就是Vue3.0 中watch侦听器的使用方法。希望本篇文章能够帮助到你，不懂得可以评论区或者私信问我，我也会一 一解答。谢谢观看！
我的其他文章:https://blog.csdn.net/m0_60970928?type=blog