一文了解customRef 自定义ref使用

概念

按照文档中的说明:customRef 可以用来创建一个自定义的 ref,并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数,该函数接收 tracktrigger函数作为参数,并且应该返回一个带有 getset 的对象。
其实大致意思就是,我们可以按照自己的业务需求去自定义封装一个ref对象,在其内部可以使用getset去跟踪或更新数据,有点计算属性内味了哈~

应用场景

第一个应用场景就是官网文档中所提到的:可以用来实现防抖函数。

直接上代码:

<template>
  <input
    v-model="text"
  >
</template>

<script setup lang="ts">
import { customRef } from 'vue'
function useDebouncedRef<T> (value: T, delay: number) {
  let timer: any = null
  return customRef<T>((track, trigger) => ({
    get () {
      track()
      return value
    },
    set (newValue) {
      clearTimeout(timer)
      timer = setTimeout(() => {
        value = newValue
        // ...do something
        trigger()
      }, delay)
    }
  }))
}

const text = useDebouncedRef<string>('', 2000)
</script>

代码很简单,相信大家一看就能懂~

第二个应用场景就是可以用来做一个加强型的计算属性。

在Vue3中,computed创建出来的计算属性是只读的。什么意思呢?就是 computed 创建出来的属性,只能通过自身的 get 函数去跟踪其他属性来进行自身更新,算是一个比较坑的地方吧:

img

所以这个时候可以用 customRef 来实现一个加强版的 computed,代码如下:

<template>
  <el-slider
    v-model="value"
    @change="handleSlider"
  />
</template>

<script setup lang="ts">
import { customRef } from 'vue'

function useDebouncedRef<T> (value: T) {
  return customRef<T>((track, trigger) => ({
    get () {
      track()
      return value
    },
    set (newValue) {
      value = newValue
      trigger()
    }
  }))
}

const value = useDebouncedRef<number>(0)

function handleSlider (e: number) {
  value.value = e
}
</script>

<style lang="scss" scoped>
</style>


vue3的customRef实现自定义ref

  • customRef :创建一个自定义的ref,并对其依赖项跟踪和更新触发进行显示控制,我们可以手动写set和get里的逻辑
  • customRef就像一辆手动挡车可玩性高,ref就是自动挡车
  • 使用customRef实现防抖效果(在规定时间无论触发多少次方法,只执行最后一次),上代码
<template>
    <!-- 实现一个效果,input输入数据,然后输入框下面同时显示数据但是,是延迟一秒之后 -->
    <input type="text" v-model="word">
    <span>{{ word }}</span>
</template>
<script>
import { customRef } from 'vue';
export default {
    name: 'toRef',
    setup() {
        function myRef(value, delay) {
            return customRef((track, trigger) => { // 这里有两个参数
                let timer;// 用于接收定时器
                return {
                    get() {
                        console.log('get调用了');
                        // 读取数据时会自动调用该方法
                        track();// 这个方法会通知vue追踪value的变化
                        return value;
                    },
                    set(newValue) {// 有个参数,是新修改的数据我们在set里进行赋值
                        console.log('set调用了');
                        clearTimeout(timer);// 使用前先清空定时器,免得创建很多定时器,在输入时就会出现抖动的效果
                        // 修改数据时会自动调用该方法
                        timer = setTimeout(() => {
                            value = newValue;
                            trigger(); // 这个方法会通知vue去解析模版(解析就会调用get去获取新的数据了)
                        }, delay);
                    }
                }
            })
        };
        let word = myRef('a', 1000);
        return {
            word
        };
    }
}
</script>

img

作用:创建一个自定义ref,比对其依赖项跟踪和更新触发进行显示控制

实现防抖效果:

// get:用于读数据进行调用    set:用于修改数据时进行调用
<template>
  <div>
    <input type="text" v-model="keyword" />
    <h3>{{ keyword }}</h3>
  </div>
</template>
<script>
import { ref, reactive, toRaw, customRef } from "vue";
export default {
  setup() {
//自定义函数内部实现
    function myref(value) {
      let timer;
      return customRef((track, trigger) => {
        return {
          get() {
            //  读属性调用get
            console.log("从myref中读取数据我把${value}");
            track(); //通知vue追踪数据的变化
            return value;
          },
          set(newvalue) {
            //修改数据低啊用set
            console.log(`修改了数据${newvalue}`);
            value = newvalue; //进行修改数据
            clearTimeout(timer); //进行防抖
            timer = setTimeout(() => {
              trigger(); //通知vue重新解析模板
            }, 1000);
          },
        };
      });
    }
    let keyword = myref("hellow"); //使用程序员自定义ref
    return { keyword };
  },
};
</script>

刚启动时:get调用两次进行读数据

img

当进行数据修改时:调用set函数,并且通过trigger()->track()进行数据的重新模板加载,实现响应式,

img

为了实现输入过快出现的抖动情况,

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

5.2 标准IO:文件的打开、关闭及代码实现

目录 标准IO 文件的打开 标准I/O-fopen-mode参数 ​编辑 标准I/O-fopen-示例 标准I/O-fopen-新建文件权限 标准I/O-处理错误信息 标准I/O-错误信息处理-示例1 标准I/O-错误信息处理-示例2 文件的关闭 标准IO 文件的打开 打开就是占用资源 下列函数可用于打开一个…

历经70+场面试,我发现了大厂面试的套路都是···

今年的金三银四刚刚过去&#xff0c;我又想起了我在去年春招时面试了50余家&#xff0c;加上暑期实习面试了20余家&#xff0c;加起来也面试了70余场的面试场景了。 基本把国内有名的互联网公司都面了一遍&#xff0c;不敢说自己的面试经验很丰富&#xff0c;但也是不差的。 …

Kali-linux使用社会工程学工具包(SET)

社会工程学工具包&#xff08;SET&#xff09;是一个开源的、Python驱动的社会工程学渗透测试工具。这套工具包由David Kenned设计&#xff0c;而且已经成为业界部署实施社会工程学攻击的标准。SET利用人们的好奇心、信任、贪婪及一些愚蠢的错误&#xff0c;攻击人们自身存在的…

HNU-计算机系统-Challenge

Challenge 计科210X wolf 202108010XXX 本题是从属于第七次讨论课的个人题,听说做了有加分?我来试试。 下面是相关报告。 题目: C 语言的初学者第一个编写的 C 代码一般是如下所示的“ #include <stdio.h> int main() {printf("Hello, World!");

项目管理:有效的沟通对项目的成功至关重要

为实施有效的沟通&#xff0c;需要建立沟通管理计划同时理解什么是沟通&#xff0c;沟通的对象是谁&#xff0c;沟通的目标是什么&#xff0c;难度在哪里&#xff0c;并选择合适的沟通方式。 项目沟通是确保项目团队的相关信息能及时、正确地产生、收集、发布、储存和最终处理…

Java多线程异常处理

文章目录 一. 线程中出现异常的处理1. 线程出现异常的默认行为2. setUncaoughtExceptionHandler()方法处理异常3. setDefaultUncaoughtExceptionHandler()方法进行异常处理 二. 线程组内出现异常 一. 线程中出现异常的处理 1. 线程出现异常的默认行为 当单线程中初出现异常时…

LOTO示波器如何测试阻抗的频响曲线

LOTO示波器如何测试阻抗的频响曲线 模块的输入输出端口&#xff0c;在电路分析上&#xff0c;一般简单表征为电阻来进行计算和分析。但多数情况下&#xff0c;这些端口并不是纯电阻的特性&#xff0c;更精确一些&#xff0c;它可能是电阻电容以及电感的组合&#xff0c;表现为非…

ChatGPT 聊天接口API 使用

一、准备工作 1.准备 OPENAI_ACCESS_TOKEN 2.准备好PostMan 软件 二、测试交流Demo 本次使用POSTMAN工具进行快速测试&#xff0c;旨在通过ChatGPT API实现有效的上下文流。在测试过程中&#xff0c;我们发现了三个问题&#xff1a;    1.如果您想要进行具有上下文的交流&…

从供应链协同角度挖掘数字化应用场景

企业在数字化转型的过程中&#xff0c;供应链的数字化转型是绕不开的话题。供应链的数字化转型&#xff0c;是借助数字化技术赋能企业和供应链从业人员&#xff0c;驱动业务向更加高效智能的方向发展。越来越多的企业意识到需要依靠新技术&#xff0c;也往往非常强调新技术的应…

为什么我们应该选择Renderbus瑞云渲染进行 EEVEE 渲染?

在某些情况下&#xff0c;用户需要高精度、快速的渲染&#xff0c;而 EEVEE的诞生就是为了满足这种需求。Eevee&#xff08;Extra Easy Virtual Environment Engine&#xff09;是 Blender 最新的内部渲染引擎&#xff0c;由用于 Epic Games 开发的虚幻引擎的相同代码提供支持…

openldap介绍以及使用

参考文献&#xff1a;openldap介绍和使用 基本概念 官网&#xff1a;https://www.openldap.org 官方文档&#xff1a;https://www.openldap.org/doc LDAP是一个开放的&#xff0c;中立的&#xff0c;工业标准的应用协议&#xff0c;通过IP协议提供访问控制和维护分布式信息的…

【Linux】进程信号“疑问?坤叫算信号吗?“

鸡叫当然也算信号啦~ 文章目录 前言一、认识信号量二、信号的产生 1.调用系统函数向进程发信号2.由软件条件产生信号3.硬件异常产生信号总结 前言 信号在我们生活中很常见&#xff0c;下面我们举一举生活中信号的例子&#xff1a; 你在网上买了很多件商品&#xff0c;再等待不…

统计一个数的二进制中1的个数(三种方法)

那么好了好了&#xff0c;宝子们&#xff0c;今天给大家分享一篇经典例题的三种实现方法&#xff0c;来吧&#xff0c;开始整活&#xff01;⛳️ 一、基础法 #define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h> int number_of_one(int n) {int count 0;while(n){if…

VTKmimics Calculate Parts

前言&#xff1a;本博文主要研究mimics中Calculate Parts所采用的方法以及VTK中三维重建的方法&#xff0c;希望对各位小伙伴有所帮助&#xff0c;谢谢&#xff01; mimics-Calculate parts - Interpolation Gray Interpolation 灰度值插值是一种真正的3D插值&#xff0c;它考…

宝塔面板快速搭建贪吃蛇小游戏web网站 - 无需云服务器,网站发布上线

文章目录 前言视频教程1. 环境安装2. 安装cpolar内网穿透3. 内网穿透4. 固定http地址5. 配置二级子域名6. 创建一个测试页面&#x1f34e;总结 转载自远程内网穿透的文章&#xff1a;Linux使用宝塔面板搭建网站&#xff0c;并内网穿透实现公网访问 前言 宝塔面板作为简单好用的…

RoyalScope-总线工作状况和信号质量“体检”

海量存储、洞悉细微 无间断连续采样、波形和报文记录 内置100MHz示波器&#xff0c;采样率高达100MS/s&#xff0c;精确查看、分析和统计信号波形细节。 无间断连续采样总线上信号&#xff0c;全部无遗漏的解析成报文(包括数据帧、遥控帧、过载帧、错误帧、帧间隔和错误报文)和…

Vue3-黑马(十四)

目录&#xff1a; &#xff08;1&#xff09;vue3-进阶-router-令牌-前端路由 &#xff08;2&#xff09;vue3-进阶-router-令牌-前端路由 &#xff08;3&#xff09;vue3-进阶-pinia1 &#xff08;4&#xff09;vue3-进阶-pinia2 &#xff08;1&#xff09;vue3-进阶-rout…

ARM学习笔记_2 模式,寄存器,流水线

ARM arm体积小功耗低性能高&#xff0c;支持thumb ARM双指令集&#xff0c;兼容8/16位器件&#xff1b;大量使用寄存器&#xff0c;指令定长&#xff0c;寻址简单。 ARM是32位架构&#xff0c;Word 32bit&#xff0c; half Word 16bit. 模式 用户模式是用户程序的模式&#…

GPT-2(Transformer Decoder)的TensorFlow实现(附源码)

文章目录 一、GPT2实现步骤二、源码 一、GPT2实现步骤 机器学习模型的开发实现步骤一般都包含以下几个部分&#xff1a;   1. 遵照模型的网络架构&#xff0c;实现每一层&#xff08;Layer/Block&#xff09;的函数&#xff1b;   2. 将第1步中的函数组合在一起&#xff0c…

Typecho搭建和美化

概述 Typecho是一款轻量级的开源PHP博客系统&#xff0c;它简单易用&#xff0c;界面整洁&#xff0c;性能高效&#xff0c;主题、插件众多。我使用的是腾讯云轻量服务器&#xff0c;Typecho的应用模版&#xff0c;一键安装环境。构建自己的博客网站&#xff0c;记录生活、分享…