有没有办法在 Svelte 3 中绑定对象字段？
例子：
<script>
import MyComponent from "./MyComponent.svelte"
let myobjectID
</script>
<MyComponent bind:myobject[id]={myobjectID}>
<!-- Where myobject == {id: "123", name: "myName", and so on...} -->
这可能吗？
Svelte 存储文档显示正在更新字符串或整数，但我没有在存储中找到任何动态函数。
我不明白如何使该getData函数可写，以便通知 html 更改。
在下面的示例中，我希望在调用函数b后显示。updateKey
您可以在此处找到 REPL 中的最小代码：https://svelte.dev/repl/3c86bd48d5b5428daee514765c926e58 ?version=3.29.7
此处使用相同的代码，以防 REPL 宕机：
应用程序.svelte：
<script>
import { getData } from './store.js';
import { updateKey } from './store.js';
setTimeout(updateKey, 1000);
</script>
<h1>{getData()}!</h1>
商店.js
import {setContext} from 'svelte';
import {writable} from 'svelte/store';
var data = {
'a': 'a',
'b': 'b'
};
var key = 'a';
export const getData = function() {
return data[key];
}
export const updateKey = () => {
key = 'b';
}
目标是在商店中使用动态功能。
这里有一个类似的问题，但我不相信答案适用于我的用例。
我正在使用Svelte MaterialUI并尝试扩展DataTable组件，使其具有拖放行的功能。我正在使用svelte-dnd-action模块来支持拖放行为。
以下效果很好。我可以拖放表格的行。
<table>
<thead>...</thead>
<tbody use:dndzone{...opts}>
...data
<tbody>
</table>但是，当尝试将模块插入 Material UI 组件时，我收到一条错误，指出“操作只能应用于 DOM 元素，而不是组件。”
<DataTable>
<Head>...</Head>
<Body use:dndzone={...opts}>
...Data
</Body>
</DataTable>组件的定义Body如下所示：
<tbody
use:useActions={use}
use:forwardEvents
class="mdc-data-table__content {className}"
{...exclude($$props, ['use', 'class'])}
><slot></slot></tbody>
<script>
import {setContext} from 'svelte';
import {get_current_component} from 'svelte/internal';
import {forwardEventsBuilder} from '@smui/common/forwardEvents.js';
import {exclude} from '@smui/common/exclude.js';
import {useActions} from '@smui/common/useActions.js';
const forwardEvents = forwardEventsBuilder(get_current_component());
export let use = [];
let className = '';
export {className as …我可以订阅这样的商店：
count.subscribe(value => {
count_value = value;
});
但是当我们想要取消订阅时，我们会将之前的订阅代码放入一个新变量中（成为函数表达式），并仅在组件被销毁时才运行它（onDestroy）
const unsubscribe = count.subscribe(value => {
count_value = value;
});
onDestroy(unsubscribe);
问题是，如何将前一个函数放入一个名为 unsubscribe 的新变量中。可以对商店执行取消订阅功能。我的意思是，我们甚至根本不更改取消订阅实现的订阅代码，我们所做的就是将其放入一个新变量中，使其成为一个函数表达式，并且仅通过 via 调用它onDestroy，那么它如何神奇地取消订阅呢？它实际上是如何运作的？
我有一个像这样的输入组件：
<script lang="ts"></script>
<div class="wrap-input">
<input
class='input'
type="text"
{...$$restProps}
/>
</div>
<style lang="scss">
// some styles
</style>
我在父级上使用了输入组件：
<script lang="ts">
// function event handler
const onKeyUp = (event) => {
console.log(event)
}
</script>
<main>
<Input
on:keyup={onKeyUp} // How I can send this event to input component as $$restProps
className="input-todo"
placeholder="What needs to be done ?"
/>
</main>
<style lang="scss">
// some styles
</style>
我错了还是这应该href从标签中删除属性a？
<a href={false}></a>
它没有（“svelte”：“3.44.2”）。
我正在使用 Cypress 测试我的 SvelteKit 网站。我有时会遇到不稳定的测试，类似于此处描述的内容： https: //www.cypress.io/blog/2019/01/22/when-can-the-test-click/。简而言之，Cypress 有时会在附加事件侦听器之前找到并单击按钮 - 结果，单击无处可去。建议的解决方案是简单地重新尝试单击，直到附加了适当的侦听器。这也适用于我的情况。然而，尽管我确实理解为什么这可能是博客文章中给出的示例中的一个问题（它是一个大型日历模式），但我发现很难证明在使用简单的 Svelte 按钮时会出现此问题。
这是一个简单的按钮示例，单击时会显示一些内容：
<script>
let hide = true;
</script>
<button
on:click={() => {
console.log('clicked');
hide = false;
}}>
Show
</button>
<span class:hide>Content</span>
<style>
.hide {
visibility: hidden;
}
</style>
相应的测试有时会通过，有时会失败：
it('reveals content on click', () => {
cy.contains('Show').click();
cy.contains('Content').should('be.visible');
});
同样，我知道可以通过重新尝试单击该按钮来解决此问题。如果这就是让 Cypress 与 Svelte/SvelteKit 一起工作所需的条件，那么我就同意了。但我想知道：为什么这会成为一个问题？
最小复制仓库：https://github.com/sophiamersmann/test-svelte-kit-cypress
我有两个变量a，b加起来为 100。如何设置反应式声明，以便 whena更改b为 be ，100 - a反之亦然？当我尝试类似的事情时
let total = 100;
$: a = total - b;
$: b = total - a;
我收到“检测到循环依赖性”错误。有什么办法可以完成这件事吗？
Svelte 3中是否存在一种机制，可以在渲染之前比较组件内部的道具更改？类似于React getDerivedStateFromProps。
<script>
export let color;
// Does anything like this exist in Svelte?
beforeUpdate((changes) => {
const same = changes.prev.color === changes.next.color
})
</script>
这是我对DOM和浏览器如何工作的幼稚理解
每当DOM中的某些内容（真实dom）更改时，浏览器就会对该DOM重新绘制或重排。因此，用更简单的术语来说，每次DOM更改时，浏览器都需要重新计算CSS，进行布局并重新绘制网页。这是在真正的dom中花费时间的原因。
因此，React带有此虚拟DOM，它的实际作用是将更改批量进行批处理，然后调用一次将其应用于实际域。因此，最大程度地减少了回流和重涂。
那斯维尔特呢。如果直接操作DOM，它将如何控制浏览器的重绘/重排。
svelte ×10
svelte-3 ×10
javascript ×4
svelte-store ×2
sveltekit ×2
cypress ×1
reactjs ×1
svelte-2 ×1
virtual-dom ×1