ref全家桶包含(ref、isRef、toRef、toRefs、shallowRef、triggerRef、customRef)
一、ref()
接受一个内部值,返回一个响应式的、可更改的 ref 对象,此对象只有一个指向其内部值的属性 .value
!
<template>
<div>{{name}}</div>
<button @click="btn">按钮</button>
</template>
<script setup lang='ts'>
import { ref } from 'vue'
let name = '你好'
const btn=()=>{
name = '不好'
console.log(name) // 控制台显示不好,但是视图上无变化
}
</script>
<style scoped>
</style>
ref 写法
import { ref } from 'vue'
let name = ref('你好')
const btn=()=>{
name.value = '不好'
console.log(name)
}
二、isRef()
检查某个值是否为 ref。
import { ref, Ref,isRef } from 'vue'
let name: Ref<string | number> = ref("你好")
let notRef:number = 123
const btn = () => {
name.value = "change msg"
console.log(isRef(name)); //true
console.log(isRef(notRef)); //false
}
三、toRef()
基于响应式对象上的一个属性,创建一个对应的 ref。这样创建的 ref 与其源属性保持同步:改变源属性的值将更新 ref 的值,反之亦然。
import { reactive,toRef } from 'vue'
const name = reactive({
foo: 1,
bar: 2
})
const fooRef = toRef(name, 'foo') // 转化为响应式对象
const btn = () => {
fooRef.value++
console.log(fooRef.value)
}
四、toRefs()
可以帮我们批量创建ref对象主要是方便我们解构使用
import { reactive,toRefs } from 'vue'
const name = reactive({
foo: 1,
bar: 2
})
const stateAsRefs = toRefs(name) // 批量转化为响应式对象
const btn = () => {
const {foo,bar} = stateAsRefs
foo.value++
console.log(foo,bar)
}
五、shallowRef()
import { Ref,shallowRef } from 'vue'
type Obj = {
name: string
}
const name:Ref<Obj> = shallowRef({name:'你好'})
const btn = () => {
name.value.name='不好'
console.log(name.value) // 数据改变 但是视图不更新
}
shallowRef()写法处理
import { Ref,shallowRef } from 'vue'
type Obj = {
name: string
}
const name:Ref<Obj> = shallowRef({name:'你好'})
const btn = () => {
name.value={name:'不好'}
console.log(name.value) // 数据改变 视图更新
}
六、triggerRef()
强制更新页面DOM 这样也是可以改变值的
import { Ref,shallowRef,triggerRef } from 'vue'
type Obj = {
name: string
}
const name:Ref<Obj> = shallowRef({name:'你好'})
const btn = () => {
name.value.name='不好'
console.log(name.value) // 数据改变 视图不更新
triggerRef(name) //triggerRef 强制处理
console.log(name.value) // 数据改变 视图更新
}
七、customRef()
customRef() 预期接收一个工厂函数作为参数,这个工厂函数接受 track 和 trigger 两个函数作为参数,并返回一个带有 get 和 set 方法的对象
一般来说,track() 应该在 get() 方法中调用,而 trigger() 应该在 set() 中调用。然而事实上,你对何时调用、是否应该调用他们有完全的控制权。
customRef 是个工厂函数要求我们返回一个对象 并且实现 get 和 set 适合去做防抖之类的
<script setup lang='ts'>
import { customRef } from 'vue'
function myRef(value:any) {
let timer:any
return customRef((track,trigger)=>{
return {
get() {
track()
return value
},
set(newVal) {
clearTimeout(timer)
timer = setTimeout(()=>{
console.log('触发了set')
value=newVal
trigger()
},5000)
}
}
})
}
const name = myRef('你好吗')
const btn = () => {
name.value = '我很好'
console.log(name)
}
</script>