Vue3 学习笔记 —— customRef

customRef

• 自定义ref，可以控制数据的追踪跟触发更新
• 测试代码：

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

<script lang="ts">

import {
      defineComponent, customRef} from 'vue';

function useDebounceRef (value:string, delay: number) {
     
  return customRef((track, trigger)=>{
     
    return {
     
      get () {
     
        track()		// get 时 进行跟踪
        return value
      },
      set (newValue:string) {
     
        setTimeout(()=>{
     
          value = newValue
          trigger()		// set 时 触发页面更新
        }, delay)
      }
    }
  })
}

export default defineComponent({
     
  name: 'Child',

  setup() {
     
    let state = useDebounceRef('abc', 500)
    return {
     
      state
    }
  }

});
</script>

• 测试截图：
• 延迟更新
  
• 1s后