You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1019 B
45 lines
1019 B
2 years ago
|
<template>
|
||
|
|
<input type="text" v-model="keyWord">
|
||
|
|
<h3>{{keyWord}}</h3>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {ref, customRef} from "vue";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'App',
|
||
|
|
setup() {
|
||
|
|
// 自定义ref
|
||
|
|
function myRef(value) {
|
||
|
|
let timer
|
||
|
|
// console.log('---myRef---', value)
|
||
|
|
return customRef((track,trigger)=>{
|
||
|
|
return {
|
||
|
|
get() {
|
||
|
|
console.log(`有人从myRef这个容器中读取数据了，我把${value}给他了`)
|
||
|
|
track() // 通知vue追踪数据变化
|
||
|
|
return value
|
||
|
|
},
|
||
|
|
set(newValue) {
|
||
|
|
console.log(`有人从myRef这个容器中数据改为了：${newValue}`)
|
||
|
|
clearTimeout(timer)
|
||
|
|
timer = setTimeout(()=>{
|
||
|
|
value = newValue
|
||
|
|
trigger() //通知vue去重新解析模板
|
||
|
|
}, 500)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
// let keyWord = ref('hello') // 使用默认的ref
|
||
|
|
let keyWord = myRef('hello')
|
||
|
|
|
||
|
|
return {
|
||
|
|
keyWord,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|