Vue学习笔记-Vue3中的customRef

2023-12-14 21:02:31

作用

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

案例

描述:向输入框中输入内容,在下方延迟1秒展示输入内容
在这里插入图片描述
代码:

<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>

文章来源:https://blog.csdn.net/theLuckyLong/article/details/135000210
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。