0

0

Vue3中的watch怎么使用

WBOY

WBOY

发布时间:2023-05-12 09:49:05

|

2463人浏览过

|

来源于亿速云

转载

     watch函数用于侦听某个值的变化,当该值发生改变后,触发对应的处理逻辑。

    一、watch的基本实例

    
     
    
     
    

    二、watch监听多个数据

    getter 函数:

    
     
    
     
    

    多个来源组成的数组

    
     
    
     
    

    三、watch监听对象的值

    
     
    
     
    

    四、watch监听器的配置参数

    1.deep

    用于开启深度监听

    
     
    
     
    

    2.immediate

    是否开启初始化检测,默认是值发生变化时,才会执行监听器里面的方法,开启immediate后初始化就执行一次。

    
     
    
     
    

    五、通过watchEffect()简化watch

    侦听器的回调使用与源完全相同的响应式状态是很常见的。例如:

    
     
    
     
    

    我们可以使用watchEffect 函数来简化上面的代码。watchEffect() 允许我们自动跟踪回调的响应式依赖。上面的侦听器可以重写为:

    立即学习前端免费学习笔记(深入)”;

    
     
    
     
    

    注:需要注意的是watchEffect 回调会立即执行,不需要指定immediate

    六、watch vs. watchEffect

    watch 和 watchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式:

    家电小商城网站源码1.0
    家电小商城网站源码1.0

    家电公司网站源码是一个以米拓为核心进行开发的家电商城网站模板,程序采用metinfo5.3.9 UTF8进行编码,软件包含完整栏目与数据。安装方法:解压上传到空间,访问域名进行安装,安装好后,到后台-安全与效率-数据备份还原,恢复好数据后到设置-基本信息和外观-电脑把网站名称什么的改为自己的即可。默认后台账号:admin 密码:132456注意:如本地测试中127.0.0.1无法正常使用,请换成l

    下载
    • watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外,仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖,因此,我们能更加精确地控制回调函数的触发时机。

    • watchEffect,则会在副作用发生期间追踪依赖。它会在同步执行过程中,自动追踪所有能访问到的响应式属性。这更方便,而且代码往往更简洁,但有时其响应性依赖关系会不那么明确。

    七、回调触发机制与停止监听器

    如果想在侦听器回调中能访问被 Vue 更新之后的 DOM,你需要指明 flush: 'post' 选项:

    watch(source, callback, {
      flush: 'post'
    })
     
    watchEffect(callback, {
      flush: 'post'
    })

    停止监听

    在 setup() 或

    一个关键点是,侦听器必须用同步语句创建:如果用异步回调创建一个侦听器,那么它不会绑定到当前组件上,你必须手动停止它,以防内存泄漏。如下方这个例子:

    // ...当该侦听器不再需要时
    unwatch()

    相关专题

    更多
    菜鸟裹裹入口以及教程汇总
    菜鸟裹裹入口以及教程汇总

    本专题整合了菜鸟裹裹入口地址及教程分享,阅读专题下面的文章了解更多详细内容。

    0

    2026.01.22

    Golang 性能分析与pprof调优实战
    Golang 性能分析与pprof调优实战

    本专题系统讲解 Golang 应用的性能分析与调优方法,重点覆盖 pprof 的使用方式,包括 CPU、内存、阻塞与 goroutine 分析,火焰图解读,常见性能瓶颈定位思路,以及在真实项目中进行针对性优化的实践技巧。通过案例讲解,帮助开发者掌握 用数据驱动的方式持续提升 Go 程序性能与稳定性。

    9

    2026.01.22

    html编辑相关教程合集
    html编辑相关教程合集

    本专题整合了html编辑相关教程合集,阅读专题下面的文章了解更多详细内容。

    56

    2026.01.21

    三角洲入口地址合集
    三角洲入口地址合集

    本专题整合了三角洲入口地址合集,阅读专题下面的文章了解更多详细内容。

    51

    2026.01.21

    AO3中文版入口地址大全
    AO3中文版入口地址大全

    本专题整合了AO3中文版入口地址大全,阅读专题下面的的文章了解更多详细内容。

    397

    2026.01.21

    妖精漫画入口地址合集
    妖精漫画入口地址合集

    本专题整合了妖精漫画入口地址合集,阅读专题下面的文章了解更多详细内容。

    118

    2026.01.21

    java版本选择建议
    java版本选择建议

    本专题整合了java版本相关合集,阅读专题下面的文章了解更多详细内容。

    3

    2026.01.21

    Java编译相关教程合集
    Java编译相关教程合集

    本专题整合了Java编译相关教程,阅读专题下面的文章了解更多详细内容。

    16

    2026.01.21

    C++多线程相关合集
    C++多线程相关合集

    本专题整合了C++多线程相关教程,阅读专题下面的的文章了解更多详细内容。

    11

    2026.01.21

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    Vue3.x 工具篇--十天技能课堂
    Vue3.x 工具篇--十天技能课堂

    共26课时 | 1.4万人学习

    Vue3.x 核心篇--十天技能课堂
    Vue3.x 核心篇--十天技能课堂

    共30课时 | 1.5万人学习

    Vue3.x新特性篇--十天基础课堂
    Vue3.x新特性篇--十天基础课堂

    共20课时 | 1.2万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号