vue3 customRef

customRef

可以用来创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收 track 和 trigger 函数作为参数，并且应该返回一个带有 get 和 set 的对象。
其实大致意思就是，我们可以按照自己的业务需求去自定义封装一个 ref 对象，在其内部可以使用 get 和 set去跟踪或更新数据，有点计算属性内味了哈~

应用场景

1. 用来实现防抖函数

<template>
  <input
    v-model="text"
  >
  {{text}}
</template>

<script setup>
import { customRef } from 'vue'
function Myref(value, delay) {
 let timer = null
    return customRef((track,trigger)=>{
        return {
            get(){
                track()  //时刻追踪数据
                return value
            },
            set(newValue){
                if(timer){
                    clearTimeout(timer)
                }
                timer = setTimeout(()=>{
                    value = newValue
                    trigger()   //重新解析vue模板
                },delay?delay:500)
            }
        }
        
    })
}

const text = Myref('自定义ref',200)
</script>