Svelte从入门到精通

组件都伴随着生命周期，一个组件通常都存在着创建、更新、销毁等这几个相同的生命周期，而不同的框架由于各自实现的不同，往往提供了除这些共同生命周期之外的一些差异化生命周期。

UI组件库的一大特性便是组件化，我们除了在当前组件设置数据之外，绝大多时候，都需要把数据传递给其他组件使用。比如我们抽象了一些公共逻辑，写了一个公共组件，公共组件通过接收数据来展示不同的功能。

有了数据，那必然要有更新数据的方法，以及平时在业务上为了服务数据更新而派生出来的一堆处理数据或者操作页面的方法，那么方法在各个UI库中应该如何定义呢？

经过了入门篇与进阶篇的学习，相信大家对Svelte都有了一定的了解。接下来我们将对比Svelte与React、Vue之间的语法差异，最后一次加强对Svelte的api的掌握程度。

动画 当我们点击关闭Alert组件时，会出现一段向上关闭的动画。我们使用svelte/easing配合transition指令来实现相似的动画。 然后修改html内容。

api 接下来我们完成剩余的api，主要有afterClose回调、closeText、description、icon、message。 在Svelte中，我们不能像react那样。

也许实现一个TodoList项目没有过瘾，这里笔者为大家带来第二个实战内容：使用Svelte来实现Antd的其中一个组件。 这里笔者挑选的Antd组件是Alert组件。

本章主要介绍TodoList的数据交互的代码逻辑如何实现。在这章，会使用到svelte/store来进行状态的管理。

搭建环境 首先使用vite搭建项目。 安装tailwind，这一步读者可自行选择自己喜欢的样式工具。带你了解如何在实际开发中使用Svelte。

await 在列表展示时，为了提升用户体验，我们在数据请求的过程中，往往会使用一些loading toast来提示用户我们正在请求，等到请求完成后便会隐藏loading提示而展示我们请求成功的数据。

一些特殊的标签，在平时的开发中比较少遇到。但在特定的场合，却又能发挥大用处。本章中，我们将了解以下标签： <svelte:self> <svelte:component>...

动作 svelte/action只是创建元素时调用的普通JavaScript函数，通过这个函数，我们能够拿到对元素本身的引用，因此我们可以通过js编程将任何行为附加到该元素。

好看的动画往往能给页面带来锦上添花的效果，不仅能提升用户体验，还能增强页面美观度。流畅丝滑的动效背后，除了开发时的灵感迸发，也需要强有力的数学知识的支持

在《组件与属性》一章中，我们了解了父子组件之间的传值通信方式。然而这在正常的开发中远远不够，我们可能会遇到在最顶部的组件的状态传递给最里层的组件。如果使用父子传值的方式来层层传递，显然过于累赘

当业务逻辑简单时，我们可以把所有变量都放在各自的组件或页面内。然而真实的开发情况是，我们的业务逻辑会越来越复杂，页面所承载的数据，亦或者页面与页面之间共用的状态等会变得越来越庞大。

在<style></style>内编写的样式默认是scoped，组件内生效的。在一些情况下，我们需要让我们的样式不止在组件内生效，最常见的场景便是修改UI组件的样式。

即使当今的主流开发模式提倡的是数据驱动视图，然而我们仍旧无法完全摆脱对dom的操作，我们也不能摆脱。无论是在React还是在Vue中，都有提供对dom的引用的api操作，而对dom的引用通常称为Ref

一个最常见的场景便是UI组件中的Modal弹窗组件。弹窗的弹出隐藏是通用的，但是弹窗内的内容则是五花八门，完全由用户自己定义，而这种能够往组件内部插入自定义内容的模块，我们称之为“插槽”。

在程序语言中，当然不止数据的存储和更新，同样重要的还有如何更新和展示这些数据。本章中，笔者将与读者们一起了解如何通过条件判断来展示或隐藏页面内容，如何通过列表循环来展示数组内容。

如果读者接触过Vue或者React，那么必然了解过像Vue的computed、watch和React的useMemo， 在Svelte中，同样提供了类似的功能。Svelte称之为Reactivity。