Vue2与Vue3 watch侦听器深度解析

"Vue2和Vue3中使用watch侦听器的详细教程" 在Vue框架中，watch侦听器是一个非常重要的功能，它允许我们监听并响应数据的变化，从而执行相应的处理逻辑。Vue2.x和Vue3.x在watch的使用上有一些区别，但基本原理是相同的，都是为了在数据变更时执行特定的回调函数。 ### Vue2.x 中的 watch 在Vue2中，watch通常用于监听data中的属性变化。以下是一个简单的例子： ```javascript data() { return { num: 10 } }, watch: { num: { handler(newValue, oldValue) { // 当num的值改变时，此回调函数会被调用 // newValue是新的值，oldValue是旧的值 console.log('新值:', newValue, '旧值:', oldValue); }, deep: true, // 是否深度监听，如果num是一个对象，设置为true则会监听其内部属性的改变 immediate: true // 是否在初次创建时立即执行，设置为true则会在组件实例创建后立即执行一次回调 } } ``` ### Vue3.x 中的 watch Vue3引入了Composition API，并对watch进行了调整。现在，watch作为一个函数导出，我们需要显式地调用来创建一个侦听器： ```javascript import { ref, watch } from 'vue'; // 声明一个响应式变量 const num = ref(0); // 创建watch侦听器 watch(num, (newVal, oldVal) => { // 新值和旧值的处理逻辑 console.log('新值:', newVal, '旧值:', oldVal); }, { deep: true, // 深度监听，与Vue2相同 immediate: true, // 在首次渲染后立即触发，与Vue2相同 flush: 'post' // 可选的触发时机，预设值为pre，其他选项有'sync'和'post' }); ``` 在Vue3中，watch函数接受三个参数：需要监听的值、变化时执行的回调以及一个配置对象，其中`flush`属性控制何时执行回调。`flush`有三个可选值： - `pre`（默认）：在渲染之前，即DOM更新前触发回调。 - `post`：在渲染之后，即DOM已经更新后触发回调。 - `sync`：每次变化都触发回调，且在渲染之前，相当于Vue2中的实时监听。 ### 注意事项 在实际开发中，当监听的数据是响应式对象时，可能会遇到监听不到变化的情况。此时，推荐使用箭头函数配合`deep: true`来确保监听到对象内部的属性变化： ```javascript watch(() => responseData, () => { // ... }, { deep: true }); ``` 总结，Vue2和Vue3的watch侦听器提供了强大的数据变化监控能力，通过合理的配置，我们可以精确地控制数据变化时的响应行为。在升级到Vue3时，需要了解其新的API用法，以便充分利用新版本的优点。