Vue 3.0 响应式 计算和侦听

文章目录

  • 前言
  • 计算值
  • watchEffect
  • 停止侦听
  • 清除副作用
  • 副作用刷新时机
  • 侦听器调试
  • watch
  • 侦听单个数据源
  • 侦听多个数据源
  • 与 `watchEffect`共享的行为
  • 后言

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:vue.js
🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹
💖感谢大家支持!您的观看就是作者创作的动力

计算值

有时我们需要依赖于其他状态的状态——在 Vue 中,这是用组件计算属性处理的,以直接创建计算值,我们可以使用computed方法:它接受 getter 函数并为 getter 返回的值返回一个不可变的响应式 ref 对象。

const count = ref(1)
const plusOne = computed(() => count.value++)console.log(plusOne.value) // 2plusOne.value++ // error

或者,它可以使用一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。

const count = ref(1)
const plusOne = computed({get: () => count.value + 1,set: val => {count.value = val - 1}
})plusOne.value = 1
console.log(count.value) // 0

watchEffect

为了根据响应式状态自动应用和重新应用副作用,我们可以使用 watchEffect 方法。它立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。

const count = ref(0)watchEffect(() => console.log(count.value))
// -> logs 0setTimeout(() => {count.value++// -> logs 1
}, 100)

停止侦听

watchEffect 在组件的 setup() 函数或生命周期钩子被调用时,侦听器会被链接到该组件的生命周期,并在组件卸载时自动停止。

在一些情况下,也可以显式调用返回值以停止侦听:

const stop = watchEffect(() => {/* ... */
})// later
stop()

清除副作用

有时副作用函数会执行一些异步的副作用,这些响应需要在其失效时清除 (即完成之前状态已改变了) 。所以侦听副作用传入的函数可以接收一个 onInvalidate 函数作入参,用来注册清理失效时的回调。当以下情况发生时,这个失效回调会被触发:

  • 副作用即将重新执行时
  • 侦听器被停止 (如果在 setup() 或生命周期钩子函数中使用了 watchEffect,则在组件卸载时)
watchEffect(onInvalidate => {const token = performAsyncOperation(id.value)onInvalidate(() => {// id has changed or watcher is stopped.// invalidate previously pending async operationtoken.cancel()})
})

我们之所以是通过传入一个函数去注册失效回调,而不是从回调返回它,是因为返回值对于异步错误处理很重要。

在执行数据请求时,副作用函数往往是一个异步函数:

const data = ref(null)
watchEffect(async onInvalidate => {onInvalidate(() => {...}) // 我们在Promise解析之前注册清除函数data.value = await fetchData(props.id)
})

我们知道异步函数都会隐式地返回一个 Promise,但是清理函数必须要在 Promise 被 resolve 之前被注册。另外,Vue 依赖这个返回的 Promise 来自动处理 Promise 链上的潜在错误。

副作用刷新时机

Vue 的响应性系统会缓存副作用函数,并异步地刷新它们,这样可以避免同一个“tick” 中多个状态改变导致的不必要的重复调用。在核心的具体实现中,组件的 update 函数也是一个被侦听的副作用。当一个用户定义的副作用函数进入队列时,默认情况下,会在所有的组件 update 前执行:

<template><div>{{ count }}</div>
</template><script>export default {setup() {const count = ref(0)watchEffect(() => {console.log(count.value)})return {count}}}
</script>

在这个例子中:

  • count 会在初始运行时同步打印出来
  • 更改 count 时,将在组件更新前执行副作用。
    如果需要在组件更新后重新运行侦听器副作用,我们可以传递带有 flush 选项的附加 options 对象 (默认为 ‘pre’):
// fire before component updates
watchEffect(() => {/* ... */},{flush: 'post'}
)

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

侦听器调试

onTrackonTrigger 选项可用于调试侦听器的行为。

onTrack 将在响应式 property 或 ref 作为依赖项被追踪时被调用。
onTrigger 将在依赖项变更导致副作用被触发时被调用。
这两个回调都将接收到一个包含有关所依赖项信息的调试器事件。建议在以下回调中编写 debugger 语句来检查依赖关系:

watchEffect(() => {/* 副作用 */},{onTrigger(e) {debugger}}
)

onTrack onTrigger 只能在开发模式下工作。

watch

watch API 完全等同于组件侦听器 propertywatch 需要侦听特定的数据源,并在回调函数中执行副作用。默认情况下,它也是惰性的,即只有当被侦听的源发生变化时才执行回调。

  • watchEffect 比较,watch 允许我们:
    • 懒执行副作用;
    • 更具体地说明什么状态应该触发侦听器重新运行;
    • 访问侦听状态变化前后的值。

侦听单个数据源

侦听器数据源可以是返回值的 getter 函数,也可以直接是 ref:

// 侦听一个 getter
const state = reactive({ count: 0 })
watch(() => state.count,(count, prevCount) => {/* ... */}
)// 直接侦听ref
const count = ref(0)
watch(count, (count, prevCount) => {/* ... */
})

侦听多个数据源

侦听器还可以使用数组同时侦听多个源:

watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {/* ... */
})

watchEffect共享的行为

watch watchEffect共享停止侦听,清除副作用 (相应地 onInvalidate 会作为回调的第三个参数传入)、副作用刷新时机和侦听器调试行为。

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力

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

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

相关文章

ubuntu中删除镜像和容器、ubuntu20.04配置静态ip

1 删除镜像 # 短id sudo docker rmi 镜像id # 完整id sudo docker rmi 镜像id# 镜像名【REPOSITORY:TAG】 sudo docker rmi redis:latest2 删除容器 # 删除某个具体容器 sudo docker rm 容器id# 删除Exited状态/未运行的容器&#xff0c;三种命令均可 sudo docker rm docker …

DDR3 HDMI显示图像滑动的问题

同SDRAM类似问题&#xff1a; Sobel算子实现&#xff08;完结&#xff09;-CSDN博客

VUE语法-(readonly的用法)将数据设置成只读模式

1、功能概述 在Vue中定义一个变量&#xff0c;这个变量的值不允许被修改&#xff0c;核心是通过readonly设置成只读。 如果不会使用ref和reactive响应式数据参考如下博客&#xff1a; https://blog.csdn.net/tangshiyilang/article/details/134701103 2、具体实现 如下案例…

迭代器 iterator

一、什么是 iterator? C中&#xff0c;iterator也被称为迭代器&#xff0c;其主要作用就是指向并访问容器中的元素&#xff0c;其像指针但不是指针。 PS&#xff1a; begin()函数返回一个指向容器第一个元素的迭代器&#xff1b;end()函数返回一个指向容器最后一个元素之后位…

红队攻防实战之某商城Getshell

此后如竟没有炬火&#xff0c;我便是唯一的光 信息收集 端口扫描 nmap -T4 -A -p 1-65535 可以看到目标系统开放22、80、888、3306、8800端口 敏感文件扫描 http:///admin/login.html 后台登陆地址泄露 漏洞挖掘 phpinfo信息泄露 phpinfo信息泄露&#xff0c;此站为Linu…

【笔记】2023最新Python安装教程(Windows 11)

&#x1f388;欢迎加群交流&#xff08;备注&#xff1a;csdn&#xff09;&#x1f388; ✨✨✨https://ling71.cn/hmf.jpg✨✨✨ &#x1f913;前言 作为一名经验丰富的CV工程师&#xff0c;今天我将带大家在全新的Windows 11系统上安装Python。无论你是编程新手还是老手&…

团队环境搭建:全志TV303/H713 编译环境搭建方法

文章目录 一、推荐配置二、Ubuntu 配置安装2.1 基础工具2.2 python 配置三、编译测试四、附录4.1配置gcc多版本一、推荐配置 gcc version 9.3.0ubuntu 20.04.1二、Ubuntu 配置安装 选择下载安装 ubuntu 20.042.1 基础工具 sudo apt-get update sudo apt-get install git-core …

js轮播图示例代码

以下是一个简单的 JavaScript 轮播图示例代码&#xff1a; HTML&#xff1a; <div class"slideshow-container"><div class"slide fade"><img src"img1.jpg"></div><div class"slide fade"><img s…

Python--使用布林线设计均值回归策略

在本教程中,我们将探讨均值回归的概念以及如何使用 Python 中的布林线设计交易策略。均值回归是一种流行的交易策略,它基于这样的假设:随着时间的推移,资产价格往往会恢复到历史平均水平。布林线 (Bollinger Bands) 由约翰布林格 (John Bollinger) 开发,是一种技术分析工具…

[论文阅读]Sparse Fuse Dense

SFD Sparse Fuse Dense: Towards High Quality 3D Detection with Depth Completion 论文网址&#xff1a;SFD 论文代码&#xff1a;SFD 论文简读 本文主要关注如何利用深度完成技术提高三维目标检测的质量。论文提出了一种名为 SFD&#xff08;Sparse Fuse Dense&#xff0…

如何在 AdsPower 浏览器中设置代理

AdsPower是一款反检测指纹浏览器&#xff0c;来自中国开发团队的一款对电子商务营销人员非常有用的强大工具&#xff0c;同时具有出色的英语支持。AdsPower浏览器的主要优势是其价格便宜&#xff0c;与竞争对手相比&#xff0c;但其功能和整体工作表现甚至不逊于Indigo。 AdsP…

AOP如何实现公共字段自动填充

在数据库表的设计中主键id&#xff0c;创建时间create_time&#xff0c;更新时间update_time都是必须的字段&#xff0c;根据实际的需求可能还需要用到创建用户名create_username&#xff0c;和更新用户名update_username这两个字段。 其中的create_time、update_time、create_…

go-carbon v2.2.14 发布,轻量级、语义化、对开发者友好的 Golang 时间处理库

carbon 是一个轻量级、语义化、对开发者友好的 golang 时间处理库&#xff0c;支持链式调用。 目前已被 awesome-go 收录&#xff0c;如果您觉得不错&#xff0c;请给个 star 吧 github.com/golang-module/carbon gitee.com/golang-module/carbon 安装使用 Golang 版本大于…

Docker的学习笔记

1.1 docker的介绍 1.2 docker的一次安装 //如果是root用户&#xff0c;不加sudo也行curl -fsSL https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/debian/gpg | sudo apt-key add -echo deb https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/debian/ buster stable…

RabbitMq整合Springboot超全实战案例+图文演示+源码自取

目录 介绍 简单整合 简单模式 定义 代码示例 work模式 定义 代码示例 pubsub模式 定义 代码示例 routing模式 定义 代码示例 top模式 定义 代码 下单付款加积分示例 介绍 代码 可靠性投递示例 介绍 代码 交换机投递确认回调 队列投递确认回调 ​延迟消…

clickhouse -- clickhouse解析复杂JSON数组

举例 - 查数据 select _id,doctorId,patientId,diagnosisList from patient_disease final where diagnosisList is not null limit 3;- 解析数组 SELECT _id,doctorId,patientId,visitParamExtractRaw(diagnosisList,diagnosisName) FROM patient_disease final where _id …

柱状展示当中 ,如何给每个位置加多个项的办法

<!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>双柱修改</title> <script src"https://cdn.staticfile.org/Chart.js/3.9.1/chart.js"></script> </head> <body><canvas i…

Android进阶——更节电的后台任务JobScheduler 机制使用详解

文章大纲 引言一、JobScheduler 机制概述二、JobSchedulerService 服务1、触发JobSchedulerService 的启动2、JobSchedulerService 对象的构造2.1、使用system_server进程的主线程Looper初始化了JobHandler2.2、创建了JobSchedulerService 的对应Binder服务端2.3、创建了持久化…

vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果

一、实现效果 使用echarts实现省市地图绘制根据数据在地图显示柱状图根据数据显示数据&#xff0c;涟漪效果 二、实现方法 1、安装echarts插件 npm install echarts --save2、获取省市json数据 https://datav.aliyun.com/portal/school/atlas/area_selector 通过 阿里旗下…

openbabel 安装 生成指纹方法

今日踩坑小结&#xff1a; openbabel 安装&#xff1a; 可以装&#xff0c;但是得在 Linux 环境下&#xff0c;win 环境装会报错&#xff08;安装不会报错&#xff0c;但是生成指纹的时候会&#xff09; 指纹&#xff1a; 在下面这个链接里&#xff0c;官方给出了命令行调用 o…