customRef vue3 自定义响应

customRef ，它是vue3中允许我们创建自定义的响应式引用。

首先在vue项目中 创建一个modelRef 的一个js文件夹 在将一下代码 

拿去用

import { customRef } from "vue";

export function modelref(value, data=1000){

    let temit

 return customRef((track,trigger)=>{

    return{

        get(){

            track()

            //依赖收集数据

            console.log('我收集了数据');

            return value

        },

        set(val){

            clearTimeout(temit)

            temit=setTimeout(()=>{

                console.log('我发生了改变');

            //trigger派发更新

            trigger()

            value=val

            },data)

           

        }

    }

 })

}

使用方法 在 需要使用的页面 进行引入

比如

<template>

  <div class="about">

    <h1><input v-model="text"></h1>

    <div>

      <h1>{{ text }}</h1>

    </div>

   

  </div>

</template>

<script setup>

 import{ modelref } from '../strtaip/modlref'

  let text =modelref('')

  console.log(text);

</script>

我个人是做了一个翻斗的一个 版本 大家可以对我的代码删除翻斗