Vue3实战笔记(61)—Vue 3 Watch进化论:解锁实时数据监听新境界

文章目录


前言

Vue 3 中的 watch 功能相比Vue 2有了改进和扩展,旨在提供更灵活的数据监听方式。


基本使用

Vue 3中的watch可以用于Composition API和Options API,但Composition API的使用更为常见。它主要用于监听响应式数据的变化,并在数据变化时执行特定的逻辑。

Composition API中的使用

javascript 复制代码
import { ref, watch } from 'vue'

const count = ref(0)

watch(count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`)
})

在这个例子中,watch监听count的任何变化,并在变化时打印出新旧值。

多个数据源

你也可以同时监听多个数据源的变化:

javascript 复制代码
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,只监听引用的变化。

javascript 复制代码
watch(count, (newValue, oldValue) => {
  // 逻辑处理
}, {
  immediate: true,
  deep: true
})

使用Ref和Reactive

对于ref定义的响应式数据,直接传递给watch即可。

对于reactive定义的对象,你可以直接传入整个对象,或使用解构语法监听特定属性。

watchEffect

Vue 3还引入了watchEffect,它会自动收集依赖并运行副作用函数,每当依赖发生变化时,都会重新运行。与watch不同,watchEffect不需要明确指定依赖,更适合依赖数据较多且难以枚举的场景。

javascript 复制代码
import { watchEffect } from 'vue'

watchEffect(() => {
  // 这里的逻辑会自动监听所有被访问的响应式数据
  console.log(count.value, name.value)
})

总结

Vue 3的watch提供了一种强大的方式来监听数据变化,支持更细致的控制和更高效的逻辑处理。通过结合watchEffect,开发者可以根据具体需求灵活选择最适合的监听方式,从而提升应用的响应性和用户体验。

蹉跎只能感动自己,行动才能打动别人。

相关推荐
遂心_5 小时前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
王同学QaQ5 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊5 小时前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
程序员鱼皮6 小时前
刚刚 Java 25 炸裂发布!让 Java 再次伟大
java·javascript·计算机·程序员·编程·开发·代码
Asort6 小时前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript
一枚前端小能手6 小时前
🚀 缓存用错了网站更慢?前端缓存策略的5个致命误区
前端·javascript
艾小码6 小时前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
艾小码6 小时前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
小高0076 小时前
🔍说说对React的理解?有哪些特性?
前端·javascript·react.js
烛阴6 小时前
【TS 设计模式完全指南】懒加载、缓存与权限控制:代理模式在 TypeScript 中的三大妙用
javascript·设计模式·typescript