作用:创建一个自定义的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>