Vue学习笔记-Vue3中的customRef

作用

创建一个自定义的ref,并对其依赖项的更新和触发进行显式控制

案例

描述:向输入框中输入内容,在下方延迟1秒展示输入内容

代码:

javascript 复制代码
<template>
  <input type="text" v-model="keyword">
  <h3>{{keyword}}</h3>
</template>

<script>
import {customRef} from 'vue'
export default {
  name: 'App',
  setup(){
    function  myRef(value){
      return customRef((track, trigger)=>{
        let timer
          return{
            get(){
              console.log('正在读取数据...:',value)
              //通知vue追踪value的变化
              track();
              return value
            },
            set(newValue){
              console.log('数据发生改变,新数据为:',newValue)
              clearTimeout(timer)
              // //将新值赋给value
              // value = newValue;
              // //通知vue重新解析模板
              // trigger();
              timer = setTimeout(()=>{
                value = newValue;
                trigger();
              },1000)
            }
          }
      })
    }
    //写一个自定义的myRef
    let keyword = myRef('hello')
    return{
      keyword
    }
  },
}
</script>

<style>

</style>
相关推荐
江城开朗的豌豆1 分钟前
组件封装实战:如何设计灵活又好用的前端组件?
前端·javascript·vue.js
巴伦是只猫6 分钟前
【深度学习笔记】2 浅层神经网络
笔记·深度学习·神经网络
没有羊的王K7 分钟前
SSM框架学习DI入门——day2
java·spring boot·学习
公子绝8 分钟前
JAVA学习笔记 使用notepad++开发JAVA-003
java·学习·notepad++·java开发环境
wb18912 分钟前
LVS的集群技术和分布式
运维·笔记·分布式·云计算·lvs
本杰明15217 分钟前
2025/7/14——java学习总结
java·开发语言·学习
ysa05103036 分钟前
竞赛常用加速技巧#模板
c++·笔记·算法
特种加菲猫2 小时前
硬件与软件的桥梁:冯诺依曼体系、操作系统和初始进程的深度解析
linux·笔记
LGGGGGQ4 小时前
嵌入式学习-PyTorch(4)-day21
学习
艾莉丝努力练剑5 小时前
【LeetCode&数据结构】单链表的应用——反转链表问题、链表的中间节点问题详解
c语言·开发语言·数据结构·学习·算法·leetcode·链表