第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Svelte 對每個塊的鍵控的進(jìn)一步解釋

Svelte 對每個塊的鍵控的進(jìn)一步解釋

慕的地6264312 2022-10-13 10:42:43
我不明白教程中的這一部分:https ://svelte.dev/tutorial/keyed-each-blocks 。我可以看到things數(shù)組已正確更新,因此正確thing.color傳遞了預(yù)期。但是通過第一句“默認(rèn)情況下,當(dāng)你修改一個each塊的值時,它會在塊的末尾添加和刪除項(xiàng)目,并更新任何已更改的值?!?,似乎是說 Svelte 無論如何都會刪除單擊按鈕時的最后一個塊,則其余 4 個塊將面向切片things,即[{ id: 2, color: '#6a00a8' },  { id: 3, color: '#b12a90' },  { id: 4, color: '#e16462' },  { id: 5, color: '#fca636' }]并且由于initial被聲明為const,它不能再被更新,所以thing.id1--4 的顏色仍然存在。這是一個正確的理解嗎?each假設(shè)塊是可交換的,這是默認(rèn)行為嗎?然后它說使用thing.id作為each塊的密鑰將解決問題,即{#each things as thing (thing.id)}. 我不明白這些鍵是如何在each塊中使用的,如果thing.id沒有提供默認(rèn)鍵是什么。以及為什么默認(rèn)密鑰(如果有一個,或者默認(rèn)的無密鑰)在提供時thing.id不起作用。感謝您的澄清。
查看完整描述

4 回答

?
暮色呼如

TA貢獻(xiàn)1853條經(jīng)驗(yàn) 獲得超9個贊

我相信當(dāng)您不提供密鑰時,它會使用類似項(xiàng)目的索引作為默認(rèn)值。這可以通過使用來驗(yàn)證

{#each things as thing, index (index)}
    <Thing current={thing.color}/>
    {/each}

這給出了與一開始不使用密鑰相同的行為。


讓我們稱為as<Thing>渲染的那個,依此類推。id: 1Thing1

沒有提供鑰匙

當(dāng)我們從列表中刪除第一個項(xiàng)目時,它Thing1仍然保持不變,因?yàn)榕c之關(guān)聯(lián)的鍵(在本例中為索引)保持不變。之前發(fā)送到的道具Thing2現(xiàn)在正在發(fā)送到Thing1。這發(fā)生在整個鏈條上。但是現(xiàn)在少了一個元素,Thing5從 DOM 中刪除。

刪除第一項(xiàng)時,Thing與鍵“0”( )關(guān)聯(lián)的組件實(shí)例不會被破壞。Thing1發(fā)生這種情況是因?yàn)殒I保持不變(新數(shù)組在索引 0 處也有一個項(xiàng)目)。只有被發(fā)送到的道具Thing1發(fā)生了變化,使initial變量與原始項(xiàng)目的顏色保持一致id: 1。

提供 (thing.id) 密鑰

當(dāng)id: 1刪除帶有的事物時,不存在任何Thing映射到“1”的實(shí)例。因此,Thing1從 DOM 中刪除。


另一種理解方式是,當(dāng)你給出一個鍵時,你實(shí)際上是在告訴 Svelte 將每個渲染塊映射到那個鍵。當(dāng)該鍵不再存在時,擺脫該塊并將其從 DOM 中刪除。但是如果密鑰保持不變并且道具發(fā)生變化,請更新道具而不是重新創(chuàng)建塊。

當(dāng)您不指定鍵時,它使用列表的索引作為鍵。因此,如果您從列表中刪除項(xiàng)目,它不會重新創(chuàng)建或重新排序塊,它只會更新道具。


查看完整回答
反對 回復(fù) 2022-10-13
?
慕虎7371278

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超4個贊

API 文檔是這樣解釋的:


如果提供了一個鍵表達(dá)式——它必須唯一地標(biāo)識每個列表項(xiàng)——Svelte 將在數(shù)據(jù)更改時使用它來區(qū)分列表,而不是在最后添加或刪除項(xiàng)目。鍵可以是任何對象,但建議使用字符串和數(shù)字,因?yàn)樗鼈冊试S標(biāo)識在對象本身更改時保持不變。


{#each items as item (item.id)}

  <li>{item.name} x {item.qty}</li>

{/each}


<!-- or with additional index value -->

{#each items as item, i (item.id)}

  <li>{i + 1}: {item.name} x {item.qty}</li>

{/each}

我發(fā)現(xiàn)這在教程中也缺乏適當(dāng)?shù)慕忉?。但是,我認(rèn)為文檔更清晰——可以為每個函數(shù)提供一個唯一鍵,以便唯一標(biāo)識每次迭代。因此,當(dāng)從提供給每個函數(shù)的數(shù)據(jù)中刪除特定元素時,可以識別和刪除正確的迭代。


查看完整回答
反對 回復(fù) 2022-10-13
?
jeck貓

TA貢獻(xiàn)1909條經(jīng)驗(yàn) 獲得超7個贊

我也在這個例子中苦苦掙扎,為什么圖標(biāo)沒有改變。我注意到初始化 ( const emoji = emojis[name]) 之后在組件中計(jì)算的值保持不變,但是如果我們使用響應(yīng)式聲明:$: emoji = emojis[name];值將被重新計(jì)算,并且此示例可以正常工作。



查看完整回答
反對 回復(fù) 2022-10-13
?
守著一只汪

TA貢獻(xiàn)1872條經(jīng)驗(yàn) 獲得超4個贊

有同樣的疑問,然后我意識到“它將在塊末尾添加和刪除項(xiàng)目”可能意味著這里可能適用于 DOM,因此即使您在 JavaScript 中刪除數(shù)組的第一項(xiàng),Svelte 總是會刪除最后一個DOM 節(jié)點(diǎn)。提供 key 后,DOM 和 JavaScript 都可以執(zhí)行相同的操作。



查看完整回答
反對 回復(fù) 2022-10-13
  • 4 回答
  • 0 關(guān)注
  • 180 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號