0

0

vue3中watch和watchEffect使用实例分析

王林

王林

发布时间:2023-05-12 21:43:04

|

1143人浏览过

|

来源于亿速云

转载

    watch

    watch监听单个数据

    
    
    

    watch监听多个数据

    
    
    

    watch监听对象

    
    

     watch还有第三个参数,deepimmediate,可以加上看看效果

    watch监听对象的某一个值

    
    

    监听对象某一个属性的时候需要用箭头函数 

    watchEffect

    关于watchEffect,官网是这么介绍的:为了根据响应式状态自动应用和重新应用副作用,我们可以使用watchEffect方法,它立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。 也就是说,我们并不需要传入一个特定的依赖源,而且它会立即执行一遍回调函数,如果函数产生了副作用,那它就会自动追踪副作用的依赖关系,自动分析出响应源。光看概念可能比较模糊,先来看个最简单的例子:

    
    
    

    watchEffect副作用

    副作用,那什么是副作用呢,其实很简单,就是在监听之前,我得做一件事。

    
    
    

    监听之前让student.name赋值为'张三',无论你输入什么值,name一直都是'张三'

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

    Countly移动分析应用
    Countly移动分析应用

    Countly 是一个实时的、开源的移动分析应用,通过收集来自手机的数据,并将这些数据通过可视化效果展示出来以分析移动应用的使用和最终用户的行为。截至2019年,支持超过2500个网站,16000个移动应用程序和多个桌面应用程序。它从移动,桌面,Web收集数据包括Apple Watch,TvOS和其他互联网连接设备的应用程序,并将这些信息可视化以分析应用程序使用情况和最终用户行为。

    下载

    停止监听

    我们用同步语句创建的监听器,会自动绑定到组件实例上,并且会在组件卸载时自动停止,但是,如果我们在异步回调里创建一个监听器,那它就不会绑定到当前组件上,必须手动去停止,防止内存泄漏。 那怎么去停止呢,其实我们只需要调用一下watchwatchEffect返回的函数

    const stop = watchEffect(() => {})
    
    // 停止监听
    unwatch()

    区别

    用了一遍watchwatchEffect之后,发现他俩主要有以下几点区别:

    • watch是惰性执行的,而watchEffect不是,不考虑watch第三个配置参数的情况下,watch在组件第一次执行的时候是不会执行的,只有在之后依赖项变化的时候再执行,而watchEffect是在程序执行到此处的时候就会立即执行,而后再响应其依赖变化执行。

    • watch需要传递监听的对象,watchEffect不需要

    相关专题

    更多
    C++ 高级模板编程与元编程
    C++ 高级模板编程与元编程

    本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

    10

    2026.01.23

    php远程文件教程合集
    php远程文件教程合集

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

    28

    2026.01.22

    PHP后端开发相关内容汇总
    PHP后端开发相关内容汇总

    本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

    21

    2026.01.22

    php会话教程合集
    php会话教程合集

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

    20

    2026.01.22

    宝塔PHP8.4相关教程汇总
    宝塔PHP8.4相关教程汇总

    本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

    11

    2026.01.22

    PHP特殊符号教程合集
    PHP特殊符号教程合集

    本专题整合了PHP特殊符号相关处理方法,阅读专题下面的文章了解更多详细内容。

    11

    2026.01.22

    PHP探针相关教程合集
    PHP探针相关教程合集

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

    8

    2026.01.22

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

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

    52

    2026.01.22

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

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

    9

    2026.01.22

    热门下载

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

    精品课程

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