Vue 自定义ref

参考

学习Vue3 第六章（认识Ref全家桶）_ref_小满zs的博客-CSDN博客

使用案例

演示

代码

<script setup lang="ts">
import { customRef } from 'vue';

function MyRef<T>(value:T){
  let timer:any
  return customRef((track,trigger)=>{
    return{
      get(){
        track()
        return value
      },
      set(newValue){

        clearTimeout(timer)
        timer = setTimeout(()=>{
          console.log("出发修改事件,修改后的值为："+newValue)
          value = newValue
          timer = null
          trigger()
        },500)

      }
    }
  })
}

const obj = MyRef<string>("xyy")

let flag:boolean = true
const change = ()=>{
  if(flag){
    obj.value = "xyy123"
  }else{
    obj.value = "xyy"
  }
  flag =!flag
}

</script>

<template>
  {{ obj }}
  <button @click="change">change</button>
</template>