在vue3中使用customRef创建一个防抖的ref

最新推荐文章于 2024-08-27 15:59:21 发布

蔡某人的

最新推荐文章于 2024-08-27 15:59:21 发布

阅读量65

点赞数

文章标签： javascript 开发语言 vue.js

本文链接：https://blog.csdn.net/weixin_67002441/article/details/131307987

版权

该代码示例展示了在Vue中如何使用customRef创建一个自定义的ref，该ref在值改变时会延迟500毫秒更新界面。通过myRef函数，当keyword输入值变化时，更新会被放入一个定时器中，从而控制视图的更新时机。

摘要由CSDN通过智能技术生成

<template>
  <div>
    <input type="text" v-model="keyword">
    <h3>{{keyword}}</h3>
  </div>
</template>

<script>
import {customRef} from 'vue'
export default {
	name:'TestView',
  setup(){
    //自定义一个ref名为：myRef
    function myRef(value,delay){
      let timer
      //通过 customRef去实现自定义
      return customRef((track,trigger)=>{
        return {
          get(){
            // console.log(`有人读取了keyword,它的值为${value}`);
            track()//告诉vue这个value值需要被“追踪”的
            return value //有人读取时将值返回出去
          },
          set(newValue){
            clearTimeout(timer) 
            // console.log(`有人修改了keyword,它的值为${newValue}`);
            timer =  setTimeout(()=>{ //添加定时器500毫秒后更新界面
              value = newValue //有人修改时，修改value的值
              trigger() //告诉vue更新界面
            },delay)
          }
        }
      })
    }
    // 自己定义的的ref
    let keyword = myRef('holle',500)
    // //使用vue提供的ref
    // let keyword = ref('holle')
    return {
      keyword
    }
  }
}

</script>