Svelte 最新中文文档教程（17）—— 生命周期钩子

前言

Svelte，一个语法简洁、入门容易，面向未来的前端框架。从 Svelte 诞生之初，就备受开发者的喜爱，根据统计，从 2019 年到 2024 年，连续 6 年一直是开发者最感兴趣的前端框架 No.1：

Svelte 以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级 Web 项目，也是我做个人项目的首选技术栈。
目前 Svelte 基于 Svelte 5 发布了最新的官方文档，但却缺少对应的中文文档。为了帮助大家学习 Svelte，为爱发电翻译了官方文档。
我同时搭建了 Svelte 最新的中文文档站点：https://svelte.yayujs.com ，如果需要辅助学习，也可以入手我的小册《Svelte 开发指南》，语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！
虽说是翻译，但个人并不喜欢严格遵守原文，为了保证中文阅读流畅，会删减部分语句，对难懂的部分也会另做补充解释，希望能给大家带来一个好的中文学习体验。
欢迎围观我的“网页版朋友圈”、加入“冴羽·成长陪伴社群”，踏上前端大佬成长之路。
生命周期钩子

在 Svelte 5 中，组件生命周期仅由两部分组成：创建和销毁。中间的一切，比如当某些状态更新时，与整个组件无关，只有需要对状态变化做出响应的部分才会得到通知。
这是因为在底层，变化的最小单位实际上并不是组件，而是组件在初始化时设置的（渲染）effects。因此，不存在"更新前"/"更新后"这样的钩子。
onMount

onMount 函数传入一个回调函数，在组件挂载到 DOM 后立即运行。它必须在组件初始化期间被调用（但不需要位于组件内部；可以从外部模块调用）。
onMount 不会在服务端渲染的组件中运行。

1. [/code]如果 onMount 返回一个函数，它将在组件卸载时被调用。
2. [code]

复制代码

[!NOTE] 这种行为只在传递给 onMount 的函数同步返回值时才有效。async 函数总是返回一个 Promise，因此不能同步返回一个函数。

onDestroy

安排一个回调在组件卸载前立即运行。
```dtsfunction onDestroy(fn: () => any): void;```在 onMount、beforeUpdate、afterUpdate 和 onDestroy 中，这是唯一一个在服务端组件内运行的。

1. [/code][size=5]tick[/size]
3. 虽然没有"更新后"钩子，但你可以使用 tick 来确保在继续之前 UI 已更新。tick 返回一个 promise，该 promise 在所有待处理的状态更改被应用后 resolve，如果没有待处理的状态更改，则在下一个微任务中 resolve。
4. [code]

复制代码

已废弃：beforeUpdate / afterUpdate

Svelte 4 有两个在组件整体更新前后运行的钩子。为了向后兼容，这些钩子在 Svelte 5 中被模拟实现，但在使用符文的组件中不可用。

1. [/code]不要使用 beforeUpdate，应该使用 $effect.pre；不要使用 afterUpdate，应该使用 $effect — 这些符文提供更细粒度的控制，只对你实际关心的更改做出响应。
2. [size=4]聊天窗口示例[/size]
4. 我们来实现一个聊天窗口，当出现新消息时自动滚动到底部（前提是你已经滚动到底部了），我们需要在更新 DOM 之前先测量它。
5. 在 Svelte 4 中，我们使用 beforeUpdate 来实现，但这是一个有缺陷的方法 — 它在每次更新前都会触发，无论是否相关。在下面的示例中，我们需要引入像 updatingMessages 这样的检查，以确保在有人切换暗黑模式时不会影响滚动位置。
6. 使用符文，我们可以使用 $effect.pre，它的行为与 $effect 相同，但在 DOM 更新之前运行。只要我们在 effect 内明确引用 messages，它就会在 messages 改变时运行，而在 theme 改变时不会运行。
7. 因此，beforeUpdate 以及同样麻烦的小伙伴 afterUpdate 在 Svelte 5 中已被废弃。
8. [list]
9. [*]之前
10. [*]之后
11. [/list][code]  
12.     {#each messages as message}
13.       <p>{message}</p>
14.     {/each}
15.   
17.   <input +++onkeydown+++={handleKeydown} />
19.   <button +++onclick+++={toggle}> 切换暗黑模式 </button>

复制代码

Svelte 中文文档

本篇已收录在掘金专栏 《Svelte 中文文档》，该系列预计 40 篇。
系统学习 Svelte，欢迎入手小册《Svelte 开发指南》。语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！
此外我还写过 JavaScript 系列、TypeScript 系列、React 系列、Next.js 系列、冴羽答读者问等 14 个系列文章， 全系列文章目录：https://github.com/mqyqingfeng/Blog
欢迎围观我的“网页版朋友圈”、加入“冴羽·成长陪伴社群”，踏上前端大佬成长之路。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！