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>
相关推荐
尚学教辅学习资料2 小时前
Ruoyi-vue-plus-5.x第五篇Spring框架核心技术:5.1 Spring Boot自动配置
vue.js·spring boot·spring
悠哉悠哉愿意2 小时前
【数学建模学习笔记】机器学习分类:随机森林分类
学习·机器学习·数学建模
给月亮点灯|2 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
悠哉悠哉愿意3 小时前
【数学建模学习笔记】机器学习分类:KNN分类
学习·机器学习·数学建模
四谎真好看3 小时前
Java 学习笔记(进阶篇2)
java·笔记·学习
程序猿炎义3 小时前
【NVIDIA AIQ】自定义函数实践
人工智能·python·学习
小陈phd3 小时前
高级RAG策略学习(四)——上下文窗口增强检索RAG
人工智能·学习·langchain
Jayyih5 小时前
嵌入式系统学习DAY28(网络编程)
网络·学习·tcp/ip
Suckerbin5 小时前
DarkHole: 2靶场渗透
笔记·安全·web安全·网络安全
dbdr09015 小时前
Linux 入门到精通,真的不用背命令!零基础小白靠「场景化学习法」,3 个月拿下运维 offer,第二十六天
linux·运维·服务器·网络·python·学习