Svelte前端框架

news2025/2/12 8:16:17

Svelte 简介
Svelte 是一个现代的前端框架，用于构建高效、响应式的用户界面。与 React、Vue 和 Angular 等传统框架不同，Svelte 在构建时将组件编译为高效的纯 JavaScript 代码，而不是在浏览器中运行一个庞大的运行时库。这使得 Svelte 应用具有更小的体积和更高的性能。

Svelte 的核心特点
无虚拟 DOM：

Svelte 直接在构建时编译组件为原生 JavaScript 代码，避免了虚拟 DOM 的开销。

更新 DOM 时更加高效。

响应式编程：

通过简单的赋值语句即可实现数据绑定和状态管理。

不需要复杂的 API（如 React 的 setState 或 Vue 的 ref）。

组件化开发：

将 HTML、CSS 和 JavaScript 封装在单个 .svelte 文件中。

组件之间的通信通过 props 和事件实现。

轻量级：

生成的代码体积小，加载速度快。

适合构建高性能的 Web 应用。

内置动画和过渡效果：

提供简单的 API 实现动画和过渡效果。

渐进式增强：

可以逐步引入到现有项目中，也可以用于构建完整的单页应用（SPA）。

Svelte 的安装与使用

创建 Svelte 项目
使用 Svelte 官方模板快速创建项目：

bash 
npx degit sveltejs/template my-svelte-app
cd my-svelte-app
npm install
npm run dev

项目结构
一个典型的 Svelte 项目结构如下：

my-svelte-app/
├── public/              # 静态资源
├── src/                 # 源代码
│   ├── App.svelte       # 根组件
│   ├── main.js          # 入口文件
├── package.json         # 项目依赖
├── rollup.config.js     # 构建配置（默认使用 Rollup）

编写 Svelte 组件
Svelte 组件以 .svelte 为后缀，包含 HTML、CSS 和 JavaScript。

#示例：App.svelte

svelte 
<script>
    let count = 0;

    function increment() {
        count += 1;
    }
</script>

<style>
    button {
        background-color: #ff3e00;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
    }
</style>

<main>
    <h1>Hello, Svelte!</h1>
    <p>Count: {count}</p>
    <button on:click={increment}>Click me</button>
</main>

运行项目
启动开发服务器：

bash 
npm run dev

打开浏览器访问 http://localhost:5000，即可看到运行效果。

Svelte 的核心概念

响应式变量
Svelte 的响应式系统基于赋值语句。只需声明变量并在模板中使用，Svelte 会自动跟踪变化并更新 DOM。

#svelte 
<script>
    let name = "World";
    setTimeout(() => {
        name = "Svelte"; // 自动更新 DOM
    }, 2000);
</script>

<h1>Hello {name}!</h1>

Props（属性）
通过 export 关键字定义组件的 props。

#父组件：App.svelte

svelte 
<script>
    import Child from './Child.svelte';
</script>

<Child name="Svelte" />
#子组件：Child.svelte

svelte 
<script>
    export let name;
</script>

<p>Hello, {name}!</p>

事件处理
使用 on: 指令绑定事件。

svelte 
<button on:click={() => alert('Clicked!')}>
    Click me
</button>

条件渲染
使用 {#if} 和 {:else} 实现条件渲染。

svelte 
<script>
    let isLoggedIn = false;
</script>

{#if isLoggedIn}
    <p>Welcome back!</p>
{:else}
    <p>Please log in.</p>
{/if}

循环渲染
使用 {#each} 遍历数组。

svelte 
<script>
    let items = ['Apple', 'Banana', 'Cherry'];
</script>

<ul>
    {#each items as item}
        <li>{item}</li>
    {/each}
</ul>

双向绑定
使用 bind: 实现双向数据绑定。

svelte 
<script>
    let name = '';
</script>

<input bind:value={name} placeholder="Enter your name">

<p>Hello, {name}!</p>

动画和过渡
Svelte 内置了动画和过渡效果。

svelte 
<script>
    import { fade } from 'svelte/transition';
    let visible = true;
</script>

<button on:click={() => visible = !visible}>
    Toggle
</button>

{#if visible}
    <p transition:fade>Fade in and out</p>
{/if}