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中,可以使用<script>标签导入所需的JavaScript模块。例如:

<script>  import { add } from './math.js';  
</script>

2. 组件声明

在Svelte中,可以使用<script>标签声明组件的逻辑部分。例如:

<script>  let count = 0;  function increment() {  count++;  }  
</script>

3. 模板部分

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

<h1>Hello, World!</h1>  
<button on:click={increment}>Increment</button>

4. CSS样式

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

<style>  h1 {  color: red;  }  
</style>

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

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

二、运行时阶段

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

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

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

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

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

三、生命周期函数

1. onMount

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

<script>import { onMount } from 'svelte';onMount(() => {// 在组件被插入到 DOM 后执行初始化操作console.log('组件已插入到 DOM');});
</script>

2. beforeUpdate 与 afterUpdate

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

<script>import { beforeUpdate, afterUpdate } from 'svelte';let count = 0;beforeUpdate(() => {// 在组件更新之前执行操作console.log('组件将要更新');});afterUpdate(() => {// 在组件更新之后执行操作console.log('组件已更新');});function increment() {count++;}
</script><button on:click={increment}>增加</button>
<p>计数:{count}</p>

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

3. onDestroy

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

<script>import { onDestroy } from "svelte";// 初始化操作,比如开启一个定时器const timer = setInterval(() => {console.log("timer");}, 1000);onDestroy(() => {// 组件销毁前执行清理操作,比如取消定时器clearInterval(timer);});
</script>

4. setContext 与 getContext

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

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

Parent.svelte:

<script>import { setContext } from 'svelte';import Child from './Child.svelte';let message = 'Hello';setContext('message', message);
</script><div>我是Parent,我传递了{message}</div>
<Child />

Child.svelte:

<script>import Grandson from "./Grandson.svelte";
</script><div>我是Child</div>
<Grandson />

Grandson:

<script>import { getContext } from "svelte";let message = getContext("message");</script><div>我是Grandson:我接受了{message}</div>

页面:

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

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

Brother.svelte:

<script>import { getContext } from "svelte";let message = getContext("message");let test = getContext("test");
</script><div>我是Brother:我接受了{message}</div>
<div>我是Brother:我接受了{test}</div>

修改后的Child.svelte:

<script>import Grandson from "./Grandson.svelte";import { setContext } from "svelte";let test = "非同祖先组件传递的数据";setContext("message", test);
</script><div>我是Child,我传递了{test}</div>
<Grandson />

修改后的Parent.svelte:

<script>import { setContext } from 'svelte';import Child from './Child.svelte';import Brother from './Brother.svelte';let message = 'Hello';setContext('message', message);
</script><div>我是Parent,我传递了{message}</div>
<Child />
<Brother />

页面:

6. hasContext

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

<script>import { hasContext } from 'svelte';if (hasContext('message')) {// do something}
</script>

7. getAllContexts

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

<script>import { getAllContexts } from 'svelte';const contexts = getAllContexts();
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/101881.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

装饰器模式和 AOP 面向切片编程(设计模式与开发实践 P15)

文章目录 示例AOP 很多时候我们不希望一个类变得非常庞大&#xff0c;生来就包含很多职责。装饰器模式可以动态地给某个对象添加职责&#xff0c;而不会影响从这个类中派生的其他对象 为什么不用继承解决这个问题呢&#xff1f;如果用继承有可能会创造出数量庞大的子类&#x…

聚观早报 | 首个“5G-A智慧家庭”发布;李鹏称5G-A是5G发展选择

【聚观365】10月12日消息 首个“5G-A智慧家庭”发布 李鹏称5G-A是5G发展的自然选择 新版努比亚Z50S Pro开售 英特尔锐炫A580显卡全球同步上市 vivo X100系列年底登场 首个“5G-A智慧家庭”发布 在全球移动宽带论坛&#xff08;MBBF2023&#xff09;期间&#xff0c;du联合…

这些负载均衡都解决哪些问题?服务、网关、NGINX

这篇文章解答一下群友的一系列提问&#xff1a; 在微服务项目中&#xff0c;有服务的负载均衡、网关的负载均衡、Nginx的负载均衡&#xff0c;这几个负载均衡分别用来解决什么问题呢&#xff1f; 在微服务项目中&#xff0c;服务的负载均衡、网关的负载均衡和Nginx的负载均衡都…

04_学习springdoc与oauth结合_简述

文章目录 1 前言2 基本结构3 需要做的配置 简述4 需要做的配置 详述4.1 backend-api-gateway 的配置4.1.1 application.yml 4.2 backend-film 的配置4.2.1 pom.xml 引入依赖4.2.2 application.yml 的配置4.2.3 Spring Security 资源服务器的配置类 MyResourceServerConfig4.2.4…

uniapp iosApp H5+本地文件操作(写入修改删除等)

h5 地址 html5plus 以csv文件为例&#xff0c;写入读取保存修改删除文件内容&#xff0c;传输文件等 1.save 文件保存 function saveCsv(data,pathP,path){// #ifdef APP-PLUSreturn new Promise((resolve, reject) > {plus.io.requestFileSystem( plus.io.PUBLIC_DOCUMEN…

WIN32API之PIPE管道

管道是进程用于通信的共享内存的一部分。 创建管道的过程是 管道服务器。 连接到管道的进程是 管道客户端。 一个进程将信息写入管道&#xff0c;另一个进程从管道读取信息。 本概述介绍如何创建、管理和使用管道。 命名管道是用于管道服务器与一个或多个管道客户端之间通信的…

vue打印功能

安装 vue3-print-nb yarn add vue3-print-nb //或 npm install vue3-print-nbmain.js中引入 vue3-print-nb import { createApp } from vue; import App from ./App.vue; const app createApp(App); // 打印插件 import print from vue3-print-nb app.use(print) //页面内引…

【Docker 内核详解】namespace 资源隔离(一):进行 namespace API 操作的 4 种方式

namespace 资源隔离&#xff08;一&#xff09;&#xff1a;进行 namespace API 操作的 4 种方式 1.通过 clone() 在创建新进程的同时创建 namespace2.查看 /proc/[pid]/ns 文件3.通过 setns() 加入一个已经存在的 namespace4.通过 unshare() 在原先进程上进行 namespace 隔离5…

Webapck 解决:[webpack-cli] Error: Cannot find module ‘vue-loader/lib/plugin‘ 的问题

1、问题描述&#xff1a; 其一、报错为&#xff1a; [webpack-cli] Error: Cannot find module vue-loader/lib/plugin 中文为&#xff1a; [webpack-cli] 错误&#xff1a;找不到模块“vue-loader/lib/plugin” 其二、问题描述为&#xff1a; 在项目打包的时候 npm run …

c++视觉图像----扩充边界

图像扩充边界 #include <opencv2/opencv.hpp> #include <opencv2/highgui/highgui.hpp>int main() {// 读取图像cv::Mat image cv::imread("1.jpg", cv::IMREAD_COLOR);if (image.empty()) {std::cerr << "Could not open or find the imag…

Java项目调用Python脚本(基于idea)

前期准备 1.首先需要在本地环境中安装配置python环境 Python(含PyCharm及配置)下载安装以及简单使用(Idea) 博主本次使用python版本为py3.7.3 2.idea安装python插件 位置&#xff1a;File->Settings->Plugins->python->安装后重启即可 3.引入jython依赖 &l…

力扣 -- 1312. 让字符串成为回文串的最少插入次数

解题步骤&#xff1a; 参考代码&#xff1a; class Solution { public:int minInsertions(string s) {int ns.size();vector<vector<int>> dp(n,vector<int>(n));//无需初始化//填表for(int in-1;i>0;i--){for(int ji;j<n;j){//状态转移方程if(s[i]s[…

如何在 Spring Boot 中进行数据备份

在Spring Boot中进行数据备份 数据备份是确保数据安全性和可恢复性的关键任务之一。Spring Boot提供了多种方法来执行数据备份&#xff0c;无论是定期备份数据库&#xff0c;还是将数据导出到外部存储。本文将介绍在Spring Boot应用程序中进行数据备份的不同方法。 方法1: 使用…

【深度学习实验】循环神经网络(一):循环神经网络(RNN)模型的实现与梯度裁剪

目录 一、实验介绍 二、实验环境 1. 配置虚拟环境 2. 库版本介绍 三、实验内容 0. 导入必要的工具包 1. 数据处理 2. rnn 测试 3. grad_clipping 4. 代码整合 经验是智慧之父&#xff0c;记忆是智慧之母。 ——谚语 一、实验介绍 本实验介绍了一个简单的循环神经网络…

如何优化前端图像和多媒体资源?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

电子书制作软件Vellum mac中文版特点

Vellum mac是一款专业的电子书制作软件&#xff0c;它可以帮助用户将文本文件转换为高质量的电子书&#xff0c;支持多种格式&#xff0c;包括EPUB、MOBI、PDF等。Vellum具有直观的用户界面和易于使用的工具&#xff0c;可以让用户快速地创建和发布电子书。 Vellum mac软件特点…

追求极致性能!Qwik 1.0版本发布

前言 偶然发现 Qwik 这个 Node.js 后端框架&#xff0c;感觉非常新奇&#xff0c;它构建的网站&#xff0c;能够在谷歌的网站评测工具中跑出100分满分的成绩&#xff0c;而且还是移动端&#xff08;一般情况下&#xff0c;移动端分值要低于PC端&#xff09;&#xff01;不得不…

IDEA XML文件里写SQL比较大小条件

背景 最近开发的时候&#xff0c;有一个需求的查询需要支持范围查询[a,b)&#xff0c;并且查询的结果要求查询的范围含头端点不含尾端点。因为between…and…查询的范围是含头含尾的&#xff0c;因而不能使用。 因此打算直接使用>和<来比较实现&#xff0c;使用>的时…

【Redis】Set集合内部编码方式

内部编码 集合类型的内部编码有两种&#xff1a; intset&#xff08;整数集合&#xff09;&#xff1a;当集合中的元素都是整数并且元素的个数⼩于set-max-intset-entries配置&#xff08;默认512个&#xff09;时&#xff0c;Redis会选⽤intset来作为集合的内部实现&#xf…

与艺术同频!卡萨帝在海外崭露头角

在品牌全球化步伐日益加快的当下&#xff0c;高端品牌如何真正实现业务全球化、品牌全球化乃至用户圈层全球化&#xff1f; 作为国际高端家电引领者&#xff0c;卡萨帝今年以来在全球范围内展开了一系列的品牌布局活动。1月&#xff0c;卡萨帝于巴基斯坦召开品牌发布会&#x…