vue3-custom カスタム参照

役割: カスタム参照を作成する

事例：表示遅延の影響

注: データ変更が完了してから 1 秒後まで上部の入力ボックスでデータを変更し続けると、データは下に表示されます

 

<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>