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,开发者可以根据具体需求灵活选择最适合的监听方式,从而提升应用的响应性和用户体验。

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

相关推荐
爱学习的小学渣几秒前
JS用法:Map,Set和异步函数
前端·javascript
独立开阀者_FwtCoder18 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
慧一居士19 分钟前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js
Hilaku26 分钟前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js
星语卿26 分钟前
Js事件循环
javascript
datagear27 分钟前
如何在DataGear 5.4.1 中快速制作HTTP数据源服务端分页的数据表格看板
javascript·数据可视化
艾克马斯奎普特34 分钟前
为什么响应性语法糖最终被废弃了?尤雨溪也曾经试图让你不用写 .value
前端·vue.js·代码规范
namehu35 分钟前
“什么?视频又双叒叕不能播了!”—— 移动端视频兼容性填坑指南
javascript·html
MR_发36 分钟前
万字实现带@和表情包的输入框
vue.js·typescript
多啦C梦a37 分钟前
React Hooks 编程:`useState` 和 `useEffect`,再不懂就OUT了!
前端·javascript