再见神奇 svelte 4 $：
在我最近发布 svelte 5 迁移的经验和注意事项之后，我想重点介绍从 svelte 4 迁移到 svelte 5 时的一些技巧和心态的变化。
svelte 4 使用“神奇的”$: 并让和完成所有繁重的工作以使代码具有反应性。我们还接受了变量重新分配，例如
<script> let arr = [1, 2, 3] let value = 4 arr = [...arr, value] </script>
而不是更新/改变变量的方法，如推送等
我很惊讶能够使用 svelte 5 重新学习好的旧 js 模式。
无需一直保持反应
而且我可能也被 svelte 4 中的 let 宠坏了，没有考虑反应性，如果需要的话它会被包含在内。 但并非所有变量都必须是反应性的。非反应性变量也可以在反应性甚至“传统变异代码”中更新。反应式变量的真正需要是当我们在 ui 中使用它时（当这个变量在 html/页面中呈现并且我们需要它稍后更新时）。
您可能会在 svelte 5 中遇到错误，例如无法分配给派生状态，在其自己的范围内引用的状态永远不会更新。您的意思是在闭包内引用它吗？或衍生_引用_selfn如果使用 svelte 4 编码风格，则派生值无法递归引用自身。
辅助变量的示例
看一下这个 svelte 4 风格的代码示例：
<script>
let value;
let derivedarr = []
$: if (value) {
derivedarr = [...derivedarr, value]
}
function random () {
value = math.floor(1 + math.random() * 10)
}
</script>
<button on:click={random}>generate random value</button>
<p>value: {value}</p>
<p>derivedarr: {derivedarr}</p>
演示
我们有两个反应变量，svelte 4 自动解决更新问题。我们只需要记住正确的方法是重新分配变量。
在 svelte 5 中，我们应该思考如何实现相同的结果。我们使用的两个变量还不够，我们还需要一个，即辅助变量。
首选方法是使用 $driven() 符文。
SuperCms在线订餐系统
下载
模板采用响应式设计，自动适应手机，电脑及平板显示；满足单一店铺外卖需求。功能：1.菜单分类管理2.菜品管理：菜品增加，删除，修改3.订单管理4.友情链接管理5.数据库备份6.文章模块：如：促销活动，帮助中心7.单页模块：如：企业信息，关于我们更强大的功能在开发中……安装方法：上传到网站根目录，运行http://www.***.com/install 自动
<script>
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)
}
</script>
<button onclick={random}>generate random value</button>
<p>value: {value}</p>
<p>derivedarr: {derivedarr}</p>
演示
如果您知道更简单的方法，请告诉我。
还有一个 $effect() 符文方法可以实现相同的效果。它可能看起来更简单，但我们应该尽可能避免效果（主要是 svetlet 5 效果不在服务器/ssr 上运行）。
<script>
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)
}
</script>
<button onclick={random}>generate random value</button>
<p>value: {value}</p>
<p>effectarr: {effectarr}</p>
演示
现实生活中的例子
这是我尝试将 svelte 4 页面直接迁移到 svelte 5 的示例。我花了一段时间重新思考代码。此页面用作帖子搜索，具有“加载更多”功能（如果用户没有 js，则添加结果或分页）：
苗条4
<script>
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' });
}
}
</script>
{#if results.length}
<ol>
{#each results as item, index}
<li use:intoview {index} aria-posinset={index}>
<!-- users without javascript have calculated order of results within paggination and css disables standard ol ul numbering -->
<!-- users with javascript have standard ol ul numbering and loading more feature -->
<noscript>{number(index) + 1 + number(form?.skip)}. </noscript>
<a href="/act/{searchinglang}/{item.id}/present/text">{item.title}</a>
</li>
{/each}
</ol>
{#if form?.thereismore}
<form
method="post"
action="?/search&skip={skip}&therewasmore={form?.thereismore}"
use:enhance
autocomplete="off"
>
<label>
<!-- probably we do not need to bind the value as this is hidden input -->
<!-- <input name="searchterm" type="hidden" bind:value={searchterm} /> -->
<input name="searchterm" type="hidden" value={searchterm} />
</label>
<button aria-label="button to load more search results" class="outline">
<icon name="loadmore" />
</button>
</form>
{/if}
{:else if form?.searchresultfromaction.length == 0}
{l.noresultsfound}
{/if}
<style>
@media (scripting: none) {
/* users without javascript have calculated order of results within paggination and css disables standard ol ul numbering
users with javascript have standard ol ul numbering and loading more feature */
ol {
list-style-type: none;
}
}
</style>
苗条5
<script>
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' });
}
}
</script>
{#if results.length}
<ol>
{#each results as item, index}
<li use:intoView {index} aria-posinset={index}>
<!-- users without javascript have calculated order of results within paggination and css disables standard ol ul numbering -->
<!-- users with javascript have standard ol ul numbering and loading more feature -->
<noscript>{Number(index) + 1 + Number(form?.skip)}. </noscript>
<a href="/act/{searchingLang}/{item.id}/present/text">{item.title}</a>
</li>
{/each}
</ol>
{#if form?.thereIsMore}
<form
method="POST"
action="?/search&skip={skip}&thereWasMore={form?.thereIsMore}"
use:enhance
autocomplete="off"
>
<label>
<input name="searchTerm" type="hidden" value={form.searchTerm} />
</label>
<button aria-label="Button to load more search results" class="outline">
<Icon name="loadMore" />
</button>
</form>
{/if}
{:else if form?.searchResultFromAction.length == 0}
{l.noResultsFound}
{/if}
<style>
@media (scripting: none) {
/* users without javascript have calculated order of results within paggination and css disables standard ol ul numbering
users with javascript have standard ol ul numbering and loading more feature */
ol {
list-style-type: none;
}
}
</style>
现在就这些了。
ps：如果您愿意以不同的方式进行迁移，请随时告诉我。
