vue3学习--customeRef使用

学习了vue3的customRef，在这里写个简单的demo来，实现输入框防抖 简单明了通俗易懂！
ref就相当于自动挡，内部函数会自动处理把数据转换为响应式数据
customRef相当于手动挡，可以在内部写更多的逻辑，可玩性更高

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

import { customRef } from 'vue'

export default {
    name: 'App',
    setup() {
        let keyword = myRef(0) // 使用customRef自定义函数
		
        function myRef(value) {  // vuale接受的值
            let timer;
			// 通过customRef去实现自定义
            return customRef((track, trigger) => {
                return {
                    get() {
                        track()   // 告诉vue这个value值是需要被【追踪】
                        return value
                    },
                    set(newValue) {
                        clearTimeout(timer)
                        timer = setTimeout(() => {
                            value = newValue
                            trigger()  // 告诉vue去更新界面
                        }, 200)
                    }
                }
            })
        }

        return {
            keyword
        }
    }
}