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后