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>
相关推荐
JIngJaneIL1 小时前
篮球论坛|基于SprinBoot+vue的篮球论坛系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·篮球论坛系统
摇滚侠2 小时前
Spring Boot 3零基础教程,新特性 ProblemDetails,笔记50
spring boot·笔记
一只一只2 小时前
Unity 3D笔记(进阶部分)——《B站阿发你好》
笔记·3d·unity·游戏引擎
微露清风2 小时前
系统性学习C++-第八讲-vector类
java·c++·学习
程序猿阿伟3 小时前
《首屏加载优化手册:Vue3+Element Plus项目提速的技术细节》
前端·javascript·vue.js
月临水3 小时前
Git 学习笔记
笔记·git·学习·1024程序员节
奋斗的牛马3 小时前
FPGA—ZYNQ学习Debug(三)
学习·fpga开发
麦麦大数据3 小时前
D030知识图谱科研文献论文推荐系统vue+django+Neo4j的知识图谱|论文本文相似度推荐|协同过滤
vue.js·爬虫·django·知识图谱·科研·论文文献·相似度推荐
qq_401700413 小时前
matlab学习
学习·算法·matlab
hd51cc3 小时前
C++ 类的学习(四) 继承
开发语言·c++·学习