SuperAPI AI 工具集

svelte

前端与建站

查看项目

更新于 10-16 06:46

技能介绍

用途:Svelte 5 是一个在构建时把组件编译为高效 JavaScript 的框架,用于创建 Svelte 应用和响应式界面。

主要能力:提供 runes 响应式系统,包括 $state 定义状态(支持对象、数组深度响应)、$derived 计算派生值(可用 $derived.by 处理复杂计算)、$effect 处理副作用(支持清理与 $effect.pre 在 DOM 更新前执行)、$props 声明组件属性、$bindable 支持双向绑定属性。模板语法包含 {#if} 条件、{#each} 循环(可带 key 与 {:else})、{#await} 异步、{#key} 重建块,以及 Svelte 5 的 {#snippet} 片段和 {@render} 渲染,片段可作为 props 传递。支持表单绑定 bind:value、bind:checked、bind:group,以及元素绑定 bind:this、bind:clientWidth 等。事件使用 onclick、oninput 等新语法,支持 |preventDefault 等修饰符,组件事件通过回调 props 实现。提供生命周期钩子 onMount、onDestroy、beforeUpdate、afterUpdate,stores(writable、derived、readable 及自定义 store,用 $ 前缀自动订阅),setContext/getContext,actions(use:),svelte/transition 过渡与 svelte/easing 缓动,class: 与 style: 快捷指令。

使用方式:快速开始执行 npx sv create my-app、cd my-app、npm install、npm run dev。

最佳实践与常见错误:使用 runes 而非 Svelte 5 中的 $:;基础类型状态需用 $state();使用 onclick 而非 on:click;store 需用 $store 自动订阅;each 建议加 (item.id) 键。

限制:资料未说明收费、平台或价格等信息,暂未提供。