【前端】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,一经查实,立即删除!

相关文章

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…

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;可根据文本…

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

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

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; 强化学习和启发式算法比较强化学习步骤代码走…

常见 HTTP 状态码分类和解释及服务端向前端返回响应时的最完整格式

目前开发的项目很大程度上是为明年的国产化做准备了&#xff0c;所以借这个机会把用了十年的自研系统全部重写&#xff0c;订立更严格的规范&#xff0c;本文记录一下返回格式及对应状态码。 常见 HTTP 状态码及解释 HTTP 状态码用于表示客户端请求的响应状态&#xff0c;它们…

深入理解JVM

文章目录 1. JVM内存区域划分2. JVM中类加载过程类加载&#xff08;1&#xff09;类加载的基本流程&#xff08;2&#xff09;双亲委派模型 《深入理解java虚拟机》 在这本书前&#xff0c;面试官对于JVM也不是很了解。 这本书主要还是写个一下开发 JVM 的人。 1. JVM内存区域…

启动软件是用例吗

沙亚雄 2020-8-13 14:06 潘老师&#xff0c;你好&#xff0c;最近读了您的软件方法&#xff0c;结合自己的项目发现始终有一个疑问&#xff1f;那就是启动软件算不算一个用例&#xff0c;因为软件在启动的时候一般都要实例化一些对象&#xff0c;读一些配置文件等等。那启动软…

Ubuntu22.04中使用CMake配置运行boost库示例程序

Ubuntu22.04中使用CMake配置运行boost库示例程序 boost是一个比较强大的C准标准库&#xff0c;里面有很多值得学习的东西&#xff0c;比较asio网络库可以用来编写C TCP客户端或者TCP服务端接收程序。本文主要讲解如何在Ubuntu22.04中使用Cmake配置boost库&#xff0c;以及运行…

指标+AI+BI:构建数据分析新范式丨2024袋鼠云秋季发布会回顾

10月30日&#xff0c;袋鼠云成功举办了以“AI驱动&#xff0c;数智未来”为主题的2024年秋季发布会。大会深度探讨了如何凭借 AI 实现新的飞跃&#xff0c;重塑企业的经营管理方式&#xff0c;加速数智化进程。 作为大会的重要环节之一&#xff0c;袋鼠云数栈产品经理潮汐带来了…

Windows配置NTP时间同步

Windows下实现NTP时间同步 1、Windows时间服务(W32Time)2、Windows 时间同步的工作原理3、配置和管理 Windows 时间同步3.1 命令行工具&#xff1a;w32tm3.2 控制面板中的设置 4. 高级设置&#xff08;Windows Server 环境&#xff09;5.调整时间同步的间隔5.1 通过组策略调整时…

系统安全第七次作业题目及答案

一、 1.RBAC0 RBAC1 RBAC2 RBAC3 2.属性 身份标识 3.接入访问控制 资源访问控制 网络端口和节点的访问控制 二、 1.B 2.A 3.ABE 4.BCD 5.ABC 三、 1. 答&#xff1a;基于属性的访问控制&#xff08;ABAC&#xff09;是通过对实体属性添加约束策略的方式实现主、客体之…