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

简介

Svelte是干什么的？Svelte 是一个用于构建 Web 应用程序的工具

Svelte 在 构建/编译阶段 将你的应用程序转换为理想的 JavaScript 应用，而不是在 运行阶段 解释应用程序的代码。

特点

• 编译时：Svelte 将尽可能多的工作从浏览器转移到构建步骤中。不再需要手动优化------只有更快、更高效的应用程序。
• 体积小：使用您已知的语言（HTML、CSS 和 JavaScript）编写极其简洁的组件。你的应用程序包也会很小。
• 完整：内置scoped styling、状态管理、动画、表单绑定等等------不要浪费时间在 npm 中寻找最基本的东西。一切都在这里。
• 开发、使用 ：
  1. 每个svelte组件的样式是隔离的
  2. svelte兼容ES2018
  3. 将逻辑（JavaScript）、结构（HTML）和样式（CSS）收集在同一个文件中，让代码易于阅读和维护
  4. 开箱即用的全局状态管理
  5. 内置辅助功能和未使用的CSS检查
  6. 组件自动导出
  7. 默认设置样式
  8. 内置了效果和动画
  9. 标签语句的响应能力（在要响应的变量前面放置一个美元符号）

创建项目

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是否存在

获取所有上下文里面的值

结束

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