Vue 创建自定义 ref 函数
Vue 创建自定义 ref 函数 customRef
customRef 用于:创建一个自定义的 ref 函数,并对其依赖项跟踪和更新触发进行显式控制。
使用 customRef 创建自定义 ref 函数
// 创建自定义 ref 函数
function myRef(value) {return customRef((track, trigger) => {return {get() {track(); // 通知 Vue 追踪 value 的变化return value; // 返回 value 值},set(newValue) {value = newValue; // 修改 value 值trigger(); // 通知 Vue 重新解析模板}}})
}// 使用自定义 ref 函数
let content = myRef('测试鸭');
自定义 ref 实现防抖效果:
<template><input type="text" v-model="keyWord"><h3>{{ keyWord }}</h3>
</template><script>
import { customRef } from 'vue';
export default {name: "Home",setup() {// 自定义一个 ref 函数,名为:myReffunction myRef(value, delay) {let timer = null;return customRef((track, trigger) => {return {get() {console.log('有人读取了数据', value);track(); // 通知 Vue 追踪 value 的变化return value; // 返回 value 值},set(newValue) {clearTimeout(timer); // 清除上一次的延时执行// 延时执行修改数据timer = setTimeout(() => {console.log('有人修改了数据', newValue);value = newValue; // 修改 value 值trigger(); // 通知 Vue 重新解析模板}, delay)}}})}let keyWord = myRef('你好呀', 500);// 返回数据return { keyWord }}
}
</script>
相关文章:
Vue 创建自定义 ref 函数
Vue 创建自定义 ref 函数 customRef customRef 用于:创建一个自定义的 ref 函数,并对其依赖项跟踪和更新触发进行显式控制。 使用 customRef 创建自定义 ref 函数 // 创建自定义 ref 函数 function myRef(value) {return customRef((track, trigger) &…...
[2016-2018]phpstudy的exp制作
[2016-2018]phpstudy的exp制作 用python的requests模块进行编写 修改请求数据包进行远程代码执行 import requests import base64 def remove_code_execute():try:url input("请输入要测试的网址:")cmd input("想要执行的命令:")cmd f"system({…...
服务器数据恢复—Zfs文件系统下文件被误删除的如何恢复数据?
服务器故障: 一台zfs文件系统服务器,管理员误操作删除服务器上的数据。 服务器数据恢复过程: 1、将故障服务器所有磁盘编号后取出,硬件工程师检测所有硬盘后没有发现有磁盘存在硬件故障。以只读方式将全部磁盘做扇区级别的镜像备…...
关于嵌入式rtthread系统与单片机芯片
简介 我估计已经有很久没更新了,近一年都在某个国企里工作,我做的就是嵌入式工程师的岗位,最近才刚刚退出来,想来说说自己的工作使用的软件和系统。 本身进公司的时候,其实做的就是写单片机的板子的程序的工作&#x…...
在Ubuntu上安装Redis并学习使用get、set和keys命令
目录 安装Redis切换到root用户搜索redis相关软件包安装redis修改配置文件重启服务器使用redis客户端连接服务器 get与set命令keys 安装Redis 我们在Ubuntu20.04上进行Redis的安装 切换到root用户 使用su命令: 在终端中,输入su并按回车键。然后输入roo…...
Ubuntu更换镜像源
Ubuntu更换镜像源 镜像源设置文件镜像源设置focal版本镜像源设置bionic版本镜像源设置 更新源问题 镜像源设置文件 备份镜像源设置文件 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak编辑镜像源设置文件 sudo gedit /etc/apt/sources.list镜像源设置 Ubuntu有不…...
Sulfo-CY5 NHS荧光染料的生物应用2230212-27-6星戈瑞
Sulfo-CY5 NHS ester是一种用于生物学和生物医学研究中的荧光染料,它在生物应用方面具有许多重要用途,包括但不限于以下几个方面: **生物标记:**Sulfo-CY5 NHS ester可以与生物分子(如抗体、蛋白质、核酸等)…...
Python Django 之模板继承详解(extends)
文章目录 1 概述1.1 目的1.2 标签:block、extends1.3 目录结构 2 templates 目录2.1 base.html:父页面2.2 login.html:子页面 3 其它代码3.1 settings.py3.2 views.py3.3 urls.py 1 概述 1.1 目的 模板继承 和 类继承 的目的是一样的&#…...
混合式ANC主动降噪耳机系统设计(含C源代码)
混合式ANC主动降噪耳机系统设计(含C源代码) 是否需要申请加入数字音频系统研究开发交流答疑群(课题组)?可加我微信hezkz17, 本群提供音频技术答疑服务,+群赠送语音信号处理降噪算法,蓝牙音频,DSP音频项目核心开发资料, 1 FF信号链路与FB 链路算法处理上一样 X(n)为噪声输…...
Linux查看磁盘、内存、cpu信息
1. 查看磁盘空间信息:lsblk 2. 查看内存信息:awk $3"kB"{$2$2/1024^2;$3"GB";} 1 /proc/meminfo | column -t 3. 查看cup相关信息:lscup...
C语言 强制类型转换的各种代码示例
在C语言中,强制类型转换可以通过使用类型转换运算符来完成。以下是一些关于C语言强制类型转换的代码示例: int num 10; float fnum (float) num; // 将整数num转换为浮点数float fnum 3.14; int num (int) fnum; // 将浮点数fnum转换为整数&a…...
python 二维码使用
python 二维码使用 segno官网...
uniapp的启动页、开屏广告
uniapp的启动页、开屏广告 启动页配置广告开屏 启动页配置 在manifest.json文件中找到APP启动界面配置,可以看到有Android和iOS的启动页面的配置 ,选择自定义启动图即可配置 广告开屏 在pages中新建一个广告开屏文件并在pases.json的最顶部配置这个页…...
基于人工势场法的航线规划
GitHub - zzuwz/Artificial-Potential-Field: 2D平面下的人工势场法 GitHub - mellody11/Artificial-Potential-Field: 机器人导航--人工势场法及其改进 matlab2020a可以运行...
在紫光同创盘古50K开发板上进行DDR读写测试
本原创文章由深圳市小眼睛科技有限公司创作,版权归本公司所有,如需转载,需授权并注明出处 适用于板卡型号: 紫光同创PGL50H开发平台(盘古50K开发板) 一:软硬件平台 软件平台:PDS_…...
MySQL BinLog实战应用之二
一、前言 上篇 MySQL Binlog实战应用之一 主要讲了BinLog的开启以及用MySQLBinLog读取BigLog二进制文件,但MySQLBinLog很难直接对接Java,所以有了Canal这个Alibaba开发的用于MySQL增量日志解析,提供增量数据的订阅和消费组件。 二、Canal原…...
Visual Studio Code 快 捷 键
个人总结 Visual Studio Code 快 捷 键!满足日常使用,提高工作效率!! 1、搜索文件: Ctrl p 2、移到某一行: Ctrl g 一、切 换 行 注 释、切 换 块 注 释 1、行注释"//"快捷键…...
有色金属冶炼VR虚拟场景互动教学有何优势
真实模拟:VR虚拟现实技术可以提供一个真实的虚拟环境,模拟钢铁制造现场,包括设备、工艺流程、操作规程等,使学员获得直观、真实的体验。 安全可靠:钢铁制造技能培训可以在虚拟环境中进行,不会对人员或设备造…...
Python将知网导出的endnote题录转为Refworks模式
近期使用SATI文献分析系统,发现效果有限,vosviewer虽然聚类起来图片好看,但没有模块度以及轮廓值等评价标准,因此只能去找citespace,3000文献经过了筛选,重新在知网导一次太麻烦了,还是直接用py…...
单元测试反射注解
单元测试 就是针对最小的功能单元(方法),编写测试代码对其进行正确性测试。 咱们之前是如何进行单元测试的?有啥问题 ? Junit单元测试框架 可以用来对方法进行测试,它是由Junit公司开源出来的 具体步骤 Junit框架的常见注解…...
利用ngx_stream_return_module构建简易 TCP/UDP 响应网关
一、模块概述 ngx_stream_return_module 提供了一个极简的指令: return <value>;在收到客户端连接后,立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量(如 $time_iso8601、$remote_addr 等)&a…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动(如演唱会、马拉松赛事、高考中考等)期间,城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例,暖城商圈曾因观众集中离场导致周边…...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装;只需暴露 19530(gRPC)与 9091(HTTP/WebUI)两个端口,即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
苍穹外卖--缓存菜品
1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得,如果用户端访问量比较大,数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据,减少数据库查询操作。 缓存逻辑分析: ①每个分类下的菜品保持一份缓存数据…...
【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验
系列回顾: 在上一篇中,我们成功地为应用集成了数据库,并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了!但是,如果你仔细审视那些 API,会发现它们还很“粗糙”:有…...
自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元(GRU)长短期记忆神经网络(LSTM)…...
服务器--宝塔命令
一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行! sudo su - 1. CentOS 系统: yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...
R语言速释制剂QBD解决方案之三
本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...
处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的
修改bug思路: 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑:async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...
