【前端】Svelte:响应性声明

Svelte 的响应性声明机制简化了动态更新 UI 的过程,让开发者不需要手动追踪数据变化。通过 $ 前缀与响应式声明语法,Svelte 能够自动追踪依赖关系,实现数据变化时的自动重新渲染。在本教程中,我们将详细探讨 Svelte 的响应性声明机制,包括使用 $ 前缀、响应式声明块的编写,以及在数据展示项目中的应用。

Svelte 响应性声明概述

在 Svelte 中,响应性机制意味着当变量值发生变化时,依赖该变量的部分会自动重新渲染。Svelte 提供两种主要方式来实现响应性:

  1. $ 前缀:在响应式变量或表达式前加 $,即可让其在变化时触发 UI 更新。
  2. 响应式声明块:使用 $: <表达式> 声明一个响应式表达式,当其中的变量改变时,表达式会重新执行。

使用 $ 前缀实现响应式变量

在 Svelte 中,变量前加 $ 前缀即可实现响应式行为,确保在数据变化时自动更新界面。以下是一个简单的示例:

<script>let count = 0;// 当 count 变化时,自动更新 doubleCount$: doubleCount = count * 2;function increment() {count += 1;}
</script><button on:click={increment}>Increment</button>
<p>Count: {count}</p>
<p>Double of Count: {doubleCount}</p>

解释

  • count 是一个普通变量,increment 函数每次点击按钮都会增加 count 的值。
  • doubleCount 是一个响应式变量,通过 $: doubleCount = count * 2; 声明,每当 count 发生变化时,doubleCount 也会随之更新。

响应式声明块 $:

Svelte 提供了响应式声明块 $:,用于声明带有依赖关系的表达式。每当表达式中依赖的变量发生变化时,表达式会自动重新计算并更新。

示例:响应多个变量

<script>let num1 = 10;let num2 = 20;// 当 num1 或 num2 变化时,sum 自动更新$: sum = num1 + num2;
</script><input type="number" bind:value={num1} placeholder="Enter first number">
<input type="number" bind:value={num2} placeholder="Enter second number"><p>Sum of {num1} and {num2} is {sum}</p>

在这个示例中,sumnum1num2 的和。每当 num1num2 发生变化时,sum 会自动重新计算并更新 UI。

对象与数组的响应性

在 Svelte 中,对象和数组的属性更新需要特别注意。因为 Svelte 的响应式机制是基于变量重新赋值而触发的,直接更新对象或数组中的属性并不会自动触发响应。

示例:对象响应性

<script>let person = { name: 'Alice', age: 25 };function updateAge() {// 更新 age 属性,但不会触发响应式更新person.age += 1;}// 手动触发响应性更新$: person = { ...person };
</script><p>Name: {person.name}</p>
<p>Age: {person.age}</p>
<button on:click={updateAge}>Increase Age</button>

在这里,更新对象的属性不会触发 UI 更新,除非我们用 person = { ...person } 手动触发重新赋值,确保 Svelte 识别到变化并更新 UI。

示例:数组响应性

<script>let items = ['apple', 'banana'];function addItem() {// 更新数组,但不会自动触发响应式更新items.push('cherry');// 手动触发响应性更新items = [...items];}
</script><ul>{#each items as item}<li>{item}</li>{/each}
</ul>
<button on:click={addItem}>Add Item</button>

在这里,我们使用 items = [...items] 执行重新赋值,以确保 Svelte 识别到数组的更新并重新渲染 UI。

小型数据展示项目示例

下面我们将构建一个小型项目,演示如何利用响应性机制构建动态数据展示功能。该项目允许用户输入关键词并动态过滤数据列表。

功能需求

  1. 用户输入关键词,实时过滤列表数据。
  2. 显示符合条件的列表项。

实现步骤

  1. 定义一个数据列表并绑定输入框。
  2. 使用响应式声明块过滤数据。

代码实现

<script>let searchTerm = '';let items = ['Svelte','React','Vue','Angular','Ember','Backbone'];// 过滤 items 列表,获取包含 searchTerm 的项$: filteredItems = items.filter(item => item.toLowerCase().includes(searchTerm.toLowerCase()));
</script><input type="text" bind:value={searchTerm} placeholder="Search framework">
<p>Searching for: {searchTerm}</p><ul>{#each filteredItems as item}<li>{item}</li>{/each}
</ul>

代码说明

  • searchTerm:用户输入的搜索关键词。
  • items:数据列表。
  • $: filteredItems:使用响应式声明块定义的过滤结果,自动依赖 searchTerm 的变化。

当用户在输入框中输入内容时,filteredItems 自动更新并显示符合条件的列表项。

综合示例:实时数据展示

我们再来看一个更为复杂的项目,实时展示传感器数据,包括温度、湿度和空气质量指数。该项目的界面根据数据变化动态更新状态显示。

<script>let temperature = 20;let humidity = 50;let airQuality = 100;// 根据不同数据变化情况显示状态$: temperatureStatus = temperature > 30 ? 'High' : 'Normal';$: humidityStatus = humidity > 60 ? 'High' : 'Normal';$: airQualityStatus = airQuality > 150 ? 'Poor' : 'Good';// 模拟数据更新function updateData() {temperature = Math.floor(Math.random() * 40);humidity = Math.floor(Math.random() * 100);airQuality = Math.floor(Math.random() * 200);}
</script><button on:click={updateData}>Update Data</button><h2>Real-Time Sensor Data</h2>
<p>Temperature: {temperature}°C - Status: {temperatureStatus}</p>
<p>Humidity: {humidity}% - Status: {humidityStatus}</p>
<p>Air Quality Index: {airQuality} - Status: {airQualityStatus}</p>

解释

  • 定义 temperaturehumidityairQuality 变量模拟实时传感器数据。
  • 使用响应性声明块 temperatureStatushumidityStatusairQualityStatus 来动态更新状态。
  • 通过 updateData 函数模拟数据更新,从而实时更新展示。

总结

Svelte 的响应性声明机制通过 $ 前缀和响应式声明块,让 UI 能够自动响应数据变化,简化了开发者手动处理依赖关系的过程。无论是构建简单的交互界面还是复杂的实时数据展示,Svelte 的响应性声明机制都能显著提高开发效率。

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

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

相关文章

项目总结(3)

一.输入框集合 QLineEdit是一个单行文本编辑控件。 使用者可以通过很多函数&#xff0c;输入和编辑单行文本&#xff0c;比如撤销、恢复、剪切、粘贴以及拖放等。 通过改变QLineEdit的 echoMode() &#xff0c;可以设置其属性&#xff0c;比如以密码的形式输入。 文本的长度可…

使用 Redux 在 Flutter鸿蒙next 中实现状态管理

在 Flutter 中进行状态管理是开发应用程序时的一个关键问题。Flutter 提供了多种解决方案来管理应用的状态&#xff0c;其中 Redux 是一种广泛使用且功能强大的状态管理库。虽然 Redux 最初是为 JavaScript 和 React 设计的&#xff0c;但它的核心概念非常适用于 Flutter&#…

032集——圆转多段线(Circle to Polyline)(CAD—C#二次开发入门)

CAD中圆可转为带有凸度的多段线以方便后期数据计算、处理&#xff0c;效果如下&#xff1a; 白色为圆&#xff0c;红色为转换后的多段线&#xff08;为区分&#xff0c;已手工偏移多段线&#xff09; public static void XX(){var curves Z.db.SelectEntities<Entity>…

【极客兔兔-Web框架Gee详解】Day2 上下文Context

文章目录 一、框架结构二、设计上下文(Context):day2-context/gee/context.go1. 设计Context必要性1.1 接口粒度过细:1.2 缺乏扩展性:2. 代码3. 优势三、路由(Router): day2-context/gee/router.go四、框架入口:day2-context/gee/gee.go1. 代码五、框架使用: day2-context/m…

VSCode设置长行自动折行

有时候一行代码或者是注释会比较长&#xff0c;为了方便阅读&#xff0c;习惯让它折行显示&#xff1b;而VSCode在默认情况下&#xff0c;是不会自动折行的&#xff0c;这不利于阅读&#xff0c;我们可以通过设置来达到折行的效果。 具体操作步骤&#xff1a; 打开左下角的管…

HTB:Sightless[WriteUP]

目录 连接至HTB服务器并启动靶机 使用nmap对靶机TCP端口进行开放扫描 继续使用nmap对靶机开放的TCP端口进行脚本、服务扫描 首先尝试对靶机FTP服务进行匿名登录 使用curl访问靶机80端口 使用浏览器可以直接访问该域名 使用浏览器直接访问该子域 Getshell 横向移动 查…

Oracle视频基础1.4.4练习

1.4.4 [dbs] 删干净上次创建的bbk ll rm -f *dbf ll rm -f spfilebbk.ora clear ll创建bbk的pfile&#xff0c;准备对应的目录 ll strings spfilewilson.ora | more strings spfilewilson.ora > initbbk.ora :%s/wilson/bbk :%s/*\.//g :wq ll vi initbbk.ora####### 创…

【.NET 8 实战--孢子记账--从单体到微服务】--简易权限--角色可访问接口管理

咱们继续来编写孢子记账的简易权限&#xff0c;这篇文章中我们将编写角色可访问接口的管理API&#xff0c;同样我不会把完整的代码全都列出来&#xff0c;只会列出部分代码&#xff0c;其余代码我希望大家能自己手动编写&#xff0c;然后对比项目代码。废话不多说&#xff0c;开…

Monetico: 文本到图像合成的革命性变革

在人工智能和创意技术领域&#xff0c;Collov-Labs 推出了具有开创性的文本到图像合成模型 Monetico&#xff0c;它将彻底改变我们创建和可视化数字内容的方式。Monetico 是著名的 Meissonic 模型的有效再现&#xff0c;它提供了一种独特且易于使用的方法&#xff0c;可根据文本…

一步步安装deeponet的详细教学

1.deepoent官网如下&#xff1a; https://github.com/lululxvi/deeponet 需要下载依赖 1.python3 2.DeepXDE&#xff08;这里安装DeepXDE<0.11.2,这个最方便&#xff09; Optional: For CNN, install Matlab and TensorFlow 1; for Seq2Seq, install PyTorch&#xff0…

Error creating bean with name ‘reactiveElasticsearchClient

程序报错&#xff1a; org.springframework.beans.factory.BeanCreationException: Error creating bean with name ‘reactiveElasticsearchClient’ defined in class path resource [org/springframework/boot/autoconfigure/data/elasticsearch/ReactiveElasticsearchRestC…

海康私有化视频平台EasyCVR视频分析设备平台流媒体协议RTMP、HTTP-FLV、HLS的简单对比

在当今的数字化世界中&#xff0c;视频流协议的选择对于确保流畅、高效的视频传输至关重要。随着互联网技术的快速发展&#xff0c;直播和视频点播服务已经成为人们日常生活中不可或缺的一部分。无论是安防监控、在线教育、远程会议还是娱乐直播&#xff0c;用户对于视频流的实…

Halcon 循环画框

read_image (Image, fabrik) * 循环画框 左键开始画 中间键结束 while (1) get_mbutton (3600, dummy, dummy, Button) if(Button ! 2 and Button ! 4) * 循环画框 draw_rectangle1 (3600, Row1, Column1, Row2, Column2) …

Java多线程详解⑥(全程干货!!!)死锁 || 构成死锁的条件 || 死锁总结 || Java标准库的线程安全类

这里是Themberfue 在上一节中&#xff0c;我们介绍了线程安全问题&#xff0c;对锁的概念以及使用 在本节中&#xff0c;进入 "死锁" 的概念以及如何产生 "死锁" 死锁 一个线程&#xff0c;一把锁&#xff0c;同时加两把锁 要想进入死锁的介绍和概念&a…

适用于 Windows 11/10 电脑 的 13 个最佳文件恢复软件

如果您由于系统故障、硬件损坏、人为错误或病毒攻击而丢失了重要文件或文件夹。不用担心&#xff0c;因为我们随时为您提供帮助&#xff01;借助正确的文件恢复工具&#xff0c;您可以立即检索计算机上不同类型的文件。如果你有为您的文件创建备份&#xff0c;你不用担心&#…

> 甘晴void:课程资源免费下载

为进一步减少信息差&#xff0c;便利同学&#xff0c;我把部分重要课程的轨迹&#xff08;期中期末考卷、机考题、作业答案、代码、工程项目等&#xff09;上传至Github。网址链接如下&#xff1a; https://github.com/wolfvoid/HNU-resourses Github平台的优势是下载免费&am…

华为OD机试 - 求小球落地5次后所经历的路程和第5次反弹的高度 (Java 2024 E卷 100分)

华为OD机试 2024E卷题库疯狂收录中&#xff0c;刷题 点这里。 实战项目访问&#xff1a;http://javapub.net.cn/ 专栏导读 本专栏收录于 《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;E卷D卷A卷B卷C卷&#xff09;》 。 刷的越多&#xff0c;抽中的概率越大&…

uniapp—android原生插件开发(2原生插件开发)

本篇文章从实战角度出发&#xff0c;将UniApp集成新大陆PDA设备RFID的全过程分为四部曲&#xff0c;涵盖环境搭建、插件开发、AAR打包、项目引入和功能调试。通过这份教程&#xff0c;轻松应对安卓原生插件开发与打包需求&#xff01; ***环境问题移步至&#xff1a;uniapp—an…

【机器学习】强化学习(1)——强化学习原理浅析(区分强化学习、监督学习和启发式算法)

文章目录 强化学习介绍强化学习和监督学习比较监督学习强化学习 强化学习的数学和过程表达动作空间序列决策策略&#xff08;policy&#xff09;价值函数&#xff08;value function&#xff09;模型&#xff08;model&#xff09; 强化学习和启发式算法比较强化学习步骤代码走…

ClickHouse创建分布式表

ClickHouse创建分布式表 当数据量剧增的时候&#xff0c;clickhouse是采用分片的方式进行数据的存储的&#xff0c;类似于redis集群的实现方式。然后想进行统一的查询的时候&#xff0c;因为涉及到多个本地表&#xff0c;可以通过分布式表的方式来提供统一的入口。由于是涉及到…