1.ref
接受一個參數(shù)值并返回一個響應(yīng)式且可改變的 ref 對象。 ref 對象擁有一個指向內(nèi)部值的單一屬性 .value property ，指向內(nèi)部值。
例：此時，頁面上的 str1 也跟著變化
<template>
<div>
<button @click="handleClick">點擊</button>
</div>
<br />
<div>str1:{{ str1 }}</div>
<br />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const str1 = ref('123')
const handleClick = () => {
str1.value = '456'
console.log(str1.value) // "456"
}
</script>使用 ref 獲取 dom 元素：
<template>
<div ref="divRef">
<button @click="handleClick">點擊</button>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
const divRef = ref(null) // 注意：此處的變量名必須和標(biāo)簽上的屬性名一致
onMounted(() => {
console.log(divRef.value) // 輸出 <div></div>
})
const handleClick = () => {}
</script>?結(jié)果：
2.isRef
檢查一個對象是否為?
ref?包裝過的對象。
<template>
<div>
<button @click="handleClick">點擊</button>
</div>
<br />
<div>str1:{{ str1 }}</div>
<br />
</template>
<script setup lang="ts">
import { ref, isRef } from 'vue'
const str1 = ref('123')
const handleClick = () => {
str1.value = '456'
console.log(str1.value) // "456"
console.log(isRef(str1)) // true
}
</script>3.shallowRef
創(chuàng)建一個跟蹤自身 .value 變化的 ref ，但不會使其值也變成響應(yīng)式的。
<template>
<div>
<button @click="handleClick">點擊</button>
</div>
<br />
<div>str1:{{ str1 }}</div>
<br />
<div>str2:{{ str2 }}</div>
<br />
<div>str3:{{ obj.name }}</div>
</template>
<script setup lang="ts">
import { ref, isRef, shallowRef } from 'vue'
const str1 = ref('123')
const str2 = shallowRef('123')
const obj = shallowRef({ name: '張三' })
const handleClick = () => {
obj.value.name = '李四'
console.log(obj.value) // {name: '李四'}
// str2.value = '456'
}
</script>運行結(jié)果：
頁面展示：
需要注意的是：應(yīng)用 shallowRef 定義的基本值類型的數(shù)據(jù)，是具有響應(yīng)式效果的，而引用類型不具有響應(yīng)式效果。在 Vue3 中 shallowRef 函數(shù)源碼中， value 具有響應(yīng)式，而 value 中的屬性不具有響應(yīng)式。與 ref 函數(shù)不同的是， shallowRef 函數(shù)不會將其值轉(zhuǎn)化為響應(yīng)式對象，而是直接將其作為普通的對象或數(shù)組來處理。這意味著，當(dāng)修改 shallowRef 對象的屬性或數(shù)組的元素時，? ?Vue3 將不會追蹤這些變化。?
注：由于 ref 和 triggerRef 在使用時都會調(diào)用 triggerRefValue ，而?triggerRefValue 會調(diào)用 triggerEffects?更新依賴，所以直接將?shallowRef 的依賴一起更新了。因此使用?shallowRef 定義的數(shù)據(jù)不應(yīng)與使用 ref 定義的數(shù)據(jù)一起使用；應(yīng)用 shallowRef 定義為?值類型的常量?被修改時與定義為?引用類型的常量?也不應(yīng)一起使用！?。?/strong>
<template>
<div>
<button @click="handleClick">點擊</button>
</div>
<br />
<div>str1:{{ str1 }}</div>
<br />
<div>str2:{{ str2 }}</div>
<br />
<div>str3:{{ obj.name }}</div>
</template>
<script setup lang="ts">
import { ref, shallowRef, triggerRef, customRef, onMounted } from 'vue'
const str1 = ref('123')
const str2 = shallowRef('123')
const obj = shallowRef({ name: '張三' })
const handleClick = () => {
obj.value.name = '李四'
console.log(obj.value)
str2.value = '456'
}
</script>點擊后結(jié)果：
點擊事件部分代碼改為：
const handleClick = () => {
str1.value = '456'
console.log(str1.value)
obj.value.name = '李四'
console.log(obj.value)
}點擊后結(jié)果：
4.triggerRef
強制更新頁面 dom ，使其具有響應(yīng)式。
<template>
<div >
<button @click="handleClick">點擊</button>
</div>
<div>str3:{{ obj.name }}</div>
</template>
<script setup lang="ts">
import { ref, shallowRef, triggerRef } from 'vue'
const obj = shallowRef({ name: '張三' })
const handleClick = () => {
obj.value.name = '李四'
triggerRef(obj)
console.log(obj.value)
}
</script>點擊后結(jié)果：
5.customRef
在 Vue3 中，提供了一個 customRef?函數(shù)，用于創(chuàng)建一個自定義的、可響應(yīng)的引用對象。與 ref 和?shallowRef 不同的是， customRef?可以自定義 get 和 set 方法的實現(xiàn)邏輯，從而實現(xiàn)更加靈活的響應(yīng)式行為。
使用 customRef 函數(shù)創(chuàng)建的引用對象與 ref 對象類似，也具有 value 屬性，當(dāng)讀取這個屬性時，會觸發(fā) get 方法的執(zhí)行；當(dāng)修改這個屬性時，會觸發(fā) set 方法的執(zhí)行，并且會觸發(fā)相應(yīng)的依賴更新。與 ref 對象不同的是，?customRef 函數(shù)本身并不會對傳入的初始值進行處理，而是將其直接作為 get 方法的返回值，需要自己手動處理。
<template>
<div>
<button @click="handleClick">點擊</button>
</div>
<div>name:{{ name }}</div>
</template>
<script setup lang="ts">
import { customRef} from 'vue'
function myRef<T = any>(value: T) {
let timer: any
return customRef((track, trigger) => {
return {
get() {
track()
return value
},
set(newVal) {
clearTimeout(timer)
timer = setTimeout(() => {
console.log('觸發(fā)了set')
value = newVal
trigger()
}, 500)
}
}
})
}
const name = myRef<string>('張三')
const handleClick = () => {
name.value = '李四'
}
</script>?點擊500ms后結(jié)果：文章來源：http://www.zghlxwxcb.cn/news/detail-861523.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-861523.html
到了這里，關(guān)于vue3中的ref、isRef、shallowRef、triggerRef和customRef的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
