vue3中自定义Ref

使用自定义 ref 实现一个输入框的和数据展示的防抖效果

重点：组合式API customRef、track、 trigger

<template>
    <div>
        <input type="text" v-model="keyword">
        <h2>{{ keyword }}</h2>
    </div>
</template>

<script>
import { customRef } from 'vue'
export default {
    setup() {
        // 自定义ref
        function myRef(value, delay) {
            let timer
            return customRef((track, trigger) => {
                return {
                    get() {
                        console.log('有人访问了这个属性');
                        // 通知vue追踪value的变化
                        track()
                        return value
                    },
                    set(newValue) {
                        console.log('有人修改了这个属性');
                        // 输入框防抖
                        clearTimeout(timer)
                        timer = setTimeout(() => {
                            value = newValue
                            // 通知vue重新解析模板
                            trigger()
                        }, delay)
                        
                    }
                }
            })
            
        }

        let keyword = myRef('hello', 500)

        return {
            keyword
        }
    }
}
</script>