Vue3 Composition API(二)——computed、watchEffect、setup中使用ref

一、computed

在前面我们讲解过计算属性computed:当我们的某些属性是依赖其他状态时,我们可以使用计算属性来处理

  • 在前面的Options API中,我们是使用computed选项来完成的;
  • 在Composition API中,我们可以在 setup 函数中使用 computed 方法来编写一个计算属性;

如何使用computed呢?

  • 方式一:接收一个getter函数,并为 getter 函数返回的值,返回一个不变的 ref 对象;
    在这里插入图片描述

  • 方式二:接收一个具有 get 和 set 的对象,返回一个可变的(可读写)ref 对象;
    在这里插入图片描述

二、侦听数据的变化

在前面的Options API中,我们可以通过watch选项来侦听data或者props的数据变化,当数据变化时执行某一些操作。

在Composition API中,我们可以使用watchEffect和watch来完成响应式数据的侦听;

  • watchEffect用于自动收集响应式数据的依赖;
  • watch需要手动指定侦听的数据源;

三、watchEffect

当侦听到某些响应式数据变化时,我们希望执行某些操作,这个时候可以使用 watchEffect。

我们来看一个案例:

  • 首先,watchEffect传入的函数会被立即执行一次,并且在执行的过程中会收集依赖
  • 其次,只有收集的依赖发生变化时,watchEffect传入的函数才会再次执行;
    在这里插入图片描述

四、watchEffect的停止侦听

如果在发生某些情况下,我们希望停止侦听,这个时候我们可以获取watchEffect的返回值函数,调用该函数即可。

比如在上面的案例中,我们age达到20的时候就停止侦听:

在这里插入图片描述

五、watchEffect清除副作用

什么是清除副作用呢?
比如在开发中我们需要在侦听函数中执行网络请求,但是在网络请求还没有达到的时候,我们停止了侦听器,或者侦听器侦听函数被再次执行了。
那么上一次的网络请求应该被取消掉,这个时候我们就可以清除上一次的副作用;

在我们给watchEffect传入的函数被回调时,其实可以获取到一个参数:onInvalidate

  • 当副作用即将重新执行 或者 侦听器被停止 时会执行该函数传入的回调函数;
  • 我们可以在传入的回调函数中,执行一些清除工作;
    在这里插入图片描述
    在这里插入图片描述

六、setup中使用ref

在讲解 watchEffect执行时机之前,我们先补充一个知识:在setup中如何使用ref或者元素或者组件?

  • 其实非常简单,我们只需要定义一个ref对象,绑定到元素或者组件的ref属性上即可;

在这里插入图片描述

七、watchEffect的执行时机

默认情况下,组件的更新会在副作用函数执行之前:

  • 如果我们希望在副作用函数中获取到元素,是否可行呢?
    在这里插入图片描述

我们会发现打印结果打印了两次:

  • 这是因为setup函数在执行时就会立即执行传入的副作用函数,这个时候DOM并没有挂载,所以打印为null;
  • 而当DOM挂载时,会给title的ref对象赋值新的值,副作用函数会再次执行,打印出来对应的元素;

八、调整watchEffect的执行时机

如果我们希望在第一次的时候就打印出来对应的元素呢?

  • 这个时候我们需要改变副作用函数的执行时机;
  • 它的默认值是pre,它会在元素 挂载 或者 更新 之前执行;
  • 所以我们会先打印出来一个空的,当依赖的title发生改变时,就会再次执行一次,打印出元素;

我们可以设置副作用函数的执行时机:
在这里插入图片描述
在这里插入图片描述

flush 选项还接受 sync,这将强制效果始终同步触发。然而,这是低效的,应该很少需要。

九、Watch的使用

watch的API完全等同于组件watch选项的Property:

  • watch需要侦听特定的数据源,并在回调函数中执行副作用;
  • 默认情况下它是惰性的,只有当被侦听的源发生变化时才会执行回调;

与watchEffect的比较,watch允许我们:

  • 懒执行副作用(第一次不会直接执行);
  • 更具体的说明当哪些状态发生变化时,触发侦听器的执行;
  • 访问侦听状态变化前后的值;

十、侦听单个数据源

watch侦听函数的数据源有两种类型:

  • 一个getter函数:但是该getter函数必须引用可响应式的对象(比如reactive或者ref);
    在这里插入图片描述

  • 直接写入一个可响应式的对象,reactive或者ref(比较常用的是ref);
    注意:
    如果传入的是reactive响应式对象,取到的值也是reactive对象

    在这里插入图片描述
    注意:
    如果传入的是reactive响应式对象,想要解构reactive对象,将其变成普通对象,可以用以下方法:
    在这里插入图片描述
    注意:
    如果传入的是ref响应式对象,取到的值直接就是value,而不是ref对象
    在这里插入图片描述

十一、侦听多个数据源

侦听器还可以使用数组同时侦听多个源:
在这里插入图片描述
在这里插入图片描述

十二、侦听响应式对象

如果我们希望侦听一个数组或者对象,那么可以使用一个getter函数,并且对可响应对象进行解构:
在这里插入图片描述

十三、watch的选项

如果我们希望侦听一个深层的侦听,那么依然需要设置 deep 为true:

  • 也可以传入 immediate 立即执行;
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/470197.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Git】笔记1

学习廖雪峰Git教程的笔记 Git是什么: Git是目前世界上最先进的分布式版本控制系统 Git与Github的关系:github是一个用git做版本控制的项目托管平台,它为开源项目免费提供Git存储 Git的创建者:Linus,就是创建了linux的那…

支持字典_手把手教你学Python之字典

字典是一种无序可变的容器,字典中的元素都是"键(key):值(value)"对, “键”和“值”之间用冒号隔开,所有“键值对”放在一对大括号“{}”中,元素之间用逗号分隔。在同一个字典中,“键”必须是唯一的&#xf…

Vue3 Composition API(三)——生命周期钩子、Provide函数 和 Inject函数、封装Hook案例、setup顶层编写方式

一、生命周期钩子 我们前面说过 setup 可以用来替代 data 、 methods 、 computed 、watch 等等这些选项,也可以替代 生命周期钩子。 那么setup中如何使用生命周期函数呢? 可以使用直接导入的 onX 函数注册生命周期钩子; 二、Provide函数 和…

单尺度二维离散小波重构(逆变换)idwt2

clc,clear all,close all; load woman; %单尺度二维离散小波分解。分解小波函数haar [cA,cH,cV,cD]dwt2(X,haar); %单尺度二维离散小波重构(逆变换) Yidwt2(cA,cH,cV,cD,haar); figure; subplot(1,2,1),imshow(X,map),title(原始图像); subplot(1,2,2),imshow(Y,map),title(重构…

python导出数据顿号做分隔符_Python语言和matplotlib库做数据可视化分析

这是我的第51篇原创文章,关于数据可视化分析。阅读完本文,你可以知道:1 Python语言的可视化库—matplotlib?2 使用matplotlib实现常用的可视化?0前言数据记者和信息设计师,David McCandless,在他的TED演讲…

Vue3 高级语法(一)—— h函数、jsx

一、认识h函数 Vue推荐在绝大数情况下使用模板来创建你的HTML,然后一些特殊的场景,你真的需要JavaScript的完全编程的能力,这个时候你可以使用渲染函数 ,它比模板更接近编译器; 前面我们讲解过VNode和VDOM的改变&#…

android学习笔记30——AndroidMainfest.xml

Manifest.xml文件的职责:指定APP的包名.声明四大组件, 以及启动方式.指定APP运行的进程名称.指定APP权限.指定最小API版本.指定需要连接的库. Manifest.xml的格式:<?xml version"1.0" encoding"utf-8"?> <manifest> <uses-permission /…

华三交换机ping大包命令_华三交换机常用命令

1、查看全部端口的配置display current-configurationdisplay current-configuration interfacedis cu int2、查看指定端口的配置display current-configuration interface 或interface 进入端口配置模式display this 查看当前端口生效配置其中int-type和int-number为端口…

Vue3 高级语法(二)—— 自定义指令、Teleport、Vue插件

一、认识自定义指令 在Vue的模板语法中我们学习过各种各样的指令&#xff1a;v-show、v-for、v-model等等&#xff0c;除了使用这些指令之外&#xff0c;Vue也允许我们来自定义自己的指令。 注意&#xff1a;在Vue中&#xff0c;代码的复用和抽象主要还是通过组件&#xff1b;通…

自己封装的一个原生JS拖动方法。

代码&#xff1a; 1 function drag(t,p){2 3 var point p || null,4 target t || null,5 resultX 0,6 resultY 0;7 8 (!point)? point target : ; //如果没有拖动点&#xff0c;则拖动点默认为整个别拖动元素9 10 function getPos(…

nvidia的jetson系列的方案_NVIDIA Jetson Xavier NX开发者套件主要应用于自主机器边缘计算产品系列...

NVIDIA副总裁&#xff0c;边缘计算业务总经理Deepu Talla表示&#xff1a;“NVIDIA已在多个行业中创建并优化了大量AI软件。如今&#xff0c;有了云原生技术的加持&#xff0c;我们在嵌入式和机器人领域的客户就能通过高性能、低功耗的Jetson系列产品&#xff0c;受益于软件的创…

Vue-Router4 学习笔记

一、URL的hash 前端路由是如何做到URL和内容进行映射呢&#xff1f;监听URL的改变。 URL的hash也就是锚点(#), 本质上是改变window.location的href属性&#xff1b; 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新&#xff1b; hash的优势就是兼容性更好&am…

转:VC中MessageBox的常见用法

一、关于MessageBox 消息框是个很常用的控件&#xff0c;属性比较多&#xff0c;本文列出了它的一些常用方法&#xff0c;及指出了它的一些应用场合。 1.MessageBox("这是一个最简单的消息框&#xff01;"); 2.MessageBox("这是一个有标题的…

python subprocess communicate_Python中的Subprocess模块

以前我一直用os.system()处理一些系统管理任务,因为我认为那是运行linux命令最简单的方式.我们能从Python官方文档里读到应该用subprocess 模块来运行系统命令.subprocess模块允许我们创建子进程,连接他们的输入/输出/错误管道&#xff0c;还有获得返回值。subprocess模块打算来…

Vuex4学习笔记

一、Vuex的状态管理 二、Vuex的安装 我们这里使用的是vuex4.x&#xff0c;安装的时候需要添加 next 指定版本&#xff1b; npm install vuexnext三、创建Store 每一个Vuex应用的核心就是store&#xff08;仓库&#xff09;&#xff1a; store本质上是一个容器&#xff0c;它…

在局域网搭建一个带 web 操作页面的 git 版本服务器 - Gitlab

以下内容为本人的著作&#xff0c;如需要转载&#xff0c;请声明原文链接 微信公众号「englyf」https://mp.weixin.qq.com/s/Br0ETd_aNffEZoTAba03Bw 最近到了新团队&#xff0c;只有几部新电脑&#xff0c;然后啥也没有了。老江说需要一个管理工程代码的 git 版本服务器&…

div中iframe高度自适应问题

网页分为上、中、下三部分&#xff0c;上、下高度固定中间高度自适应&#xff1b;中间分为左、右两部分&#xff0c;左边宽度固定&#xff0c;右边宽度自适应。现在右侧div是宽度和高度都是自适应&#xff0c;右侧div里有个IFrame&#xff0c;想让IFrame自适应外部div的宽度和高…

python日志模块备份_Python Logging模块 输出日志颜色、过期清理和日志滚动备份

#coding:utf-8importloggingfrom logging.handlers importRotatingFileHandler # 按文件大小滚动备份import colorlog #控制台日志输入颜色importtimeimportdatetimeimportoscur_path os.path.dirname(os.path.realpath(__file__)) #log_path是存放日志的路径log_path os.path…

JS高级——手写call()、apply()、bind()

0、call、apply、bind的区别 bind&#xff0c;call&#xff0c;apply的作用都是用来改变this指向的 call方法 call方法的第一个参数是this的指向 后面传入的是一个参数列表&#xff08;注意和apply传参的区别&#xff09;。当一个参数为null或undefined的时候&#xff0c;函数中…

ubyntu 链接mysql_ubuntu mysql远程连接

ubuntu mysql远程连接http://blog.csdn.net/helen_shw/archive/2010/01/22/5224524.aspxkikikiki-desktop:/etc/apache2mysql error number 2003Cant connect to MySQL server xxx.xxx.xxx.xxx (10061)在ubuntu 9.04中默认安装了mysql&#xff0c;默认只能本地访问&#xff0c;…