Svelte知识点总结

以下是一些Svelte框架的常用知识点总结：

1. 组件：Svelte的核心概念是组件，可以使用Svelte编写复杂的组件层次结构。组件通常由HTML、CSS和JavaScript代码组成，可以在单个文件中定义。

2. 双向绑定：Svelte支持双向绑定，可以在组件中使用类似于React和Vue的数据绑定方式。不同于React和Vue，Svelte使用的是反应式响应式数据绑定，以及在运行时自动生成优化的代码。

  2.1 响应式声明：在 Svelte 中，我们可以使用 $: 前缀来创建一个响应式声明。例如：

<script>
  let count = 0;
  $: doubled = count * 2;
</script>

<p>{count} doubled is {doubled}</p>

在上面的例子中，doubled 是一个响应式变量，它会自动更新当 count 发生变化时。

 2.2 双向绑定：Svelte 中的双向绑定使用 bind: 前缀来实现。例如：

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

<input bind:value={name}>
<p>Hello {name}!</p>

在上面的例子中，bind:value 实现了双向绑定。当输入框中的值发生变化时，name 的值也会更新，反之亦然。
  2.3 组件间的双向绑定：在 Svelte 中，组件间也可以使用双向绑定来进行数据传递。例如：

<!-- Child.svelte -->
<script>
  export let value;
</script>

<input bind:value={value}>

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
  let name = 'world';
</script>

<Child bind:value={name}>
<p>Hello {name}!</p>

在上面的例子中，Parent 组件将 name 通过 bind:value 双向绑定到 Child 组件的 value 属性上。当 Child 组件中输入框的值发生变化时，name 的值也会更新，反之亦然。
  2.4 通过 bind:this 绑定 DOM 元素引用：除了 bind:value，Svelte 还支持通过 bind:this 绑定 DOM 元素引用。例如：

<script>
  let inputRef;

  function handleClick() {
    inputRef.focus();
  }
</script>

<input bind:this={inputRef}>
<button on:click={handleClick}>Focus</button>

在上面的例子中，我们使用 bind:this 将 input 元素的引用绑定到 inputRef 变量上，然后在 handleClick 函数中使用 inputRef 引用来聚焦该输入框。
  2.5 在组件中使用 bind:this 绑定子组件引用：除了在父子组件之间进行双向绑定，Svelte 还支持在父组件中使用 bind:this 绑定子组件的引用，从而可以访问子组件的属性和方法。例如：

<!-- Child.svelte -->
<script>
  export let name = 'world';

  function sayHello() {
    console.log(`Hello, ${name}!`);
  }
</script>

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
  let childRef;

  function handleClick() {
    childRef.sayHello();
  }
</script>

<Child bind:this={childRef} name="Svelte">
<button on:click={handleClick}>Say Hello</button>

在上面的例子中，我们使用 bind:this 将 Child 组件的引用绑定到 childRef 变量上，然后在 handleClick 函数中使用 childRef 引用来调用 Child 组件中的 sayHello 方法。
  2.6 自定义双向绑定：Svelte 还支持自定义双向绑定，通过 bind:propertyName={value, updateFunction} 的方式来实现。例如：

<!-- MyComponent.svelte -->
<script>
  export let name = '';
  export let onChange;

  function handleChange(event) {
    onChange(event.target.value);
  }
</script>

<input type="text" bind:value={name} on:input={handleChange}>

<!-- Parent.svelte -->
<script>
  import MyComponent from './MyComponent.svelte';

  let name = 'world';

  function handleNameChange(newName) {
    name = newName;
  }
</script>

<MyComponent bind:name={name} onChange={handleNameChange}>
<p>Hello {name}!</p>

在上面的例子中，我们自定义了 MyComponent 组件的双向绑定，将 bind:name 绑定到 name 属性上，并且在 MyComponent 组件内部实现了 handleChange 函数和 onChange 回调函数来处理属性的更新。然后在 Parent 组件中，我们将 name 和 handleNameChange 函数传递给了 MyComponent 组件，从而实现了自定义的双向绑定。

3. 生命周期：Svelte提供了一组生命周期钩子函数，可以在组件的生命周期中处理不同的事件和状态。例如，onMount()函数可以在组件挂载后执行，onDestroy()函数可以在组件被销毁前执行。

  3.1 onMount: 组件被挂载到DOM后触发。常用于初始化数据或执行一次性的操作。

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    console.log('Component has been mounted!');
  });
</script>

 3.2 beforeUpdate: 组件更新前触发。常用于在组件更新前检查或修改数据。

<script>
  import { beforeUpdate } from 'svelte';

  let count = 0;

  beforeUpdate(() => {
    console.log(`The count is currently ${count}`);
  });

  function handleClick() {
    count++;
  }
</script>

<button on:click={handleClick}>Click me</button>

 3.3 afterUpdate: 组件更新后触发。常用于在组件更新后执行一些操作，例如更新其他相关组件。

<script>
  import { afterUpdate } from 'svelte';

  let count = 0;

  afterUpdate(() => {
    console.log(`The count is now ${count}`);
  });

  function handleClick() {
    count++;
  }
</script>

<button on:click={handleClick}>Click me</button>

 3.4 onDestroy: 组件被销毁时触发。常用于清除定时器或取消订阅事件等操作。

<script>
  import { onDestroy } from 'svelte';

  let interval;

  onMount(() => {
    interval = setInterval(() => {
      console.log('Interval fired');
    }, 1000);
  });

  onDestroy(() => {
    clearInterval(interval);
    console.log('Interval cleared');
  });
</script>

 3.5 onCreate: 组件实例创建时触发。常用于在组件创建时设置默认值或初始化变量。

<script>
  import { onCreate } from 'svelte';

  function initialize() {
    console.log('Component initialized');
  }

  onCreate(initialize);
</script>

<h1>Hello, world!</h1>

 3.6 tick: 每次渲染后执行的钩子函数。

<script>
  import { tick } from 'svelte';

  let count = 0;

  async function handleClick() {
    count++;
    await tick();
    console.log('The count has been updated');
  }
</script>

<button on:click={handleClick}>Click me</button>

4. 样式：Svelte支持将CSS与组件绑定，以确保组件的样式只在组件范围内生效，并且不会与其他组件或全局样式冲突。Svelte还提供了样式的预处理器，例如Sass和Less。

 4.1 使用 style 标签:在 Svelte 组件的 <style> 标签中编写的 CSS 样式将只适用于该组件。你可以像在普通的 HTML 页面中那样编写样式

<style>
  h1 {
    color: red;
  }

  p {
    font-size: 16px;
  }
</style>

<h1>Hello, world!</h1>
<p>This is a paragraph.</p>

 4.2 使用 Svelte 特有的样式语法:Svelte 还提供了一种特有的样式语法，可以在样式中使用变量、条件表达式和循环等功能。

<script>
  let isActive = false;
</script>

<style>
  .active {
    color: red;
  }

  .inactive {
    color: blue;
  }
</style>

<h1 class:{isActive ? 'active' : 'inactive'}>Hello, world!</h1>

 4.3 伪类:此外，Svelte 还提供了 :global() 伪类，用于将样式应用于全局。例如，可以使用 :global() 伪类来设置全局的样式

<style>
  :global(body) {
    background-color: #f0f0f0;
  }
</style>

<h1>Hello, world!</h1>

5. 事件处理：Svelte支持各种事件处理程序，例如click、submit和keyup等。与React和Vue不同，Svelte在组件内使用自定义事件派发机制，而不是使用props和回调函数传递数据。
 在Svelte中，组件可以使用dispatch方法来派发自定义事件。这个方法接收两个参数：事件名称和事件数据。当组件派发事件时，其他组件可以通过在模板中使用on:事件名称={处理函数}来监听这个事件，并在事件触发时执行相应的处理函数。下面是一个简单的例子，展示了如何在Svelte中使用自定义事件：

<!-- Child.svelte -->
<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();

  function handleClick() {
    dispatch('customEvent', { message: 'Hello from Child' });
  }
</script>

<button on:click={handleClick}>Click me</button>

<!-- Parent.svelte -->
<script>
  function handleCustomEvent(event) {
    console.log(event.detail.message); // 输出：Hello from Child
}
</script>

<Child on:customEvent={handleCustomEvent} />

 在这个例子中，Child组件派发了一个名为customEvent的自定义事件，并传递了一个包含message属性的对象作为事件数据。Parent组件在模板中使用on:customEvent={handleCustomEvent}来监听这个事件，并在事件触发时执行handleCustomEvent函数。当事件被触发时，handleCustomEvent函数会接收到一个包含事件数据的event对象，并从中提取出message属性进行输出。
 总的来说，Svelte提供了一种灵活、高效的自定义事件派发机制，让开发者可以方便地在组件之间传递数据，提高组件之间的耦合性。

6. 条件渲染：Svelte支持条件渲染，可以使用if和else指令根据组件的状态来决定是否渲染组件。还可以使用ternary运算符和JavaScript表达式来实现更复杂的条件渲染。
 6.1 基于if/else指令的条件渲染: 使用if/else指令可以根据组件的状态来决定是否渲染组件。在Svelte中，if指令只有当其表达式返回true时才会渲染组件，否则则不会渲染组件。而else指令则是在if指令不满足条件时才会渲染组件。

<script>
  let show = true;
</script>

{#if show}
  <div>显示内容</div>
{:else}
  <div>隐藏内容</div>
{/if}

 6.2 三元表达式的条件渲染: 除了if/else指令外，Svelte还支持使用三元表达式进行条件渲染。三元表达式是一种简洁的语法，可以根据一个条件返回两种不同的结果。

<script>
  let show = true;
</script>

{show ? <div>显示内容</div> : <div>隐藏内容</div>}

 6.3 JavaScript表达式的条件渲染:Svelte还支持使用JavaScript表达式进行条件渲染。JavaScript表达式是一种强大的语法，可以根据任意复杂的条件进行渲染。

<script>
  let num = 10;
</script>

{num % 2 === 0 ? <div>num是偶数</div> : <div>num是奇数</div>}

7. 列表渲染：Svelte支持将数据数组映射到组件数组，并使用each指令来循环渲染每个组件。Svelte还支持使用key属性来优化列表渲染的性能。
 7.1 下面是一个简单的示例，演示如何在Svelte中使用each指令来渲染列表

<script>
  let items = ['item 1', 'item 2', 'item 3'];
</script>

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

 7.2 Svelte还支持使用key属性来优化列表渲染的性能。key属性允许Svelte更好地跟踪每个项目，并避免在列表中添加或删除项目时进行不必要的重新渲染。下面是一个演示如何在Svelte中使用key属性的示例

<script>
  let items = [
    { id: 1, name: 'item 1' },
    { id: 2, name: 'item 2' },
    { id: 3, name: 'item 3' }
  ];
</script>

<ul>
  {#each items as item (item.id)}
    <li key={item.id}>{item.name}</li>
  {/each}
</ul>

8. 表单处理：Svelte提供了一组表单处理指令，例如bind:text、bind:checkbox和bind:group等，可以轻松地实现表单输入的双向绑定。
 在Svelte中，表单处理是一个常见的任务。Svelte提供了一组方便的表单处理指令，使表单输入的双向绑定变得非常容易。下面是Svelte提供的几个表单处理指令：
 8.1 bind:text指令:bind:text指令可以将文本输入框的值与组件中的变量绑定起来，实现双向绑定。例如，以下代码实现了一个简单的文本输入框

<input type="text" bind:value={name}>
<p>Hello {name}!</p>

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

 8.2 bind:checkbox指令:bind:checkbox指令可以将复选框的状态与组件中的变量绑定起来。例如，以下代码实现了一个简单的复选框

<label>
  <input type="checkbox" bind:checked={agree}>
  I agree to the terms and conditions
</label>

<script>
  let agree = false;
</script>

 8.3 bind:group指令: bind:group指令可以将单选框或多选框的值与组件中的变量绑定起来。例如，以下代码实现了一个简单的单选框组

<label>
  <input type="radio" name="color" value="red" bind:group={color}>
  Red
</label>
<label>
  <input type="radio" name="color" value="green" bind:group={color}>
  Green
</label>
<label>
  <input type="radio" name="color" value="blue" bind:group={color}>
  Blue
</label>

<p>You selected {color}.</p>

<script>
  let color = 'red';
</script>

9. 动画：Svelte提供了一组动画指令和API，可以实现各种动画效果。例如，可以使用transition指令在组件进入和离开DOM时添加动画效果。
 9.1 transition指令

<script>
  import { onMount } from 'svelte';
  
  let isVisible = false;
  
  onMount(() => {
    // 初始时隐藏元素
    isVisible = true;
  });
  
  function toggle() {
    isVisible = !isVisible;
  }
</script>

<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: green;
    transition: all 0.5s ease;
  }
  
  .hidden {
    opacity: 0;
    transform: scale(0.5);
  }
</style>

<button on:click={toggle}>切换</button>

<div class="box" transition:fade={isVisible ? {} : {duration: 500} class:hidden={!isVisible}>
  我是一个盒子
</div>

 在这个示例中，我们使用了 Svelte 的 onMount 钩子函数来在组件加载后初始化isVisible 变量。该变量控制一个包含一个 div元素的组件的可见性。我们还定义了一个toggle 函数来切换 isVisible 变量的值。

在 style 中，我们定义了一个 .box 类，它将应用于 div 元素。该类包含一个过渡效果的 CSS 属性：transition: all 0.5s ease。这意味着当元素的任何属性更改时，都会有一个持续时间为 0.5 秒的过渡效果。

我们还定义了一个.hidden 类，它在元素隐藏时将应用于 div 元素。该类包含两个过渡效果的 CSS 属性：opacity: 0 和 transform: scale(0.5)。这些属性将使元素淡出并缩小到一半大小。

最后，我们在 div 元素中使用了 transition 指令，指定了一个名为 fade 的过渡效果。如果isVisible 变量为 true，则 fade 过渡效果将被应用。否则，我们使用 class:hidden={!isVisible} 将.hidden 类添加到元素上，并指定了一个持续时间为 500 毫秒的过渡效果（{duration: 500}）。
 9.2 animate指令: 使用animate指令可以创建更复杂的动画效果，例如使用缓动函数和时间线来定义动画的进程和结束状态。以下是一个示例

<script>
  import { animate } from 'svelte/animate';

  let isOpen = false;

  function toggle() {
    isOpen = !isOpen;
  }
</script>

<button on:click={toggle}>Toggle</button>

{#if isOpen}
  <div animate:fadeInOut>
    <p>Hello, world!</p>
  </div>
{/if}

 在这个示例中，使用animate指令和fadeInOut属性来定义一个渐入渐出的动画效果，当isOpen为true时，Hello, world!会以渐入的效果出现，当isOpen为false时，则会以渐出的效果消失。
 9.3 spring指令: spring指令可以让动画效果更加流畅，因为它使用物理引擎来模拟元素的运动。以下是一个示例

<script>
  import { spring } from 'svelte/motion';

  let isOpen = false;

  function toggle() {
    isOpen = !isOpen;
  }
</script>

<button on:click={toggle}>Toggle</button>

{#if isOpen}
  <div style="position: absolute; left: 50%; top: 50%;" use:spring={{ x: 0, y: 0, stiffness: 0.1, damping: 0.5 }}>
    <p>Hello, world!</p>
  </div>
{/if}

 在这个示例中，使用spring指令和use属性来定义一个弹簧动画效果，当isOpen为true时，Hello, world!会以弹簧效果出现在页面中心。
 9.4 tweened函数: tweened函数可以用来创建基于状态变化的动画效果，例如在一个计数器组件中，可以使用tweened函数来实现数字的增加动画效果。以下是一个示例

<script>
  import { tweened } from 'svelte/motion';

  let count = tweened(0);

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

<p>{count}</p>
<button on:click={increment}>Increment</button>

<style>
  p {
    font-size: 3em;
    text-align: center;
  }
</style>

 在这个示例中，使用tweened函数来创建一个可动画的计数器变量count，并在increment函数中每次将其增加1。由于count是可动画的，所以每次增加1时都会出现一个数字增加的动画效果。

10. SSR支持：Svelte支持服务端渲染（SSR），可以将组件渲染为HTML字符串，以提高SEO和性能。
 为了使用Svelte的SSR功能，需要先安装svelte官方的svelte-sapper模板。在模板中，有一个src/routes目录，其中包含应用程序中每个页面的路由和对应的组件。在组件中，可以使用export关键字来导出组件的数据和方法，以便在服务器端和客户端都可以访问。
 10.1 安装svelte-sapper模板:

npx degit "sveltejs/sapper-template#rollup" my-app
cd my-app
npm install

 10.2 创建一个Svelte组件::

// src/routes/index.svelte

<script>
  export let name = 'World';
</script>

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

 10.3 创建一个Svelte组件::

// src/server.js

import express from 'express';
import { sapper } from '@sapper/server';

const app = express();

app.use(
  express.static('static'),
  sapper({
    manifest: true
  })
);

app.listen(3000, () => {
  console.log('Listening on http://localhost:3000');
});

 10.4 运行应用程序:

npm run dev

 在浏览器中访问http://localhost:3000，应该可以看到“Hello World!”的消息。如果查看页面源代码，应该可以看到与组件对应的HTML字符串。在搜索引擎中索引时，这些HTML字符串会被搜索引擎爬虫索引，提高应用程序的SEO。

---