再见神奇 svelte 4 $：
在我最近发布 svelte 5 迁移的经验和注意事项之后，我想重点介绍从 svelte 4 迁移到 svelte 5 时的一些技巧和心态的变化。
svelte 4 使用“神奇的”$: 并让和完成所有繁重的工作以使代码具有反应性。我们还接受了变量重新分配，例如
let arr = [1, 2, 3]let value = 4arr = [...arr, value]
而不是更新/改变变量的方法，如推送等
我很惊讶能够使用 svelte 5 重新学习好的旧 js 模式。
无需一直保持反应
而且我可能也被 svelte 4 中的 let 宠坏了，没有考虑反应性，如果需要的话它会被包含在内。 但并非所有变量都必须是反应性的。非反应性变量也可以在反应性甚至“传统变异代码”中更新。反应式变量的真正需要是当我们在 ui 中使用它时（当这个变量在 html/页面中呈现并且我们需要它稍后更新时）。
您可能会在 svelte 5 中遇到错误，例如无法分配给派生状态，在其自己的范围内引用的状态永远不会更新。您的意思是在闭包内引用它吗？或衍生_引用_selfn如果使用 svelte 4 编码风格，则派生值无法递归引用自身。
辅助变量的示例
看一下这个 svelte 4 风格的代码示例：
let value; let derivedarr = [] $: if (value) { derivedarr = [...derivedarr, value] } function random () { value = math.floor(1 + math.random() * 10) }value: {value}
SuperCms在线订餐系统 模板采用响应式设计，自动适应手机，电脑及平板显示；满足单一店铺外卖需求。功能：1.菜单分类管理2.菜品管理：菜品增加，删除，修改3.订单管理4.友情链接管理5.数据库备份6.文章模块：如：促销活动，帮助中心7.单页模块：如：企业信息，关于我们更强大的功能在开发中……安装方法：上传到网站根目录，运行http://www.***.com/install 自动
0 查看详情 
derivedarr: {derivedarr}
演示
我们有两个反应变量，svelte 4 自动解决更新问题。我们只需要记住正确的方法是重新分配变量。
在 svelte 5 中，我们应该思考如何实现相同的结果。我们使用的两个变量还不够，我们还需要一个，即辅助变量。
首选方法是使用 $driven() 符文。
let value = $state(); let helperarr = []; let derivedarr = $derived.by(() => { if (value) { helperarr.push(value); return helperarr; } }); function random () { value = math.floor(1 + math.random() * 10) }value: {value}
derivedarr: {derivedarr}
演示
如果您知道更简单的方法，请告诉我。
还有一个 $effect() 符文方法可以实现相同的效果。它可能看起来更简单，但我们应该尽可能避免效果（主要是 svetlet 5 效果不在服务器/ssr 上运行）。
let value = $state(); let helperarr = [] let effectarr = $derived(helperarr); $effect.pre(() => { if (value) { helperarr.push(value) } }) function random () { value = math.floor(1 + math.random() * 10) }value: {value}
effectarr: {effectarr}
演示
现实生活中的例子
这是我尝试将 svelte 4 页面直接迁移到 svelte 5 的示例。我花了一段时间重新思考代码。此页面用作帖子搜索，具有“加载更多”功能（如果用户没有 js，则添加结果或分页）：
苗条4
import icon from '../components/icon.svelte'; import { enhance } from '$app/forms'; import { tick } from 'svelte'; export let form; export let searchinglang; export let l; let results = []; let previoussearch = ''; let searchterm; let skip; $: if (!!form && form?.thereismore) { searchterm = form.searchterm; skip = number(form?.skip) + 20; } $: if (!!form?.searchresultfromaction) { if (previoussearch == form.searchterm && form.therewasmore) { results = [...results, ...form.searchresultfromaction]; } else { results = [...form.searchresultfromaction]; previoussearch = form.searchterm; } } async function intoview(el) { await tick(); if (el.attributes.index.nodevalue == skip - 20 && skip != undefined) { el.scrollintoview({ behavior: 'smooth' }); } }{#if results.length} {#each results as item, index} - {number(index) + 1 + number(form?.skip)}. {item.title}
{/each}
{#if form?.thereismore} {/if}{:else if form?.searchresultfromaction.length == 0} {l.noresultsfound}{/if} @media (scripting: none) { /* users without javascript have calculated order of results within paggination and css disables standard ol ul numberingusers with javascript have standard ol ul numbering and loading more feature */ ol { list-style-type: none; } }
苗条5
import Icon from '../components/Icon.svelte'; import { enhance } from '$app/forms'; import { tick } from 'svelte'; let { form, searchingLang, l } = $props(); let previousSearch = ''; let skip = $derived.by(() => { if (!!form && form?.thereIsMore) { return Number(form?.skip) + 20; } }); let helperResultsArr = []; let results = $derived.by(() => { if (!!form?.searchResultFromAction) { if (previousSearch == form.searchTerm && form.thereWasMore) { helperResultsArr.push(...form.searchResultFromAction); return helperResultsArr; } else { helperResultsArr = []; helperResultsArr.push(...form.searchResultFromAction); previousSearch = form.searchTerm; return helperResultsArr; } } else return []; }); async function intoView(el) { await tick(); if (el.attributes.index.nodeValue == skip - 20 && skip != undefined) { el.scrollIntoView({ behavior: 'smooth' }); } }{#if results.length} {#each results as item, index} - {Number(index) + 1 + Number(form?.skip)}. {item.title}
{/each}
{#if form?.thereIsMore} {/if}{:else if form?.searchResultFromAction.length == 0} {l.noResultsFound}{/if} @media (scripting: none) { /* users without javascript have calculated order of results within paggination and css disables standard ol ul numberingusers with javascript have standard ol ul numbering and loading more feature */ ol { list-style-type: none; } }
现在就这些了。
ps：如果您愿意以不同的方式进行迁移，请随时告诉我。
以上就是Svelte 5 中的“助手”变量的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1496691.html
微信扫一扫 
支付宝扫一扫 
