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>
相关推荐
JJJJ_iii1 小时前
【机器学习01】监督学习、无监督学习、线性回归、代价函数
人工智能·笔记·python·学习·机器学习·jupyter·线性回归
Han.miracle2 小时前
数据结构——二叉树的从前序与中序遍历序列构造二叉树
java·数据结构·学习·算法·leetcode
知识分享小能手3 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
●VON4 小时前
重生之我在大学自学鸿蒙开发第九天-《分布式流转》
学习·华为·云原生·harmonyos·鸿蒙
无妄无望4 小时前
docker学习(4)容器的生命周期与资源控制
java·学习·docker
MC丶科5 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
Larry_Yanan7 小时前
QML学习笔记(四十二)QML的MessageDialog
c++·笔记·qt·学习·ui
90后的晨仔7 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
90后的晨仔7 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
能不能别报错7 小时前
K8s学习笔记(十九) K8s资源限制
笔记·学习·kubernetes