ref()
接受一個(gè)內(nèi)部值,返回一個(gè)響應(yīng)式的愕把、可更改的 ref 對象,此對象只有一個(gè)指向其內(nèi)部值的屬性 .value
弄匕。
function ref<T>(value: T): Ref<UnwrapRef<T>>
interface Ref<T> {
value: T
}
ref 對象是可更改的,也就是說你可以為 .value 賦予新的值沽瞭。它也是響應(yīng)式的迁匠,即所有對 .value 的操作都將被追蹤,并且寫操作會(huì)觸發(fā)與之相關(guān)的副作用驹溃。
示例
const count = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1
computed()
示例
創(chuàng)建一個(gè)只讀的計(jì)算屬性 ref:
const count = ref(1)
const plusOne = computed(() => count.value + 1)
console.log(plusOne.value) // 2
plusOne.value++ // 錯(cuò)誤
創(chuàng)建一個(gè)可寫的計(jì)算屬性 ref:
const count = ref(1)
const plusOne = computed({
get: () => count.value + 1,
set: (val) => {
count.value = val - 1
}
})
plusOne.value = 1
console.log(count.value) // 0
reactive()
返回一個(gè)對象的響應(yīng)式代理城丧。
-
響應(yīng)式轉(zhuǎn)換是“深層”的:它會(huì)影響到所有嵌套的屬性。一個(gè)響應(yīng)式對象也將深層地解包任何 ref 屬性豌鹤,同時(shí)保持響應(yīng)性亡哄。
值得注意的是,當(dāng)訪問到某個(gè)響應(yīng)式數(shù)組或
Map
這樣的原生集合類型中的 ref 元素時(shí)布疙,不會(huì)執(zhí)行 ref 的解包蚊惯。若要避免深層響應(yīng)式轉(zhuǎn)換,只想保留對這個(gè)對象頂層次訪問的響應(yīng)性灵临,請使用 shallowReactive() 作替代截型。
返回的對象以及其中嵌套的對象都會(huì)通過 ES Proxy 包裹,因此不等于源對象儒溉,建議只使用響應(yīng)式代理宦焦,避免使用原始對象。
示例
創(chuàng)建一個(gè)響應(yīng)式對象:
const obj = reactive({ count: 0 })
obj.count++
ref 的解包:
const count = ref(1)
const obj = reactive({ count })
// ref 會(huì)被解包
console.log(obj.count === count.value) // true
// 會(huì)更新 `obj.count`
count.value++
console.log(count.value) // 2
console.log(obj.count) // 2
// 也會(huì)更新 `count` ref
obj.count++
console.log(obj.count) // 3
console.log(count.value) // 3
注意當(dāng)訪問到某個(gè)響應(yīng)式數(shù)組或 Map
這樣的原生集合類型中的 ref 元素時(shí),不會(huì)執(zhí)行 ref 的解包:
const books = reactive([ref('Vue 3 Guide')])
// 這里需要 .value
console.log(books[0].value)
const map = reactive(new Map([['count', ref(0)]]))
// 這里需要 .value
console.log(map.get('count').value)
readonly()
接受一個(gè)對象 (不論是響應(yīng)式還是普通的) 或是一個(gè) ref波闹,返回一個(gè)原值的只讀代理酝豪。
只讀代理是深層的:對任何嵌套屬性的訪問都將是只讀的。它的 ref 解包行為與 reactive() 相同精堕,但解包得到的值是只讀的寓调。
watchEffect()
立即運(yùn)行一個(gè)函數(shù),同時(shí)響應(yīng)式地追蹤其依賴锄码,并在依賴更改時(shí)重新執(zhí)行。
第一個(gè)參數(shù)就是要運(yùn)行的副作用函數(shù)晌涕。這個(gè)副作用函數(shù)的參數(shù)也是一個(gè)函數(shù)滋捶,用來注冊清理回調(diào)。清理回調(diào)會(huì)在該副作用下一次執(zhí)行前被調(diào)用余黎,可以用來清理無效的副作用重窟,例如等待中的異步請求 (參見下面的示例)。
第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)惧财,可以用來調(diào)整副作用的刷新時(shí)機(jī)或調(diào)試副作用的依賴巡扇。
默認(rèn)情況下,偵聽器將在組件渲染之前執(zhí)行垮衷。設(shè)置 flush: 'post'
將會(huì)使偵聽器延遲到組件渲染之后再執(zhí)行厅翔。詳見回調(diào)的觸發(fā)時(shí)機(jī)。在某些特殊情況下 (例如要使緩存失效)搀突,可能有必要在響應(yīng)式依賴發(fā)生改變時(shí)立即觸發(fā)偵聽器刀闷。這可以通過設(shè)置 flush: 'sync'
來實(shí)現(xiàn)。然而仰迁,該設(shè)置應(yīng)謹(jǐn)慎使用甸昏,因?yàn)槿绻卸鄠€(gè)屬性同時(shí)更新,這將導(dǎo)致一些性能和數(shù)據(jù)一致性的問題徐许。
返回值是一個(gè)用來停止該副作用的函數(shù)施蜜。
watch()
偵聽一個(gè)或多個(gè)響應(yīng)式數(shù)據(jù)源,并在數(shù)據(jù)源變化時(shí)調(diào)用所給的回調(diào)函數(shù)雌隅。