文章目录
- 前言
- 基本使用
- 总结
前言
Vue 3 中的 watch 功能相比Vue 2有了改进和扩展，旨在提供更灵活的数据监听方式。
基本使用
Vue 3中的watch可以用于Composition API和Options API，但Composition API的使用更为常见。它主要用于监听响应式数据的变化，并在数据变化时执行特定的逻辑。
Composition API中的使用
import { ref, watch } from 'vue'const count = ref(0)watch(count, (newValue, oldValue) => {console.log(`count changed from ${oldValue} to ${newValue}`)
})
在这个例子中，watch监听count的任何变化，并在变化时打印出新旧值。
多个数据源
你也可以同时监听多个数据源的变化：
const count = ref(0)
const name = ref('')watch([count, name], ([newCount, newName], [oldCount, oldName]) => {console.log(`count: ${oldCount} -> ${newCount}, name: ${oldName} -> ${newName}`)
})
配置选项
watch接受第三个参数，用于配置监听行为，如：
immediate: 设置为true时，会在初始渲染时立即触发回调函数。
deep: 如果监听的对象或数组内部发生了变化，设置为true会触发回调。默认为false，只监听引用的变化。
watch(count, (newValue, oldValue) => {// 逻辑处理
}, {immediate: true,deep: true
})
使用Ref和Reactive
对于ref定义的响应式数据，直接传递给watch即可。
对于reactive定义的对象，你可以直接传入整个对象，或使用解构语法监听特定属性。
watchEffect
Vue 3还引入了watchEffect，它会自动收集依赖并运行副作用函数，每当依赖发生变化时，都会重新运行。与watch不同，watchEffect不需要明确指定依赖，更适合依赖数据较多且难以枚举的场景。
import { watchEffect } from 'vue'watchEffect(() => {// 这里的逻辑会自动监听所有被访问的响应式数据console.log(count.value, name.value)
})
总结
Vue 3的watch提供了一种强大的方式来监听数据变化，支持更细致的控制和更高效的逻辑处理。通过结合watchEffect，开发者可以根据具体需求灵活选择最适合的监听方式，从而提升应用的响应性和用户体验。
蹉跎只能感动自己，行动才能打动别人。
