Svelte{#each}塊完整指南列表遍歷、鍵控更新、解構(gòu)與空態(tài)渲染【免費下載鏈接】svelteweb development for the rest of us項目地址: https://gitcode.com/GitHub_Trending/sv/svelte本篇指南基于 Svelte 官方文檔中{#each ...}塊的模板語法說明展開覆蓋基本遍歷、索引訪問、帶 key 的鍵控列表、解構(gòu)/Rest 模式、無項渲染重復(fù) N 次與{:else}空態(tài)六大核心用法并結(jié)合 Svelte 倉庫源碼剖析 each 塊從編譯到運行時協(xié)調(diào)diff的實現(xiàn)鏈路。讀完本文你既能直接復(fù)制可運行的列表寫法也能理解 key 為何能讓列表智能移動而非整段重建以及編譯器為 each 塊生成的底層代碼形態(tài)?；菊Z法與適用的集合類型each 塊的基本形式{#each expression as name}...{/each}帶索引的形式{#each expression as name, index}...{/each}被遍歷的值可以是以下幾類數(shù)組array數(shù)組類對象array-like object即任何帶有l(wèi)ength屬性的對象可迭代對象iterable如Map和Set。從實現(xiàn)上可以印證這一點編譯器內(nèi)部會將這些值統(tǒng)一轉(zhuǎn)換為數(shù)組文檔說明內(nèi)部使用Array.from完成轉(zhuǎn)換。在倉庫中服務(wù)端運行時也確實提供了這樣的歸一化工具 ensure_array_like服務(wù)端編譯出的 each 塊會調(diào)用$.ensure_array_like(collection)對表達式求值并歸一化見 服務(wù)端 EachBlock 轉(zhuǎn)換器。一個典型的購物清單示例h1Shopping list/h1 ul {#each items as item} li{item.name} x {item.qty}/li {/each} /ul空值語義如果表達式求值為null或undefinedeach 塊會按空數(shù)組處理——也就是說不會渲染任何列表項同時會觸發(fā){:else}分支如果存在這與直接傳[]的行為一致。帶索引遍歷each 塊可以指定一個索引變量語義等價于array.map(...)回調(diào)的第二個參數(shù){#each items as item, i} li{i 1}: {item.name} x {item.qty}/li {/each}鍵控 each 塊Keyed each blocks語法{#each expression as name (key)}...{/each}{#each expression as name, index (key)}...{/each}當(dāng)提供 key 表達式——它必須能唯一標(biāo)識列表中的每一項——Svelte 會在數(shù)據(jù)變化時利用 key 智能地更新列表插入、移動、刪除對應(yīng)的項目而不是在末尾增刪項目、再更新中間的狀態(tài)。這正是文檔強調(diào)的核心收益列表的視覺狀態(tài)焦點、輸入框內(nèi)容、組件內(nèi)部狀態(tài)等跟隨 key 對應(yīng)的條目移動而不是留在原來的 DOM 位置上。官方建議key 可以是任意對象但推薦使用字符串和數(shù)字因為這樣即使條目對象本身被替換對象引用變化身份identity也能保持不變。{#each items as item (item.id)} li{item.name} x {item.qty}/li {/each} !-- 或者附帶索引 -- {#each items as item, i (item.id)} li{i 1}: {item.name} x {item.qty}/li {/each}解構(gòu)與 Rest 模式each 塊中可自由使用解構(gòu)destructuring和 rest 模式{#each items as { id, name, qty }, i (id)} li{i 1}: {name} x {qty}/li {/each} {#each objects as { id, ...rest }} lispan{id}/spanMyComponent {...rest} //li {/each} {#each items as [id, ...rest]} lispan{id}/spanMyComponent values{rest} //li {/each}從客戶端編譯器的實現(xiàn)看當(dāng)上下文是標(biāo)識符普通變量時走一條簡單路徑而當(dāng)上下文是對象/數(shù)組解構(gòu)模式時客戶端 EachBlock 轉(zhuǎn)換器 會通過extract_paths展開解構(gòu)路徑為每個綁定項生成獨立的派生信號$.derived/$.derived_safe_equal帶默認值的解構(gòu)項會走derived_safe_equal確保默認值只求值一次并為每一項注冊read/assign/mutate行為——這意味著你可以直接在模板里改寫解構(gòu)出來的字段賦值會寫回到原集合對應(yīng)位置。無項的 each 塊重復(fù)渲染 N 次如果你只是想把某段內(nèi)容渲染固定n次可以省略as部分{#each expression}...{/each}{#each expression, index}...{/each}官方文檔給出的完整示例——用兩層無項 each 渲染一個 8x8 國際象棋棋盤div classchess-board {#each { length: 8 }, rank} {#each { length: 8 }, file} div class:black{(rank file) % 2 1}/div {/each} {/each} /div style .chess-board { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); border: 1px solid black; aspect-ratio: 1; .black { background: black; } } /style這里外層{#each { length: 8 }, rank}利用了數(shù)組類對象的能力一個只有l(wèi)ength屬性的普通對象即可充當(dāng)可遍歷集合第二個參數(shù)rank拿到的是 0 到 7 的索引配合奇偶判斷(rank file) % 2 1著色黑格。{:else} 空態(tài)分支{#each expression as name}...{:else}...{/each}each 塊可以帶{:else}子句當(dāng)列表為空含null/undefined的情形時渲染該分支。{#each todos as todo} p{todo.text}/p {:else} pNo tasks today!/p {/each}這一點在服務(wù)端編譯結(jié)果中體現(xiàn)得很直白服務(wù)端 EachBlock 轉(zhuǎn)換器 在有 fallback 時會生成if (array.length ! 0) { ...for 循環(huán)... } else { fallback }的結(jié)構(gòu)沒有 fallback 時則直接輸出一個按length遍歷的 for 循環(huán)// 服務(wù)端編譯產(chǎn)物形態(tài)簡化自源碼 const each_array $.ensure_array_like(expression); for (let i 0, $$length each_array.length; i $$length; i) { let item each_array[i]; // ...body }源碼縱深客戶端 each 塊的編譯與運行時編譯階段為每個 each 塊計算 flags客戶端 EachBlock 轉(zhuǎn)換器 是理解客戶端行為的入口。它會為每個 each 塊計算一組位標(biāo)志定義在 constants 中EACH_INDEX_REACTIVE鍵控 each 塊帶索引時設(shè)置。因為條目會移動索引本身也變成了響應(yīng)式的讀取索引需要經(jīng)過信號取值EACH_ITEM_REACTIVE當(dāng)列表表達式引用了外部狀態(tài)如 store 訂閱、跨作用域依賴時設(shè)置條目需要包在信號里以便追蹤EACH_ITEM_IMMUTABLErunes 模式下且無 store 時設(shè)置EACH_IS_ANIMATED當(dāng)鍵控 each 的子元素帶有animate:指令時設(shè)置——注釋里說明由于animate:只能出現(xiàn)在鍵控 each 塊的唯一子元素上所以編譯器能在編譯期確定該 each 塊是否被動畫化從而在協(xié)調(diào)前后測量動畫元素的位置EACH_IS_CONTROLLED當(dāng)該 each 塊是父元素的唯一子節(jié)點controlled 形態(tài)時設(shè)置允許運行時走更快的清理路徑。關(guān)于 key編譯器會生成一個 key 函數(shù)無 key 時默認使用 index 函數(shù)即直接用下標(biāo)作為 key有 key 時則編譯為pattern keyExpression形式的箭頭函數(shù)見 客戶端 EachBlock 轉(zhuǎn)換器 L295-L307。最終每個 each 塊被編譯為一次$.each(flags, thunk, key_function, render_fn, fallback?)調(diào)用。另外值得注意的細節(jié)如果表達式依賴的是 legacy store 訂閱編譯器會在條目變更時生成$.invalidate_store調(diào)用來反向刷新 store見 客戶端 EachBlock 轉(zhuǎn)換器 L104-L111。運行階段協(xié)調(diào)、暫停與快速路徑運行時實現(xiàn)位于 each.js。它的核心機制包括條目即 effect每個列表項對應(yīng)一個獨立的 effect子塊列表更新時按 key 比對新增項創(chuàng)建 effect、刪除項銷毀 effect、移動項則重排pause_effects批量暫停刪除多個條目時each.js L66 起編譯器/運行時會先把所有待刪 effect 暫停pause等待其中若有 out 過渡動畫完成后再統(tǒng)一銷毀——這就是列表刪除時過渡動畫能正常播放的底層機制controlled 快速路徑當(dāng) each 塊是父元素的唯一子節(jié)點EACH_IS_CONTROLLED、全部條目被刪除且沒有過渡時可以直接清空父元素內(nèi)容并重置錨點省去逐個銷毀的開銷壓力測試背書文件頭部注釋明確要求對該文件的任何實質(zhì)改動都必須通過 each 塊壓力測試驗證該測試同時存在于倉庫中的 each-stress-test覆蓋了大規(guī)模列表增刪改移的極端場景。編譯產(chǎn)物的對照驗證如果你想在倉庫內(nèi)驗證文檔語法 → 實際生成代碼的對應(yīng)關(guān)系可以直接查看服務(wù)端轉(zhuǎn)換server/visitors/EachBlock.js生成ensure_array_like for 循環(huán) else 分支客戶端轉(zhuǎn)換client/visitors/EachBlock.js生成$.each調(diào)用與 key 函數(shù);相關(guān)行為測試runtime-runes 測試樣本集 中每個含.svelte與.js斷言的目錄都是一條可復(fù)現(xiàn)的回歸用例手動壓測each-stress-test。實踐建議小結(jié)能取穩(wěn)定 id 就用 key{#each items as item (item.id)}讓狀態(tài)跟隨數(shù)據(jù)條目移動僅當(dāng)列表內(nèi)容絕對靜態(tài)或純展示時才省略 key此時編譯器默認按下標(biāo)做 keykey 優(yōu)先選字符串/數(shù)字條目對象整體被替換時身份仍可保持解構(gòu)要配 key{#each items as { id, name, qty }, i (id)}是既省事又不丟狀態(tài)的推薦組合用無項 each 渲染固定重復(fù)內(nèi)容{#each { length: n }, i}是生成 N 份占位棋盤、星評、表格行的慣用寫法列表可能為空就寫{:else}編譯器會把它編譯成空態(tài)分支語義清晰且零成本。適用前提說明以上行為描述基于當(dāng)前倉庫的 Svelte 5runes 時代實現(xiàn)legacy 模式非 runes下對列表項的重賦值會觸發(fā)invalidate式的響應(yīng)式刷新客戶端轉(zhuǎn)換器中有對應(yīng)的TODO 6.0注釋表明該行為是 legacy 模式專屬具體差異可參考倉庫中的 legacy 測試樣本 與遷移指南 v5-migration-guide?！久赓M下載鏈接】svelteweb development for the rest of us項目地址: https://gitcode.com/GitHub_Trending/sv/svelte創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考