来源：Svelte 中文文档 | Svelte 中文网

之前不是在学html，css嘛，JavaScript有点多，还没整理完，因为svelte紧急！现在就需要了

svelte前提先对html，css，JavaScript有基本的了解

---

什么是Svelte？

Svelte 是一个构建 web 应用程序的工具。

Svelte 与诸如 React 和 Vue 等 JavaScript 框架类似，都怀揣着一颗让构建交互式用户界面变得更容易的心。

但是有一个关键的区别：Svelte 在 构建/编译阶段 将你的应用程序转换为理想的 JavaScript 应用，而不是在运行时进行虚拟DOM操作。这意味着你不需要为框架所消耗的性能付出成本，并且在应用程序首次加载时没有额外损失。

你可以使用 Svelte 构建整个应用程序，也可以逐步将其融合到现有的代码中。你还可以将组件作为独立的包（package）交付到任何地方，并且不会有传统框架所带来的额外开销。

在传统的前端框架中，比如React和Vue，页面上的每个组件都有一个虚拟 DOM 对象与之对应。虚拟 DOM 是一个虚拟的、内存中的 DOM 树，它是对真实 DOM 的一种轻量级映射。当组件状态发生变化时，框架会通过比较新旧虚拟 DOM 来计算出需要更新的部分，然后将这些变化应用到真实的 DOM 上，从而更新页面的显示。

而在 Svelte 中，不存在虚拟 DOM。相反，Svelte 在编译阶段会分析组件的代码，并生成对应的 JavaScript 代码，这些代码会直接操作 DOM，而不是通过虚拟 DOM。换句话说，Svelte 在构建应用程序时，会把页面更新的逻辑直接写入最终的 JavaScript 代码中，而不是在运行时动态生成。

这种直接操作 DOM 的方式使得 Svelte 在性能上有很大的优势，因为它避免了虚拟 DOM 的性能开销，并且减少了在页面更新时的计算量。这也意味着 Svelte 生成的代码更加轻量级，加载和执行速度更快，从而提高了应用程序的性能和响应速度。

---

动态变量

要想显示hello world很简单，就直接加一个标签就好了

Hello world!

但我们可以向组件里面添加标签来声明一个name变量，然后就可以在下面的标签引用name变量了：

	let name = 'world';

Hello {name}!

在花括号内，我们可以放置任何我们想要的 JavaScript 代码。可以把 name 改为 name.toUpperCase() 【变成大写】

同样的，就像使用花括号可以控制文本，花括号也可以控制元素属性

	let src = 'tutorial/image.gif';
	let name = 'Rick Astley';

---

CSS样式

就像在 HTML 中一样，可以向组件添加一个  标签，来美化

	p {
		color: purple;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}

This is a paragraph.

整个应用程序放在一个组件中是不切实际的。相反，我们可以从其他文件导入组件并包含它们，就好像我们包含 HTML 元素一样。

app.svelte

	import Nested from './Nested.svelte'; 
    //从Nested.svelte导入标签


	p {
		color: purple;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}

This is a paragraph.

Nested.svelte

This is another paragraph.

尽管 Nested.svelte 有一个

元素，但 App.svelte 中的样式是不会溢出的（也就是不会影响 Nested.svelte 中的

元素）。 还需要注意的是，组件名称 Nested 的首字母大写。采用此约定是为了使我们能够区分用户自定义的组件和一般的 HTML 标签。

---

HTML标签

通常，字符串以纯文本形式插入，这意味着像  这样的字符没有特殊的含义。

但有时需要将 HTML 直接绘制到组件中。在 Svelte 中，你可以使用特殊标记 {@html ...} 实现：

	let string = `this string contains some HTML!!!`;

{@html string}

在将表达式的输出插入到 DOM 之前，Svelte 不会对 {@html ...} 内的表达式的输出做任何清理的。换言之，如果使用此功能，则必须手动转义来自不信任源的 HTML 代码，否则会使用户面临 XSS 攻击的风险。

---

反应性能力

Svelete 的内核是一个强大的 （反应性）reactivity 系统，能够让 DOM 与你的应用程序状态保持同步

比如说事件响应，可以在button标签中添加一个事件处理器，

在script中增加一个响应函数，最后也就是这样子

	let count = 0;
	function handleClick() {
	count += 1;
}


	Clicked {count} {count === 1 ? 'time' : 'times'}

Svelte 其实是将此赋值语句替换为一些代码，这些代码将通知 Svelte 更新 DOM

当组件的状态改变时，Svelte 会自动更新 DOM。通常，组件状态的某些部分需要通过 其它 部分的计算而得出（例如 fullname 就是 firstname 和 lastname 的合体），并在 其它 部分更改时重新计算。

$:doubled=count*2

这是 Svelte 中的响应式声明语法。$: 表示一个响应式声明，它会在相关的响应式变量（这里是 count）发生变化时重新计算其后面的表达式。

	let count = 0;
	$: doubled = count * 2;
	function handleClick() {
		count += 1;
	}


	Clicked {count} {count === 1 ? 'time' : 'times'}

{count} doubled is {doubled}

svelte不仅提供了声明反应式的值，还可以运行反应式的语句

	let count = 0;
	$: if (count >= 10) {
		alert(`count is dangerously high!`);
		count = 9;
	}
	function handleClick() {
		count += 1;
	}


	Clicked {count} {count === 1 ? 'time' : 'times'}

更新数组和对象

由于 Svelte 的反应性是由赋值语句触发的，因此使用数组的诸如 push 和 splice 之类的方法就不会触发自动更新。例如，点击按钮就不会执行任何操作。

	let numbers = [1, 2, 3, 4];
	function addNumber() {
		numbers = [...numbers, numbers.length + 1];
	}
	$: sum = numbers.reduce((t, n) => t + n, 0);

{numbers.join(' + ')} = {sum}

	Add a number

function addNumber()

{ numbers = [...numbers, numbers.length + 1]; }:

这是一个名为 addNumber 的函数，用于向数组 numbers 中添加一个新的数字。它通过将原始数组 numbers 展开成一个新的数组，然后在末尾添加一个新的数字，这个数字是数组长度加 1 来实现添加操作。

赋值给数组和对象的 属性（properties） （例如，obj.foo += 1 或 array[i] = x）与对值本身进行赋值的方式相同。

function addNumber() {
	numbers[numbers.length] = numbers.length + 1;
}

一个简单的经验法则是：被更新的变量的名称必须出现在赋值语句的左侧。例如下面这个：

const foo = obj.foo;
foo.bar = 'baz';

就不会更新对 obj.foo.bar 的引用，除非使用 obj = obj 方式。