一加Ace2 Pro官宣：普及16G內(nèi)存 引領(lǐng)24G
一加官方今天繼續(xù)為本月發(fā)布的新機(jī)一加Ace2 Pro帶來(lái)預(yù)熱，公布了內(nèi)存方面的信息。“淘汰 8GB ，12GB 起步，16GB 普及，24GB 引領(lǐng)，還有呢？#一加Ace2Pro#，2023 年 8 月，敬請(qǐng)期待。”同時(shí)
大家好，這里是大家的林語(yǔ)冰。
響應(yīng)式 API 賦予了組合式 API 一大坨可能性的同時(shí)，代碼精簡(jiǎn)。雖然但是，我們應(yīng)該意識(shí)到響應(yīng)性的某些陷阱，比如丟失響應(yīng)性。
在本文中，我們將學(xué)習(xí)如何正確解構(gòu) Vue 組件的 props，使得 props 不會(huì)丟失響應(yīng)性。
編譯器宏 defineProps() 可以輔助讀寫提供給 <script setup> 中的組件的 props：
圖片
上述示例中，props 是一個(gè)響應(yīng)式對(duì)象，包含了提供給組件的 props。如果組件 props 變化了，props 響應(yīng)式對(duì)象也會(huì)隨之變化。
讀寫 props 對(duì)象時(shí)，我們要做的第一件事可能是，解構(gòu) props 對(duì)象，然后讀寫各個(gè)屬性。但當(dāng)我學(xué)習(xí) Vue 組合式 API 時(shí)，令我大吃一驚的是，解構(gòu)的 props 丟失了響應(yīng)性！
讓我們來(lái)看一個(gè)例子。下述組件 <EvenOdd :count="5"> 接受 count 屬性作為數(shù)字，并顯示一條消息，無(wú)論 count 是偶數(shù)還是奇數(shù)。
在解構(gòu) props 對(duì)象 const { count } = defineProps() 之后，訪問該 count 屬性：
圖片
單擊幾次增加按鈕。您會(huì)注意到，盡管 count 屬性不斷累加，但 "The number is even" 消息始終保持不變。
當(dāng)解構(gòu) props 對(duì)象 const { count } = defineProps() 時(shí)，響應(yīng)性就會(huì)丟失。
響應(yīng)性之所以會(huì)丟失，是因?yàn)樵诮鈽?gòu)時(shí) count 變異為具有原始值的變量（一個(gè)平平無(wú)奇的數(shù)字罷了）。但 Vue 的響應(yīng)性不能直接作用于原始值：Vue 必須訴諸 ref 或響應(yīng)式對(duì)象。
粉絲請(qǐng)注意，在 Vue 中將原始值直接賦值給變量時(shí)要小心：此乃丟失響應(yīng)性的前提。
第一個(gè)顯而易見的解決方案是，不要解構(gòu) props 對(duì)象，并使用屬性讀寫器直接讀寫 props： props.count。
圖片
上述示例中，讀寫 computed() 內(nèi)的 props.count 可以在 props.count 變更時(shí)保留響應(yīng)性。props 對(duì)象是響應(yīng)式的，對(duì)其進(jìn)行任何變更都會(huì)被正確追蹤。
這種方案的短板是，我們必須始終使用屬性讀寫器（比如 props.count）來(lái)讀寫 <script setup 中的 prop。
如果您閱讀至此，我敢打賭您是解構(gòu)賦值的忠實(shí)粉絲，并且沒有它就活不下去。
問題不大，那么您可以有意識(shí)地將 props 對(duì)象的每個(gè)屬性轉(zhuǎn)換為 ref，來(lái)保留解構(gòu) props 的響應(yīng)性。Vue 提供了一個(gè)特殊的輔助函數(shù) toRefs(reactiveObject) 來(lái)精準(zhǔn)完成此操作。
其工作機(jī)制如下：
圖片
toRefs(props) 返回一個(gè)對(duì)象，其中每個(gè)屬性都是對(duì)相應(yīng) prop 的 ref。
現(xiàn)在解構(gòu) const { count } = toRefs(props) 是安全的，因?yàn)?nbsp;count 是基于 count 屬性的 ref。現(xiàn)在，每次 count 屬性變更時(shí)，count 的 ref 都會(huì)響應(yīng)屬性更改。
將 count 作為 ref，在 computed() 內(nèi)，我們必須使用 count.value 讀寫 prop 的值（因?yàn)?nbsp;count.value 是我們讀寫 ref 的值的方式）。
我發(fā)現(xiàn)此方案可以方便地將 prop ref 作為參數(shù)傳遞給組合式函數(shù)：比如 useMyComposable(count)，并且不會(huì)丟失響應(yīng)性。
否則，我會(huì)堅(jiān)持之前的方案，直接使用 props 對(duì)象讀寫 prop。
粉絲請(qǐng)注意，通過應(yīng)用解構(gòu) const { propA, propB } = defineProps()，我們會(huì)丟失 props 的響應(yīng)性。
解決響應(yīng)性丟失的方案主要有兩種：
不解構(gòu) props，而是訴諸屬性讀寫器直接讀寫 props：比如 props.xxx/props.cat。
有意識(shí)地使用 props 作為 refs 的對(duì)象：const { propA, propB } = toRefs(props)。這保留了解構(gòu)后的響應(yīng)性。然后我們可以將屬性作為獨(dú)立 ref 讀寫，比如 propsA.value/propB.value 等。
本文鏈接：http://www.www897cc.com/showinfo-26-60978-0.html訴諸 Vue 組合式 API 解構(gòu) Props
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)