vue3-自定义customRef

作用：创建一个自定义的ref

案例：延迟显示的效果

说明：当在上方输入框中持续修改数据，直到数据修改完成一秒之后，下方显示数据

 

<template>
  <div>
    <input v-model="textVal" type="text" />
    <p>{{ textVal }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, customRef } from 'vue'
export default defineComponent({
    setup() {
        //自定义ref，名为myRef
        function myRef(value, t) {
            let timer
            return customRef((track, trigger) => {
                return {
                    get() {
                        console.log('读数据');
                        track()
                        return value
                    },
                    set(newValue) {
                        console.log('改数据');
                        clearTimeout(timer)
                        timer = setTimeout(() => {
                            value = newValue
                            trigger()
                        }, t)
                    }
                }
            })
        }
         // const textVal = ref('hello')  使用vue提供的ref
        const textVal = myRef('hello', 1000)
        return {
            route,
            textVal
        }
    }
})
</script>
 
<style>
</style>