Svelte 5 中的“助手”变量

再见神奇 svelte 4 $：

在我最近发布 svelte 5 迁移的经验和注意事项之后，我想重点介绍从 svelte 4 迁移到 svelte 5 时的一些技巧和心态的变化。

svelte 4 使用“神奇的”$: 并让和完成所有繁重的工作以使代码具有反应性。我们还接受了变量重新分配，例如

而不是更新/改变变量的方法，如推送等

我很惊讶能够使用 svelte 5 重新学习好的旧 js 模式。

无需一直保持反应

而且我可能也被 svelte 4 中的 let 宠坏了，没有考虑反应性，如果需要的话它会被包含在内。 但并非所有变量都必须是反应性的。非反应性变量也可以在反应性甚至“传统变异代码”中更新。反应式变量的真正需要是当我们在 ui 中使用它时（当这个变量在 html/页面中呈现并且我们需要它稍后更新时）。

您可能会在 svelte 5 中遇到错误，例如无法分配给派生状态，在其自己的范围内引用的状态永远不会更新。您的意思是在闭包内引用它吗？或衍生_引用_selfn如果使用 svelte 4 编码风格，则派生值无法递归引用自身。

辅助变量的示例

看一下这个 svelte 4 风格的代码示例：

generate random value
value: {value}

							

								
								

									SuperCms在线订餐系统
									
模板采用响应式设计，自动适应手机，电脑及平板显示；满足单一店铺外卖需求。功能：1.菜单分类管理2.菜品管理：菜品增加，删除，修改3.订单管理4.友情链接管理5.数据库备份6.文章模块：如：促销活动，帮助中心7.单页模块：如：企业信息，关于我们更强大的功能在开发中……安装方法：上传到网站根目录，运行http://www.***.com/install 自动
								
								下载 
							
						
derivedarr: {derivedarr}

演示

我们有两个反应变量，svelte 4 自动解决更新问题。我们只需要记住正确的方法是重新分配变量。

在 svelte 5 中，我们应该思考如何实现相同的结果。我们使用的两个变量还不够，我们还需要一个，即辅助变量。

首选方法是使用 $driven() 符文。

generate random value
value: {value}
derivedarr: {derivedarr}

演示

如果您知道更简单的方法，请告诉我。

还有一个 $effect() 符文方法可以实现相同的效果。它可能看起来更简单，但我们应该尽可能避免效果（主要是 svetlet 5 效果不在服务器/ssr 上运行）。

generate random value
value: {value}
effectarr: {effectarr}

演示

现实生活中的例子

这是我尝试将 svelte 4 页面直接迁移到 svelte 5 的示例。我花了一段时间重新思考代码。此页面用作帖子搜索，具有“加载更多”功能（如果用户没有 js，则添加结果或分页）：

苗条4

{#if results.length}
    

        {#each results as item, index}
            

                
                
                
                {item.title}
            
        {/each}
    

    {#if form?.thereismore}
        

            
                
                
                
            
            
                
            
        
    {/if}
{:else if form?.searchresultfromaction.length == 0}
    {l.noresultsfound}
{/if}

苗条5

{#if results.length}
    

        {#each results as item, index}
            

                
                
                
                {item.title}
            
        {/each}
    

    {#if form?.thereIsMore}
        

            
                
            
            
                
            
        
    {/if}
{:else if form?.searchResultFromAction.length == 0}
    {l.noResultsFound}
{/if}

现在就这些了。

ps：如果您愿意以不同的方式进行迁移，请随时告诉我。