用途:该技能提供 Svelte 专家级辅助,覆盖 Svelte 5 Runes、响应式声明、stores、动画与过渡,适用于构建快速、响应式的 Web UI。
主要能力:Svelte 将声明式组件编译为极简的原生 JavaScript,使用显式 Runes 实现细粒度响应式,无需 Virtual DOM 开销。适合高性能默认场景,也适合嵌入型应用(如小组件/嵌入页面),因为打包体积小;同时把 HTML、CSS、JS 放在单个文件中,样板代码很少。
核心概念:Runes 是 Svelte 5 的响应式标记,包括 $state(声明响应式状态)、$derived(声明随依赖变化而更新的值)、$effect(依赖变化时执行副作用代码)、$props(声明组件 props)。Snippets 是组件内可复用的标记块,可用 {#snippet ...} 与 {@render ...} 使用。
使用方式:快速上手示例使用 $state 与 $derived 声明状态,并定义函数修改状态。推荐做法是使用 Runes 替代旧式 let 语法,使用 onclick 等原生属性替代 on:click 指令,使用 Snippets 替代 slots。避免依赖 Svelte 3/4 的自动响应式“魔法”,也不要在组件边界之间直接修改状态而不通过明确回调或绑定 props。
常见问题:数组/对象原地修改(如 arr.push(x))不会触发 Svelte 3/4 更新,可重新赋值(arr = [...arr, x])或升级到 Svelte 5 的 $state();无法绑定未定义属性时,检查子组件是否声明了对应 prop,或使用 $props();组件未定义时检查导入拼写或相对路径是否缺少 .svelte 扩展名。
限制:资料未提供收费、价格、平台、具体使用步骤或效果数据,暂未提供;以上内容仅依据公开技能说明整理。