Vue3理解(9)
侦听器
1.计算属性允许我们声明性地计算衍生值,而在有些情况下,我们需要状态变化时执行一些方法例如修改DOM。
2.侦测数据源类型,watch的第一个参数可以市不同形式的‘数据源’,它可以市一个ref(包括计算属性),一个响应式对象,一个getter函数或者多给数据源组成的数组,不可以直接侦测一个响应式对象的属性值。
3.深层侦听器,直接给watch()传入一个响应式对象,会隐式地创建一个深层侦听器,该回调函数在所以嵌套的变更都会触发,深度侦测需要遍历所以被侦测的对象,当用于大型数据结构时,开销很大因此在必要时使用它。
4.即时回调的侦听器,watch默认时懒执行,只有当数据发生变化时才触发回调,但是有的场景需要侦听器在创建的时候立即执行一次可以使用 immediate:true 来强制侦听器立即执行。
5.watchEffect() 可以消除手动维护依赖列表的负担,如果你需要侦听一个数据结构中的几个属性,watchEffect()比深度侦听器更有效,因为它将只跟踪回调中使用到的属性,而不是递归跟踪所有属性,watchEffect仅会在其同步执行期间才会追踪依赖,在使用异步回调只有第一个await才会被追踪。
6.watch和watchEffect都能响应地执行有副作用的回调,它们之间主要是追踪响应式依赖的方式,watch只追踪明确的数据源,它不会追踪任何在回调中访问到的东西,另外,仅在数据源确实改变才会触发,watch会避免在发生副作用时追踪依赖因此,我们能更准确地控制回调函数的触发时机,watchEffect则会在副作用发生期间追踪依赖,它会在同时执行过程中,自动追踪所有能访问到的响应式属性,这更方便,而且代码往往更简洁,使得响应式依赖关系会不那么明确。
7.回调函数触发时机,当你更改了响应式状态,它可能会同时触发Vue组件更新和侦听器回调,默认情况下用户创建的侦听器会在Vue组件更新之前被调用,这意味侦听器中访问DOM是在Vue更新之前的状态,如果你想在Vue更新DOM之后需要指明 flush:'post' 选项。
8.停止侦听器,在setup()或者<script setup>中用同步语句创建的侦听器,会自动绑定到宿主组件实例上,并且会在宿主组件上自动卸载停止,因此你不必关系怎么停止一个侦听器,如果你为了防止内存泄漏需要手动停止它就调用watch或watchEffect返回的函数。
浅层侦听器
<script setup>import {ref,watch} from "vue"const data = ref('')watch(data, async(newQuestion,oldQuestion)=>{console.log('数据发生了改变')})</script>
深层侦听器
<script setup>import {ref,watch} from "vue"const data = reactive({count:0})watch(data, async(newQue/stion,oldQuestion)=>{console.log('数据发生了改变')},{deep:true}
)</script>
模板引用
1.虽然Vue的声明性渲染模型抽象了大部分对DOM的直接操作,但在某些情况下,我们仍然需要直接访问底层DOM元素,实现这一点我们可以使用特殊的ref,它允许我们在一个特定的DOM元素或子组件实例被挂载后,获得对它得直接引用。
2.在v-for中的模板引用ref,对应的ref中包含的值是一个数组,它将在元素被挂载后包含对应整个列表的所以元素。
3.函数模板引用,除了使用字符串作为名字ref还可以绑定一个函数在每次组件更新时被调用。
4.组件上的ref,如果一个子组件使用选项式API或者没有使用<script setup>,被引用的组件实例和该子组件的this完全一致,这意味着父组件对子组件的被一个属性和方法都有完全的访问权,这使得在父组件和子组件之间创建紧密耦合的实现细节变得很容易,当然也因此,应该在绝对需要时才使用组件引用。
<script setup>import {ref,onMounted} from "vue"const input= ref(null)onMounted(()=>{input.value.focus()})
</script>
<template><input :ref="input">
</template>
<script setup>import {ref,onMounted} from "vue"const input= ref(null)onMounted(()=>{input.value.focus()})
</script>
<template><input :ref="(el)={}">
</template>
相关文章:
Vue3理解(9)
侦听器 1.计算属性允许我们声明性地计算衍生值,而在有些情况下,我们需要状态变化时执行一些方法例如修改DOM。 2.侦测数据源类型,watch的第一个参数可以市不同形式的‘数据源’,它可以市一个ref(包括计算属性),一个响应式对象&…...
CRM系统中的销售漏斗有什么作用?
随着数字化发展,越来越多的企业使用CRM销售管理系统提高销售管理水平,提升盈利能力。在这个过程中,销售漏斗起到了非常重要的作用。下面就来说说,CRM系统中的销售漏斗有什么作用? 一、销售数据可视化 CRM销售漏斗通过…...
项目(模块1:用户登陆流程分析)
验证登陆点流程...
2023年中国商用服务机器人行业发展概况分析:国产机器人厂商向海外进军[图]
商用服务机器人指在非制造业的商用服务场景中,用来替代或辅助人类进行服务性质工作的机器人;常见的商用场景中,商用服务机器人主要分为终端配送类机器人,商用清洁类机器人,引导讲解类机器人等,被广泛应用在…...
千兆光模块和万兆光模块的适用场景有哪些
随着数字化和物联网的普及,对网络速度和带宽的要求也越来越高。千兆光模块和万兆光模块是两种常见的光模块,在不同的应用场景中,它们各具优势。下面我们来探讨一下千兆光模块和万兆光模块的主要适用场景。 首先是企业网络。千兆光模块常用于…...
2 files found with path ‘lib/armeabi-v7a/liblog.so‘ from inputs:
下图两个子模块都用CMakeLists.txt引用了android的log库,编译后,在它们的build目录下都有liblog.so的文件。 四个CPU架构的文件夹下都有。 上层模块app不能决定使用哪一个,因此似乎做了合并,路径就是报错里的哪个路径,…...
qt中json类
目录 QJsonValue QJsonObject QJsonArray QJsonDocument 案例: Qt 5.0开始提供了对Json的支持,我们可以直接使用Qt提供的Json类进行数据的组织和解析,下面介绍4个常用的类。 QJsonValue 该类封装了JSON支持的数据类型。 布尔类型…...
NeurIPS 2023 | AD-PT:首个大规模点云自动驾驶预训练方案
概要 自动驾驶领域的一个长期愿景是,感知模型能够从大规模点云数据集中学习获得统一的表征,从而在不同任务或基准数据集中取得令人满意的结果。之前自监督预训练的工作遵循的范式是,在同一基准数据集上进行预训练和微调,这很难实…...
设计模式-结构型模式
文章目录 一、代理模式1.静态代理2.JDK动态代理3.CGLib动态代理4.三种代理对比 二、适配器模式1.类适配器模式2.对象适配器模式 三、装饰者模式静态代理和装饰者的区别 四、桥接模式五、外观模式六、组合模式七、享元模式 结构性模式描述如何将类或对象按某种布局组成更大的结构…...
BUUCTF学习(7): 随便注,固网杯
1、介绍 2、解题 11;show tables;# select * from 1919810931114514 concat(sel,ect from 1919810931114514 ) PEREPARE y from sql; ECCUTE y; -1; sEt sql CONCAt(se,lect * from 1919810931114514;); prePare stmt from sql; EXECUTE stmt; # 结束...
【文末福利】巧用Chat GPT快速提升职场能力:数据分析与新媒体运营
欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab,机器人运动控制、多机器人协作,智能优化算法,滤波估计、多传感器信息融合,机器学习,人工智能等相关领域的知识和技术。关…...
院内导航系统厂商分析
随着医疗技术的不断发展和医院规模的不断扩大,院内导航系统成为了现代化医院不可或缺的一部分。患者就医时,一个高效便捷的导航系统可以帮助他们快速找到目标科室,同时也能提高医院的整体运营效率。本文将推荐五家在院内导航市场具有竞争力的…...
MES系统作业调度
一、MES系统作业调度的概念和功能 作业调度是指在制造过程中,根据生产计划和实际情况,合理安排和调度各项任务和资源,以达到最佳的生产效率和资源利用率。MES系统作业调度功能涉及以下方面: 1. 任务计划与分配:MES系…...
C++入门-引用
C入门-引用 前置知识点:函数栈帧的复用前置知识点:类型转换时产生的临时变量1.含义2.代码形式3.引用的价值1.传参数传参效率测试补充:C与Java中引用的区别 2.引用做返回值(前置知识:栈帧复用)1.传值返回2.传引用返回传引用返回并用引用接收3.静态变量传引用返回4.引用做返回值真…...
问题:Qt中软件移植到笔记本中界面出现塌缩
这是由于软件之前运行的设备DPI较低,移植到笔记本中显示设备DPI较高,导致窗体显示进行了缩放。 解决方案,在main.cpp中加入以下代码: if(QT_VERSION>QT_VERSION_CHECK(5,6,0)) QCoreApplication::setAttribute(Qt::AA_EnableHi…...
NDK编译脚本:Android.mk or CMakeLists.txt
本文来自于:https://github.com/xufuji456/FFmpegAndroid/blob/master/doc/NDK_compile_shell.md 前言 Android NDK以前默认使用Android.mk与Application.mk进行构建,但是在Android Studio2.2之后推荐使用CMake进行编译。 CMake是跨平台编译工具&#…...
低代码提速应用开发
低代码介绍 低代码平台是指一种能够帮助企业快速交付业务应用的平台。自2000年以来,低代码市场一直充斥着40大大小小的各种玩家,比如国外的Appian、K2、Pega Systems、Salesforce和Ultimus,国内的H3 BPM。 2015年以后,这个市场更是…...
Hi3516DV500 SVP_NNN添加opencv库记录
默认没有带opencv库,但是实际项目中需要用到opencv库,因此添加一下此库; 1:编译opencv源码,这里具体可以参考 海思Hi3516移植opencv以及错误调试_海思hi3516摄像头开发-CSDN博客 2:在工程的根目录下新建…...
BIO实战、NIO编程与直接内存、零拷贝深入剖析
原生 JDK 网络编程 BIO BIO,意为 Blocking I/O,即阻塞的 I/O。 BIO 基本上就是我们上面所说的生活场景的朴素实现。在 BIO 中类 ServerSocket 负责绑定 IP 地址,启动监听端口,等待客户连接;客户端 Socket 类的实例…...
计网第六章(应用层)(四)(电子邮件)
电子邮件采用客户/服务器的方式。 1、三个构成 电子邮件系统的三个组成构件:用户代理、邮件服务器以及电子邮件所需的协议。 用户代理是用户与电子邮件系统的接口,又称为电子邮件客户端软件。 邮件服务器是电子邮件系统的基础设施。因特网上所有的服…...
Cursor Pro免费激活终极指南:3种方法永久解锁AI编程助手
Cursor Pro免费激活终极指南:3种方法永久解锁AI编程助手 【免费下载链接】cursor-free-vip [Support 0.45](Multi Language 多语言)自动注册 Cursor Ai ,自动重置机器ID , 免费升级使用Pro 功能: Youve reached your t…...
避坑指南:用高德DistrictSearch获取精准行政边界时遇到的5个典型问题(含最新GeoJson处理技巧)
高德DistrictSearch深度避坑:5个实战难题与GeoJson优化方案 当你在深夜调试地图边界数据时,突然发现某个街道的轮廓出现了诡异的锯齿状变形——这不是恐怖片情节,而是使用高德DistrictSearch时可能遇到的真实场景。作为经历过数十个地图项目…...
cobalt数据库设计解析:如何平衡性能与数据完整性
cobalt数据库设计解析:如何平衡性能与数据完整性 【免费下载链接】cobalt best way to save what you love 项目地址: https://gitcode.com/GitHub_Trending/cob/cobalt 引言:数据库设计的永恒矛盾 在软件开发领域,数据库设计始终面临…...
别再只用柱状图了!用Python的Matplotlib画个酷炫的雷达图,5分钟搞定你的个人技能展示
用Python打造专业级技能雷达图:5步提升你的职场竞争力 简历上那些千篇一律的柱状图和百分比条已经让招聘官审美疲劳了?试试用Matplotlib绘制一个令人眼前一亮的雷达图来展示你的核心技能组合。这种可视化方式不仅能清晰呈现你在各个领域的熟练程度&#…...
EmbeddingGemma-300m效果展示:多语言文本相似度计算实战
EmbeddingGemma-300m效果展示:多语言文本相似度计算实战 1. 引言 文本嵌入模型正在改变我们处理多语言内容的方式。想象一下,你有一个包含中文、英文、法文等多种语言的文档库,如何快速找到语义相似的内容?传统的关键词匹配方法…...
手把手教你为OpenBMC (AST2600平台) 正确配置PCA9545 I2C Switch的DTS节点
深入解析AST2600平台PCA9545 I2C Switch设备树配置实战指南 在嵌入式系统开发中,I2C总线扩展是连接多个外设的常见需求。NXP的PCA9545作为一款4通道I2C总线开关芯片,能够有效解决I2C地址冲突问题,但在实际应用中,设备树(DTS)配置…...
Wan2.1视频生成小白必看:避开这些坑,让你的视频生成一次成功
Wan2.1视频生成小白必看:避开这些坑,让你的视频生成一次成功 1. 为什么你的视频生成总是失败? 很多新手第一次使用Wan2.1视频生成模型时,都会遇到各种问题:生成的视频模糊不清、内容与描述不符、甚至直接失败。这通常…...
手把手教你部署DeepSeek-OCR:零基础实现多语言文字识别
手把手教你部署DeepSeek-OCR:零基础实现多语言文字识别 1. 为什么选择DeepSeek-OCR 在数字化时代,文字识别技术已经成为各行各业的基础需求。无论是扫描文档转电子版,还是从照片中提取文字信息,传统OCR工具往往在复杂场景下表现…...
从产品质量到A/B测试:聊聊高斯分布在真实业务场景中的10个应用与常见误区
高斯分布实战手册:10个业务场景中的智能决策与避坑指南 当你发现某电商平台上的用户购买金额呈现"中间多、两头少"的分布时,当A/B测试结果出现微妙的5%转化率差异时,当工厂质检数据出现异常波动时——这些看似无关的业务问题背后&a…...
融合多尺度特征与注意力机制的YOLOv5红外小目标检测优化方案
1. 红外小目标检测的技术挑战 红外遥感图像中的小目标检测一直是计算机视觉领域的难点问题。与可见光图像相比,红外图像具有低对比度、高噪声、目标尺寸小等特点,这使得传统检测算法难以取得理想效果。在实际应用中,军事侦察中的无人机识别、…...
