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()

    相关专题

    更多
    github中文官网入口 github中文版官网网页进入
    github中文官网入口 github中文版官网网页进入

    github中文官网入口https://docs.github.com/zh/get-started,GitHub 是一种基于云的平台,可在其中存储、共享并与他人一起编写代码。 通过将代码存储在GitHub 上的“存储库”中,你可以: “展示或共享”你的工作。 持续“跟踪和管理”对代码的更改。

    1

    2026.01.21

    windows安全中心怎么关闭打开_windows安全中心操作指南
    windows安全中心怎么关闭打开_windows安全中心操作指南

    Windows安全中心可以通过系统设置轻松开关。 暂时关闭:打开“设置” -> “隐私和安全性” -> “Windows安全中心” -> “病毒和威胁防护” -> “管理设置”,将“实时保护”关闭。打开:同样路径将开关开启即可。如需彻底关闭,需在组策略(gpedit.msc)或注册表中禁用Windows Defender。

    0

    2026.01.21

    C++游戏开发Unreal Engine_C++怎么用Unreal Engine开发游戏
    C++游戏开发Unreal Engine_C++怎么用Unreal Engine开发游戏

    虚幻引擎(Unreal Engine, 简称UE)是由Epic Games开发的一款功能强大的工业级3D游戏引擎,以高品质实时渲染(如Nanite和Lumen)闻名 。它基于C++语言,为开发者提供高效率的框架、强大的可视化脚本系统(蓝图)、以及针对PC、主机和移动端的完整开发工具,广泛用于游戏、电影制片等领域。

    0

    2026.01.21

    Python GraphQL API 开发实战
    Python GraphQL API 开发实战

    本专题系统讲解 Python 在 GraphQL API 开发中的实际应用,涵盖 GraphQL 基础概念、Schema 设计、Query 与 Mutation 实现、权限控制、分页与性能优化,以及与现有 REST 服务和数据库的整合方式。通过完整示例,帮助学习者掌握 使用 Python 构建高扩展性、前后端协作友好的 GraphQL 接口服务,适用于中大型应用与复杂数据查询场景。

    1

    2026.01.21

    云朵浏览器入口合集
    云朵浏览器入口合集

    本专题整合了云朵浏览器入口合集,阅读专题下面的文章了解更多详细地址。

    22

    2026.01.20

    Java JVM 原理与性能调优实战
    Java JVM 原理与性能调优实战

    本专题系统讲解 Java 虚拟机(JVM)的核心工作原理与性能调优方法,包括 JVM 内存结构、对象创建与回收流程、垃圾回收器(Serial、CMS、G1、ZGC)对比分析、常见内存泄漏与性能瓶颈排查,以及 JVM 参数调优与监控工具(jstat、jmap、jvisualvm)的实战使用。通过真实案例,帮助学习者掌握 Java 应用在生产环境中的性能分析与优化能力。

    29

    2026.01.20

    PS使用蒙版相关教程
    PS使用蒙版相关教程

    本专题整合了ps使用蒙版相关教程,阅读专题下面的文章了解更多详细内容。

    175

    2026.01.19

    java用途介绍
    java用途介绍

    本专题整合了java用途功能相关介绍,阅读专题下面的文章了解更多详细内容。

    125

    2026.01.19

    java输出数组相关教程
    java输出数组相关教程

    本专题整合了java输出数组相关教程,阅读专题下面的文章了解更多详细内容。

    41

    2026.01.19

    热门下载

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

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    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号