当前位置: 首页 > news >正文

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 用于&#xff1a;创建一个自定义的 ref 函数&#xff0c;并对其依赖项跟踪和更新触发进行显式控制。 使用 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文件系统下文件被误删除的如何恢复数据?

服务器故障&#xff1a; 一台zfs文件系统服务器&#xff0c;管理员误操作删除服务器上的数据。 服务器数据恢复过程&#xff1a; 1、将故障服务器所有磁盘编号后取出&#xff0c;硬件工程师检测所有硬盘后没有发现有磁盘存在硬件故障。以只读方式将全部磁盘做扇区级别的镜像备…...

关于嵌入式rtthread系统与单片机芯片

简介 我估计已经有很久没更新了&#xff0c;近一年都在某个国企里工作&#xff0c;我做的就是嵌入式工程师的岗位&#xff0c;最近才刚刚退出来&#xff0c;想来说说自己的工作使用的软件和系统。 本身进公司的时候&#xff0c;其实做的就是写单片机的板子的程序的工作&#x…...

在Ubuntu上安装Redis并学习使用get、set和keys命令

目录 安装Redis切换到root用户搜索redis相关软件包安装redis修改配置文件重启服务器使用redis客户端连接服务器 get与set命令keys 安装Redis 我们在Ubuntu20.04上进行Redis的安装 切换到root用户 使用su命令&#xff1a; 在终端中&#xff0c;输入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是一种用于生物学和生物医学研究中的荧光染料&#xff0c;它在生物应用方面具有许多重要用途&#xff0c;包括但不限于以下几个方面&#xff1a; **生物标记&#xff1a;**Sulfo-CY5 NHS ester可以与生物分子&#xff08;如抗体、蛋白质、核酸等&#xff09…...

Python Django 之模板继承详解(extends)

文章目录 1 概述1.1 目的1.2 标签&#xff1a;block、extends1.3 目录结构 2 templates 目录2.1 base.html&#xff1a;父页面2.2 login.html&#xff1a;子页面 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. 查看磁盘空间信息&#xff1a;lsblk 2. 查看内存信息&#xff1a;awk $3"kB"{$2$2/1024^2;$3"GB";} 1 /proc/meminfo | column -t 3. 查看cup相关信息&#xff1a;lscup...

C语言 强制类型转换的各种代码示例

在C语言中&#xff0c;强制类型转换可以通过使用类型转换运算符来完成。以下是一些关于C语言强制类型转换的代码示例&#xff1a; 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启动界面配置&#xff0c;可以看到有Android和iOS的启动页面的配置 &#xff0c;选择自定义启动图即可配置 广告开屏 在pages中新建一个广告开屏文件并在pases.json的最顶部配置这个页…...

基于人工势场法的航线规划

GitHub - zzuwz/Artificial-Potential-Field: 2D平面下的人工势场法 GitHub - mellody11/Artificial-Potential-Field: 机器人导航--人工势场法及其改进 matlab2020a可以运行...

在紫光同创盘古50K开发板上进行DDR读写测试

本原创文章由深圳市小眼睛科技有限公司创作&#xff0c;版权归本公司所有&#xff0c;如需转载&#xff0c;需授权并注明出处 适用于板卡型号&#xff1a; 紫光同创PGL50H开发平台&#xff08;盘古50K开发板&#xff09; 一&#xff1a;软硬件平台 软件平台&#xff1a;PDS_…...

MySQL BinLog实战应用之二

一、前言 上篇 MySQL Binlog实战应用之一 主要讲了BinLog的开启以及用MySQLBinLog读取BigLog二进制文件&#xff0c;但MySQLBinLog很难直接对接Java&#xff0c;所以有了Canal这个Alibaba开发的用于MySQL增量日志解析&#xff0c;提供增量数据的订阅和消费组件。 二、Canal原…...

Visual Studio Code 快 捷 键

个人总结 Visual Studio Code 快 捷 键&#xff01;满足日常使用&#xff0c;提高工作效率&#xff01;&#xff01; 1、搜索文件&#xff1a; Ctrl p 2、移到某一行&#xff1a; Ctrl g 一、切 换 行 注 释、切 换 块 注 释 1、行注释"//"快捷键&#xf…...

有色金属冶炼VR虚拟场景互动教学有何优势

真实模拟&#xff1a;VR虚拟现实技术可以提供一个真实的虚拟环境&#xff0c;模拟钢铁制造现场&#xff0c;包括设备、工艺流程、操作规程等&#xff0c;使学员获得直观、真实的体验。 安全可靠&#xff1a;钢铁制造技能培训可以在虚拟环境中进行&#xff0c;不会对人员或设备造…...

Python将知网导出的endnote题录转为Refworks模式

近期使用SATI文献分析系统&#xff0c;发现效果有限&#xff0c;vosviewer虽然聚类起来图片好看&#xff0c;但没有模块度以及轮廓值等评价标准&#xff0c;因此只能去找citespace&#xff0c;3000文献经过了筛选&#xff0c;重新在知网导一次太麻烦了&#xff0c;还是直接用py…...

单元测试反射注解

单元测试 就是针对最小的功能单元(方法)&#xff0c;编写测试代码对其进行正确性测试。 咱们之前是如何进行单元测试的&#xff1f;有啥问题 &#xff1f; Junit单元测试框架 可以用来对方法进行测试&#xff0c;它是由Junit公司开源出来的 具体步骤 Junit框架的常见注解…...

多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

css实现圆环展示百分比,根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...