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框架的常见注解…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作,无需更改相机配置。但是,一…...
【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad(Adaptive Gradient Algorithm)是一种自适应学习率的优化算法,由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率,适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
Matlab | matlab常用命令总结
常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...
CSS | transition 和 transform的用处和区别
省流总结: transform用于变换/变形,transition是动画控制器 transform 用来对元素进行变形,常见的操作如下,它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能
1. 开发环境准备 安装DevEco Studio 3.1: 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK 项目配置: // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...
解析奥地利 XARION激光超声检测系统:无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用
在工业制造领域,无损检测(NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统,以非接触式光学麦克风技术为核心,打破传统检测瓶颈,为半导体、航空航天、汽车制造等行业提供了高灵敏…...
全面解析数据库:从基础概念到前沿应用
在数字化时代,数据已成为企业和社会发展的核心资产,而数据库作为存储、管理和处理数据的关键工具,在各个领域发挥着举足轻重的作用。从电商平台的商品信息管理,到社交网络的用户数据存储,再到金融行业的交易记录处理&a…...
车载诊断架构 --- ZEVonUDS(J1979-3)简介第一篇
我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 做到欲望极简,了解自己的真实欲望,不受外在潮流的影响,不盲从,不跟风。把自己的精力全部用在自己。一是去掉多余,凡事找规律,基础是诚信;二是…...
Linux操作系统共享Windows操作系统的文件
目录 一、共享文件 二、挂载 一、共享文件 点击虚拟机选项-设置 点击选项,设置文件夹共享为总是启用,点击添加,可添加需要共享的文件夹 查询是否共享成功 ls /mnt/hgfs 如果显示Download(这是我共享的文件夹)&…...
k8s从入门到放弃之Pod的容器探针检测
k8s从入门到放弃之Pod的容器探针检测 在Kubernetes(简称K8s)中,容器探测是指kubelet对容器执行定期诊断的过程,以确保容器中的应用程序处于预期的状态。这些探测是保障应用健康和高可用性的重要机制。Kubernetes提供了两种种类型…...
