珠海网站制作系统,鸿蒙系统开发教程,公众号开发单位,微信网站开发rem px文章目录 前言基本使用总结 前言
Vue 3 中的 watch 功能相比Vue 2有了改进和扩展#xff0c;旨在提供更灵活的数据监听方式。 基本使用
Vue 3中的watch可以用于Composition API和Options API#xff0c;但Composition API的使用更为常见。它主要用于监听响应式数据的变化旨在提供更灵活的数据监听方式。 基本使用
Vue 3中的watch可以用于Composition API和Options API但Composition API的使用更为常见。它主要用于监听响应式数据的变化并在数据变化时执行特定的逻辑。
Composition API中的使用
import { ref, watch } from vueconst 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 vuewatchEffect(() {// 这里的逻辑会自动监听所有被访问的响应式数据console.log(count.value, name.value)
})总结
Vue 3的watch提供了一种强大的方式来监听数据变化支持更细致的控制和更高效的逻辑处理。通过结合watchEffect开发者可以根据具体需求灵活选择最适合的监听方式从而提升应用的响应性和用户体验。 蹉跎只能感动自己行动才能打动别人。
