3. 模板部分

在Svelte中，可以使用HTML语法来定义组件的外观和结构。例如：

Hello, World!
  
<button on:click={increment}>Incrementbutton>

4. CSS样式

在Svelte中，可以使用CSS语法来定义组件的样式。例如：

在编译阶段结束时，Svelte编译器将生成可执行的JavaScript代码，用于在浏览器中运行。

强推svelte官网提供的REPL，可供学习和查看编译后的代码！

二、运行时阶段

在运行时阶段，Svelte应用程序开始执行并响应用户的交互。Svelte应用程序由多个组件组成，每个组件都包含一个独立的运行时环境。当用户与应用程序交互时，每个组件都会根据其逻辑和模板进行相应的更新和渲染。

创建组件实例：在Svelte应用程序中，每个组件都是一个独立的实例。当组件被加载时，Svelte会创建一个新的实例，并将其存储在内存中。

更新状态：当用户与应用程序交互时，组件的状态可能会发生变化。例如，当用户点击按钮时，计数器的值会增加。这些状态变化将触发组件的更新和重新渲染。

重新渲染：当组件的状态发生变化时，Svelte会重新计算组件的外观和结构，并更新DOM。在Svelte中，重新渲染是一个轻量级的操作，因为只有在状态发生变化时才会进行。这使得Svelte具有很高的性能和响应性。

销毁组件：当组件不再需要时，Svelte会将其从内存中删除，以释放资源。在销毁过程中，组件的生命周期函数将被调用，以便进行必要的清理和资源释放。

三、生命周期函数

1. onMount

在组件挂载到DOM后执行。常用于初始化异步操作或执行DOM操作。

2. beforeUpdate 与 afterUpdate

在组件更新之前和之后触发，可用于在更新前后进行一些操作。

 
<button on:click={increment}>增加button>
<p>计数：{count}p>

这里需要注意，组件初始化会触发第一次，后面点击后再次触发。

3. onDestroy

组件被销毁之前触发，可用于清理资源或取消订阅。

4. setContext 与 getContext

这是一对特殊的生命周期函数，将任意 context 对象与当前组件和指定的 key 关联并返回该对象和检索属于具有指定 key 的最近父组件的上下文。

可以用于同祖先的组件之间的数据传递，而不必像父向子传值一样一层一层传下去。必须在组件初始化期间调用它。这里很像Vue的provide和inject。

Parent.svelte：

 
<div>我是Parent，我传递了{message}div>
<Child />
 

Child.svelte:

 
<div>我是Childdiv>
<Grandson />

Grandson:

  
  <div>我是Grandson：我接受了{message}div>

页面：

注意： 非同组先的组件，传递数据会失败。

比如Parent.svelte里面新增一个和Child.svelte同级的Brother.svelte组件，并从Child.svelte传递新的值test，Brother.svelte就接收不到。因为Child.svelte和Brother.svelte同级，它传递出来的数据只能由它的后代组件接收。

Brother.svelte：

 
<div>我是Brother：我接受了{message}div>
<div>我是Brother：我接受了{test}div>

修改后的Child.svelte：

 
<div>我是Child，我传递了{test}div>
<Grandson />

修改后的Parent.svelte：

 
<div>我是Parent，我传递了{message}div>
<Child />
<Brother />
 

页面：

6. hasContext

检查是否已在父组件的上下文中设置给定的 key 。必须在组件初始化期间调用。

7. getAllContexts

检索属于最近父组件的整个上下文映射。必须在组件初始化期间调用。