Vue3中的watch和watchEffect的区别

  1. 执行时机:watchEffect:在被调用时立即执行,并且每当其依赖的响应式属性变化时会再次执行。这意味着watchEffect内部的副作用函数无论何时注册都会立刻运行一次,以便收集依赖。watch:惰性执行,仅当所监听的源数据发生变化时才触发回调函数执行。默认情况下,它不会在初始化时执行。

  2. 依赖收集:watchEffect:自动收集并追踪在其副作用函数中使用的响应式依赖,无需手动指定监听哪些属性。watch:需要显式地指定要监听的源(可以是一个对象、一个属性或者一个getter函数),并且在回调函数中处理新旧值的变化。

  3. 参数与回调:watchEffect:接收一个副作用函数作为参数,在该函数内可以直接访问并引用响应式状态,不需要返回值。watch:需要两个参数,第一个是要监听的数据源,第二个是回调函数。回调函数会接收到新的值(newVal)和旧的值(oldVal),在某些场景下可以利用这两个参数来对比变化。

  4. 应用场景:watchEffect:适合于那些需要根据多个响应式状态进行计算或更新DOM的场景,例如设置某个元素的样式基于多个变量动态计算而来。watch:更适合用于对特定的单一或复杂数据对象进行深度监听,并在数据变更时执行特定的逻辑,比如表单验证、状态同步等。

相关推荐
前端小巷子15 分钟前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘1 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹1 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志1 小时前
typescript结构化类型应用两例
javascript
杨进军1 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW2 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字2 小时前
Kotlin lazy 委托的底层实现原理
前端
gnip2 小时前
总结一期正则表达式
javascript·正则表达式
Q_970956392 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
爱分享的程序员2 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js