【VUE3中使用自定义ref 并封装】太简单了吧！！

最新推荐文章于 2024-06-10 20:48:55 发布

源圆元

最新推荐文章于 2024-06-10 20:48:55 发布

阅读量533

点赞数 14

分类专栏： vue3 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_53398323/article/details/135459774

版权

vue3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

【VUE3中使用自定义ref 并封装】

需求：我们需要连续不断地输入数据，并且只有当数据输入完成的一秒钟之后，下面的数据才会发生变化

需求：我们需要连续不断地输入数据，并且只有当数据输入完成的一秒钟之后，下面的数据才会发生变化

实现响应式所用到的API有ref（）与reactive（）两种，若实现输入框的数据与显示的数据相一致，我们很本能的就可以想到v-model,但显示是实时变化的,与需求相悖.所以用到自定义Ref.

在这里插入图片描述

v-model实现输入即现实，代码如下:

<template>
  <div class="custom-ref">
    <h2>{{ msg }}</h2>
    <br>
    <input type="text" v-model="msg">
  </div>
</template>
<script setup lang="ts" name="CustomRef">
import { ref, customRef } from 'vue'
const msg = ref('Hello')
</script>
<style scoped>
.custom-ref {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
</style>

实现延时1s数据显示的需求,封装在hooks中并使用 ,效果图如下:

在这里插入图片描述

页面vue中使用

<template>
  <div class="custom-ref">
    <h2>{{ msg }}</h2>
    <br>
    <input type="text" v-model="msg">
  </div>
</template>
<script setup lang="ts" name="CustomRef">
//引入hooks下的useMsgRef
import useMsgRef from '@/hooks/useMsgRef'
let {msg}= useMsgRef('你好',1000)
</script>
<style scoped>
.custom-ref {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
</style>

src目录下新建hooks文件夹,在hooks中新建customRef.ts文件::

import {  customRef } from 'vue'
export default function(initVal:string,delay:number){
  let timer:number
  let msg = customRef((track,trigger) => {
    return {
      // 数据msg读取时调用
      get() {
        track() //告诉vue msg变化 就去更新
        return initVal
      },
      // 数据被修改时调用 
      set(val) {
        console.log(val,'set')
        clearTimeout(timer)
        timer =  setTimeout(() =>{
          initVal = val
        trigger() //通知vue 数据msg变化了
        },delay)
      }
    }
  })
  return {msg}
}