ref
接收一个内部值并返回一个 响应式且可变的ref对象，此对象只有一个指向其内部值的属性 .value
<template>
<div>{{ count }}</div>
<button @click="add">操作</button>
</template>
<script setup>
import { ref } from 'vue'
let count = ref(1)
const add = () => {
count.value++
}
console.log(count)
</script>
isRef
检查某个值是否为 ref
<script setup>
import { ref, isRef } from 'vue'
let count = ref(1)
let a = 3
console.log(isRef(count))
console.log(isRef(a))
</script>
shallowRef
创建一个跟踪自身.value变化的ref,但不会使其值也变成响应式， ref和shallowRef是不能一起写的，不然会影响shallowRef， 造成视图的更新，为啥会更新呢，就是下面的tiggerRef
<script setup>
import { shallowRef, ref, triggerRef } from 'vue'
let count = ref(1)
let msg = shallowRef({
age: 18,
})
const add = () => {
count.value++ // 触发响应式 导致showRef的深度响应式
msg.value.age++ // 正常是不会触发视图更新的，
console.log(msg)
}
</script>
tiggerRef
强制更新页面Dom
<script setup>
import { shallowRef, ref, triggerRef } from 'vue'
let count = ref(1)
let msg = shallowRef({
age: 18,
})
const add = () => {
msg.value.age++
triggerRef(msg) // 触发响应式 导致showRef的深度响应式
console.log(msg)
}
</script>
customRef
自定义ref
<script setup>
import { ref, customRef } from 'vue'
// 自定义ref函数
const myRef = (value, delay = 1000) => {
return customRef((track, trigger) => {
let timer = null
return {
get() {
track()
return value
},
set(newValue) {
clearTimeout(timer)
timer = setTimeout(() => {
console.log('触发更新')
value = newValue
trigger()
}, delay)
},
}
})
}
let flag = myRef('yoga')
console.log(flag.value)
const add = () => {
flag.value = '林宥嘉'
}
</script>
