无虚拟DOM的框架-Svelte（基础）Svelte 是一个用于构建用户界面的 JavaScript 框架，它的设计目标

简介

Svelte 是一个用于构建用户界面的 JavaScript 框架，它的设计目标是让开发者更轻松地构建高性能的 Web 应用程序。与传统的前端框架（如React、Vue和Angular）不同，Svelte采用了一种不同的编译时（compile-time）方法，将组件的逻辑转换为高效的原生 JavaScript，而不是在运行时处理。

特点

编译时框架： Svelte 不会将大量框架的运行时代码打包到最终的应用程序中。相反，它在构建时将组件编译成高效、优化的原生 JavaScript 代码，减小了应用程序的体积。
无虚拟 DOM： 与其他框架不同，Svelte 不依赖虚拟 DOM 进行 DOM 操作。相反，它在构建时生成针对目标平台的优化的 DOM 操作，从而提高了性能。
响应式声明式语法： Svelte 提供了简洁而强大的语法，使得声明式的状态管理和数据绑定变得容易。开发者可以通过直观的语法轻松表达组件的状态和交互。
自动更新： Svelte 自动追踪状态的变化，并在状态变化时更新相关的 DOM。这使得开发者无需手动编写繁琐的更新逻辑，提高了开发效率。
适用于各种规模的应用： Svelte 不仅适用于构建小型项目，还可以用于大型、复杂的应用程序。其架构能够轻松地扩展到处理更多的组件和状态。
组件级别的样式： Svelte 允许开发者将样式与组件直接关联，实现组件级别的样式隔离。这有助于提高样式的可维护性和可读性。
自动代码拆分： Svelte 支持自动代码拆分，它会根据组件的引入情况自动拆分代码，以提高应用程序的加载性能。

优点

性能优越： Svelte 在编译时生成高效的原生 JavaScript 代码，无需虚拟 DOM，因此具有卓越的性能。应用程序更轻量，加载更快。
简洁而强大的语法： Svelte 提供了清晰、简洁的语法，使得声明式的状态管理和数据绑定更加直观和容易理解。
编译时优化： Svelte 的编译时优化使得应用程序中只包含实际使用到的代码，有助于减小应用程序的体积，提高加载速度。
无虚拟 DOM： 不使用虚拟 DOM 意味着在更新时无需比对差异，减少了运行时的开销，提高了性能。
自动更新： Svelte 通过追踪状态变化来自动更新相关的 DOM，减少了手动编写更新逻辑的需求，提高了开发效率。
适用于大型应用： Svelte 不仅适用于小型项目，也适用于大型、复杂的应用程序，其架构能够轻松地扩展到处理更多的组件和状态。
组件级别的样式： Svelte 允许开发者将样式与组件直接关联，实现组件级别的样式隔离，提高了样式的可维护性和可读性。
自动代码拆分： Svelte 支持自动代码拆分，根据组件的引入情况自动拆分代码，提高了应用程序的加载性能。

缺点

相对较新： 相较于其他流行的前端框架（如React、Vue），Svelte 相对较新，因此生态系统相对较小，可能缺少一些第三方库和工具。
学习曲线： 对于习惯了传统前端框架的开发者来说，可能需要一些时间来适应 Svelte 的编写方式和概念。
灵活性： 一些开发者认为，Svelte 在某些方面的约定可能导致一些灵活性的丧失，特别是在处理复杂的定制场景时。
社区支持： 虽然 Svelte 的社区在不断增长，但相对于其他主流框架，仍然相对较小。这可能导致在解决问题时找到支持和资源的难度。

创建项目

npm create svelte@latest myapp
cd myapp
npm install
npm run dev

基础

特殊标签

<svelte:head> 动态修改head标签中的属性
<svelte:self>允许组件递归地包含自身
<svelte:component>可以修改一个组件的类别
<svelte:window> 如同事件可以监听 DOM 标签一样
<svelte:body>允许你添加事件监听document.body
<svelte:options> 允许你指定编译器选项

<svelte:window on:keydown={handleKeydown}/>

<svelte:body
on:mouseenter={handleMouseenter}
on:mouseleave={handleMouseleave}
/>

元素指令

on:事件名

使用on:指令来监听 DOM 事件

on:eventname={handler}
on:eventname|modifiers={handler}

修饰符：

preventDefault ：在程序运行之前调用 event.preventDefault()
stopPropagation ：调用 event.stopPropagation(), 防止事件到达下一个标签
passive ：改善了 touch/wheel 事件的滚动表现（Svelte会在合适的地方自动加上它）
capture：表示在 capture阶段而不是bubbling触发其程序
once ：程序运行一次后删除自身

alert-info 同一事件可以有多个事件侦听器

<button on:click={increment} on:click={track}>Click me!</button>

其他

指令	描述、示例
bind:属性	bind:property={variable}
组绑定	bind:group={variable}
bind:属性	bind:property={variable}
bind:this	针对传统的DOM节点，请使用 bind:this来绑定
class:name	指令可以以其简写形式绑定其标签的class。
use action	Action 作为一个方法用于标签被创建时调用。调用destroy函数返回表示标签被销毁。
transition:fn	transition:fn={params}
in:fn/out:fn	淡入淡出
animate:fn	动画

特殊指令

@html

@dubug

该{@debug ...}标签提供了console.log(...). 当特定变量的值发生变化时，它会记录它们，并在打开开发工具时暂停代码执行

@const ...

标签定义了一个局部常量

逻辑块

条件渲染 #if ...

列表渲染 #each... as ...

异步渲染

Store

订阅 subscribe

subscribe(this: void, run: Subscriber<T>, invalidate?: Invalidator<T>): Unsubscriber;

run订阅回调
invalidate清理回调

设置 set

set(this: void, value: T): void;

设置值并通知订阅者

更新 update

update(this: void, updater: Updater<T>): void;

使用回调更新值并通知订阅者。

获取 get

function get<T>(store: Readable<T>): T;

需要检索您未订阅的store的值。get允许您这样做.

可读 readable

可写 writable

派生 derived

从一个或多个store中派生出一个store

只读 readonly

生命周期函数

onMount

onMount函数安排回调在组件安装到 DOM 后立即运行。它必须在组件初始化期间调用（但不需要位于组件*内部；可以从外部模块调用它）

如果从返回一个函数onMount，则在卸载组件时将调用该函数。

beforUpdate

回调在任何状态更改后更新组件之前立即运行

afterUpdate

回调在组件更新后立即运行

tip: 回调第一次运行将在初始回调之后onMount

onDestroy

回调在组件卸载之前立即运行

上下文

父组件设置上下文

子组件获取上下文

判断context里面某个key是否存在

获取所有上下文里面的值

动画

一、transition

1、fade 淡入淡出

transition:fade={params}
in:fade={params}
out:fade={params}

2、blur 模糊

transition:blur={params}
in:blur={params}
out:blur={params}

3、fly 平移

transition:fly={params}
in:fly={params}
out:fly={params}

4、slide 滑动

transition:slide={params}
in:slide={params}
out:slide={params}

5、scale 缩放

transition:scale={params}
in:scale={params}
out:scale={params}

6、draw 对svg元素的笔画进行动画处理

transition:draw={params}
in:draw={params}
out:draw={params}

二、animate

1、flip函数计算元素的开始和结束位置，并在它们之间进行动画处理，转换`x`和`y`值

easing

ease	in	out	inOut
back	`backIn`	`backOut`	`backInOut`
bounce	`bounceIn`	`bounceOut`	`bounceInOut`
circ	`circIn`	`circOut`	`circInOut`
cubic	`cubicIn`	`cubicOut`	`cubicInOut`
elastic	`elasticIn`	`elasticOut`	`elasticInOut`
expo	`expoIn`	`expoOut`	`expoInOut`
quad	`quadIn`	`quadOut`	`quadInOut`
quart	`quartIn`	`quartOut`	`quartInOut`
quint	`quintIn`	`quintOut`	`quintInOut`
sine	`sineIn`	`sineOut`	`sineInOut`

结束

以上是svelte的一些基础api和使用方法。

无虚拟DOM的框架-Svelte（基础）

简介

特点

优点

缺点