Svelte前端框架

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.sveltesvelte 
<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.sveltesvelte 
<script>import Child from './Child.svelte';
</script><Child name="Svelte" />
#子组件：Child.sveltesvelte 
<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}