Svelte 最新中文文档翻译(10)—— use: 与 Actions

前言

Svelte,一个非常"有趣"、用起来"很爽"的前端框架。从 Svelte 诞生之初,就备受开发者的喜爱,根据统计,从 2019 年到 2024 年,连续 6 年一直是开发者最感兴趣的前端框架 No.1

Svelte 以其独特的编译时优化机制著称,具有轻量级高性能易上手 等特性,非常适合构建轻量级 Web 项目,也是我做个人项目的首选技术栈。

目前 Svelte 基于 Svelte 5 发布了最新的官方文档,但却缺少对应的中文文档。为了帮助大家学习 Svelte,为爱发电翻译了官方文档。

我同时搭建了 Svelte 最新的中文文档站点:svelte.yayujs.com ,如果需要辅助学习,也可以入手我的小册《Svelte 开发指南》,语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte!

虽说是翻译,但个人并不喜欢严格遵守原文,为了保证中文阅读流畅,会删减部分语句,对难懂的部分也会另做补充解释,希望能给大家带来一个好的中文学习体验。

欢迎围观我的"朋友圈"、加入"低调务实优秀中国好青年"前端社群,分享技术,带你成长。

use:

Actions(动作)是在元素挂载时调用的函数。它们通过 use: 指令添加,通常会使用 $effect 以便在元素卸载时重置任何状态:

svelte 复制代码
<!--- file: App.svelte --->
<script>
  /** @type {import('svelte/action').Action} */
  function myaction(node) {
    // 节点已被挂载到 DOM 中

    $effect(() => {
      // 这里进行设置

      return () => {
        // 这里进行清理
      };
    });
  }
</script>

<div use:myaction>...</div>

action 可以带参数调用:

svelte 复制代码
<!--- file: App.svelte --->
<script>
  /** @type {import('svelte/action').Action} */
  function myaction(node, +++data+++) {
    // ...
  }
</script>

<div use:myaction={+++data+++}>...</div>

action 只会调用一次(但在服务端渲染期间不会调用)------ 即使参数发生变化也不会再次运行。

!LEGACY\] 在 `$effect` 符文出现之前,action 可以返回一个带有 `update` 和 `destroy` 方法的对象,如果参数发生变化,`update` 将被调用并使用最新的参数值。现在推荐使用 effects。

类型定义

Action 接口接收三个可选的类型参数 ------ 节点类型(可以是 Element,如果 action 适用于所有元素)、参数,以及由 action 创建的任何自定义事件处理程序:

svelte 复制代码
<!--- file: App.svelte --->
<script>
  import { on } from 'svelte/events';

  /**
   * @type {import('svelte/action').Action<
   * 	HTMLDivElement,
   * 	null,
   * 	{
   * 	   onswiperight: (e: CustomEvent) => void;
   * 	   onswipeleft: (e: CustomEvent) => void;
   * 		// ...
   * }>}
   */
  function gestures(node) {
    $effect(() => {
      // ...
      node.dispatchEvent(new CustomEvent('swipeleft'));

      // ...
      node.dispatchEvent(new CustomEvent('swiperight'));
    });
  }
</script>

<div
  use:gestures
  onswipeleft={next}
  onswiperight={prev}
>...</div>

Svelte 中文文档

本篇已收录在掘金专栏 《Svelte 中文文档》,该系列预计 40 篇。

系统学习 Svelte,欢迎入手小册《Svelte 开发指南》。语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte!

此外我还写过 JavaScript 系列TypeScript 系列React 系列Next.js 系列冴羽答读者问等 14 个系列文章, 全系列文章目录:github.com/mqyqingfeng...

通过文字建立交流本身就是一种缘分,欢迎围观我的"朋友圈"、加入"低调务实优秀中国好青年"前端社群,分享技术,带你成长。

相关推荐
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20207 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术7 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing7 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止8 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall8 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴8 小时前
简单入门Python装饰器
前端·python
袁煦丞9 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作