vue2-vue3 響應(yīng)式 API:核心

摘自 | Vue.js (vuejs.org)

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ù)雌隅。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末翻默,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子澄步,更是在濱河造成了極大的恐慌冰蘑,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,122評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件村缸,死亡現(xiàn)場離奇詭異祠肥,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,070評論 3 395
  • 文/潘曉璐 我一進(jìn)店門仇箱,熙熙樓的掌柜王于貴愁眉苦臉地迎上來县恕,“玉大人,你說我怎么就攤上這事剂桥≈抑颍” “怎么了?”我有些...
    開封第一講書人閱讀 164,491評論 0 354
  • 文/不壞的土叔 我叫張陵权逗,是天一觀的道長美尸。 經(jīng)常有香客問我,道長斟薇,這世上最難降的妖魔是什么师坎? 我笑而不...
    開封第一講書人閱讀 58,636評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮堪滨,結(jié)果婚禮上胯陋,老公的妹妹穿的比我還像新娘。我一直安慰自己袱箱,他們只是感情好遏乔,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,676評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著发笔,像睡著了一般盟萨。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上了讨,一...
    開封第一講書人閱讀 51,541評論 1 305
  • 那天鸯旁,我揣著相機(jī)與錄音,去河邊找鬼量蕊。 笑死铺罢,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的残炮。 我是一名探鬼主播韭赘,決...
    沈念sama閱讀 40,292評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼势就!你這毒婦竟也來了泉瞻?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,211評論 0 276
  • 序言:老撾萬榮一對情侶失蹤苞冯,失蹤者是張志新(化名)和其女友劉穎袖牙,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體舅锄,經(jīng)...
    沈念sama閱讀 45,655評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡鞭达,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,846評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片畴蹭。...
    茶點(diǎn)故事閱讀 39,965評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡坦仍,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出叨襟,到底是詐尸還是另有隱情繁扎,我是刑警寧澤,帶...
    沈念sama閱讀 35,684評論 5 347
  • 正文 年R本政府宣布糊闽,位于F島的核電站梳玫,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏右犹。R本人自食惡果不足惜汽纠,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,295評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望傀履。 院中可真熱鬧,春花似錦莉炉、人聲如沸钓账。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,894評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽梆暮。三九已至,卻和暖如春绍昂,著一層夾襖步出監(jiān)牢的瞬間啦粹,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,012評論 1 269
  • 我被黑心中介騙來泰國打工窘游, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留唠椭,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,126評論 3 370
  • 正文 我出身青樓忍饰,卻偏偏與公主長得像贪嫂,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子艾蓝,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,914評論 2 355

推薦閱讀更多精彩內(nèi)容