Svelte生命周期（加整体概述）

目录

前言

一、编译阶段

1. 导入语句

2. 组件声明

3. 模板部分

4. CSS样式

二、运行时阶段

三、生命周期函数

1. onMount

2. beforeUpdate 与 afterUpdate

3. onDestroy

4. setContext 与 getContext

6. hasContext

7. getAllContexts

---

前言

Svelte是一种现代的JavaScript框架，用于构建高效且响应式的Web应用程序。它采用了独特的编译方式，将组件编译为高效的原生代码，从而提供更好的性能和用户体验。在Svelte的生命周期中，有许多重要的阶段，包括编译、运行时和组件的生命周期。

一、编译阶段

Svelte的编译阶段主要涉及将Svelte组件转换为可执行的JavaScript代码。在Svelte中，组件通常以.svelte文件的形式存在，并使用特殊的语法和指令。在编译过程中，Svelte编译器会解析组件文件，并将其转换为可执行的JavaScript代码。

1. 导入语句

在Svelte中，可以使用

2. 组件声明

在Svelte中，可以使用

3. 模板部分

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

Hello, World!
  
Increment

4. CSS样式

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

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

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

二、运行时阶段

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

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

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

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

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

三、生命周期函数

1. onMount

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

2. beforeUpdate 与 afterUpdate

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

增加
计数：{count}

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

3. onDestroy

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

4. setContext 与 getContext

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

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

Parent.svelte：

我是Parent，我传递了{message}

Child.svelte:

我是Child

Grandson:

  
  
我是Grandson：我接受了{message}

页面：

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

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

Brother.svelte：

我是Brother：我接受了{message}
我是Brother：我接受了{test}

修改后的Child.svelte：

我是Child，我传递了{test}

修改后的Parent.svelte：

我是Parent，我传递了{message}

页面：

6. hasContext

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

7. getAllContexts

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