Svelte reactivity类成员的更改不会反映在UI上
在 Svelte 中，反应性（reactivity）是一个核心概念，它允许你在数据变化时自动更新 UI。然而，当你在 Svelte 组件中使用类成员时，直接修改类成员的属性不会触发 UI 更新。这是因为 Svelte 的反应性系统依赖于对顶层变量的赋值操作来检测变化。
问题示例
假设你有一个类 Person，并在 Svelte 组件中使用它：
<script>
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
let person = new Person('Alice', 30);
function updateAge() {
person.age += 1; // 直接修改类成员属性
}
</script>
<p>{person.name} is {person.age} years old.</p>
<button on:click={updateAge}>Increase Age</button>在这个示例中，点击按钮后，person.age 的值会增加，但 UI 不会更新。这是因为 Svelte 无法检测到 person.age 的变化。
解决方案
要解决这个问题，你可以使用以下几种方法：
1. 重新赋值顶层变量
通过重新赋值顶层变量来触发 Svelte 的反应性系统：
<script>
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
let person = new Person('Alice', 30);
function updateAge() {
person.age += 1;
person = { ...person }; // 重新赋值顶层变量
}
</script>
<p>{person.name} is {person.age} years old.</p>
<button on:click={updateAge}>Increase Age</button>在这个示例中，通过重新赋值 person 变量，Svelte 能够检测到变化并更新 UI。
2. 使用 Svelte Store
你可以使用 Svelte 的 writable store 来管理类实例的状态：
<script>
import { writable } from 'svelte/store';
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
const personStore = writable(new Person('Alice', 30));
function updateAge() {
personStore.update(person => {
person.age += 1;
return person;
});
}
</script>
<p>{$personStore.name} is {$personStore.age} years old.</p>
<button on:click={updateAge}>Increase Age</button>在这个示例中，personStore 是一个 Svelte store，通过 update 方法来修改 person 实例的属性。使用 $personStore 可以自动订阅 store 的变化并更新 UI。
3. 使用代理（Proxy）
你可以使用 JavaScript 的 Proxy 对象来拦截对类成员的修改，并触发 Svelte 的反应性系统：
<script>
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
let person = new Person('Alice', 30);
person = new Proxy(person, {
set(target, property, value) {
target[property] = value;
person = { ...target }; // 重新赋值顶层变量
return true;
}
});
function updateAge() {
person.age += 1;
}
</script>
<p>{person.name} is {person.age} years old.</p>
<button on:click={updateAge}>Increase Age</button>在这个示例中，Proxy 拦截对 person 属性的修改，并通过重新赋值顶层变量来触发 Svelte 的反应性系统。
相关·内容
我目前正在创建一个表管理器web组件，它由几个不同的组件组成，如data-table、search-bar等。我单独管理它，因为有时不使用表或搜索栏，但当它们一起使用时，它们使用相同的类作为输入。搜索栏调用类的一个方法进行搜索，并相应地过滤数据，无论数据属性在类中如何更改，只有当我执行一些刷新操作(例如，选中复选框)时，它才不会反映在UI上。因此，我在component A中通过类
浏览 21提问于2020-12-16得票数 1
我是新来的。我正在阅读$scope.$apply();的功能，我得到了一个示例，其中控制器的数据成员值是通过计时器分配的，但是更改没有反映在UI中，而是当我使用$scope.$apply();时，更改反映到UI.........why？
我在控制器内定义了计时器，所以如果我将任何数据分配给控制器的数据成员，那么就应该进行更改。告诉我计时器的问题是
浏览 5提问于2017-06-14得票数 0
回答已采纳
我正在使用Svelte构建一些绑定到web套接字的表单。如果用户更改了值，组件将发送PUT请求以更新数据，然后服务器将向所有用户广播更改。但这让我陷入了一个奇怪的困境。基本上是这样的： export let uom;
let { uomId, name, standardUnitId, toStdUnitMultiplyer } = uom;-- Various controls to manipulate the UOM'
浏览 17提问于2021-02-24得票数 0
我解决了Github UI上的一些合并冲突，但我的本地文件在git pull或git fetch之后不会显示这些更改。
如何更新本地文件以反映在Github UI上解决的合并冲突？
浏览 0提问于2019-03-01得票数 1
2回答
我有一个在指令中的表单。它包含两个选择下拉列表(jQuery样式)和一个jQuery UI滑块，所以它都是一致的主题。为什么通过用户在现场直接输入以外的方法进行角度寄存器更改会如此困
浏览 0提问于2013-06-24得票数 1
回答已采纳
对不起-我的问题和几乎一样，但由于它没有得到一个可行的答案，我希望其他人有一些新的想法。我有一个绑定到单一类型层次结构的WPF TreeView：{ publicObservableCollection<Entity> Children { get; set; }Entity类实现了INotifyPropertyChanged，但为了清楚起见，我
浏览 7提问于2010-01-26得票数 11
回答已采纳
当下拉列表更改值时，我正在寻找这样的一个javascript方法。DropDownList d = dest as DropDownList;
}有什么想法吗？我是不是做错了什么事？
浏览 2提问于2010-04-24得票数 1
1回答
我在WPF中有一棵树和一个类似如下的层次数据结构：
<TreeView x:Name="MainTreeview" HorizontalAlignment="Left" Height="400"因此，如果我从树中的第一级更新属性，更改将反映在UI中，例如IsEpanded NodeViewModel。但是，如果我更新一个节点，而不是使用子节点属性，而是使用对NodeViewModel对象的直接引用，则所做的<
浏览 3提问于2015-03-19得票数 0
return Objects.hashCode(getOriginCity() );}
Google guava hashode()：在成员对象上工作。如何在derived::hashCode()中指定超类hashCode()？我可以在派生类hashCode()函数中直接使用super.members，但如果super.hashCode()以任何方式更改，都不会反映在派生的:hashCode(...)中。
浏览 2提问于2012-03-27得票数 1
回答已采纳
让我们假设我有一个Access Web应用程序，它有三个表: Group、Person和Task，如果使用普通Access客户端数据库，它们大致如下所示：在这个应用程序中，每当任务表被更改时例如，如果添加了一个新任务并为其分配了一个人，则分配人员的工作负载字段将根据任务的估计工作量增加。如果任务条目被更改或删除，将执行类似的更改。由于我的问题与用户界面有关，我还提供了一些有关UI的详细信息：
组的视图包含一个显示所有组<e
浏览 3提问于2015-06-19得票数 1
我有一个具体的组件，它用一个@Input() data扩展了一个抽象类。PrimeNG表使用一个@Input data来显示行。PrimeNG表使用角度OnPush策略。当我将一个对象推送到@Input data数组时，所做的更改不会反映在UI中。如果我在将一个对象推入数组后更改了data的引用(通过类似this.data = deepCopy(this.data) as Field[]的内容)，那么更改</
浏览 26提问于2021-01-05得票数 0
回答已采纳
我在Jenkins系统的作业目录中编辑了config.xml文件：但这种情况不会发生。相反，如果我在UI中编辑，我会看到config.xml中的变化。
显示在UI上的文件是缓存的文件吗？还是我做错了什么，还是我的
浏览 1提问于2017-07-06得票数 3
1回答
简化示例：执行此操作的正确方法是什么？name字段可以改为常规的C#属性吗？或者，我应该像这样绑定：
<TextBlock Text="{Binding User.FirstName}" />
浏览 0提问于2010-06-17得票数 0
回答已采纳
如果我想要改变我的UI，然后我直接传递数据，如；<li *ngFor="let post of posts;let i = index;"> post.name="Something";这将反映在UI也和工作良好！但当我试图间接地做这件事时，不会发生这样的事情： <li *ngFor=&q
浏览 0提问于2018-01-20得票数 0
回答已采纳
我得到了一个具有2个属性x和y的实体，y是在每次保存后在服务器端计算的，问题出在ui中，当编辑x并单击保存时，y值在服务器上更改，但更改不会反映在客户端。
浏览 2提问于2015-11-20得票数 0
我想知道您是否知道如何在运行时使用代码访问sharepoint母版页上的控件，我使用logout.Style"display“=”块；“；
它似乎找到了控件，但对该控件所做的更改<em
浏览 1提问于2009-07-08得票数 0
回答已采纳
1回答
我将值从50更改为70。然后刷新Ui，但在UI上它仍然显示值50...我需要知道corda存储数据在H2或任何本地存储中的实际位置……VaultQueryBy如何从本地或H2检索它？那么如何在UI上显示未被篡改的值呢？
编辑:通过SQL语句改变状态中的值后，不会反映在UI上。调用VaultQueryBy...My的UI默认调用接
浏览 2提问于2018-08-13得票数 1
2回答
通过角组件改变字体的超赞图标
、、、、
我使用的字体-可怕的版本4.7.0与角5。当我添加一个图标到屏幕上，图标立即改变从标记到，我不能访问它的类从一个角组件，这是我想要做的。其结果是，定义的第一个图标是正确显示的，但我所做的任何后续更改都应该随着字体的更改而反映在UI上，根本就不会显示。
具体的问题是，在对表进行排序时，我希望<e
浏览 0提问于2018-09-12得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
