Svelte:双向绑定触发反应性两次

Posted

技术标签:

【中文标题】Svelte:双向绑定触发反应性两次【英文标题】:Svelte: two way binding triggers reactivity twice 【发布时间】:2021-05-24 13:09:13 【问题描述】:

有人知道为什么如果我将一个属性绑定到一个组件会触发两次响应吗? 我创建了一个 REPL 来重现问题。

https://svelte.dev/repl/71c60ba3ff5f429284472c5b0e0a6c0e?version=3.32.3

谢谢

【问题讨论】:

您找到解决此问题的方法了吗? Fred Hors 发布了一个 Answer 说“我打开 https://github.com/sveltejs/svelte/issues/6590 是为了更好地理解这种行为。” 【参考方案1】:

也许没有bind 会起作用吗? https://svelte.dev/repl/20b6ee11a69b49408928b35d3fd95041?version=3.32.3

【讨论】:

当然可以,但是这样我需要触发一个事件来警告父组件对象已更改。那不是我想要的。 如果我有一个组件树,并且我更改了树的最后一个组件中的对象,我需要在树的每一层中触发一个事件以让父级通知更改.我不认为这是一个好的解决方案。 @RuiMartins 尝试使用可写存储,svelte.dev/tutorial/writable-stores @RuiMartins .subscribe() 方法只会发出一次更新的值 假设我有一个带有过滤器组件的页面,在这个过滤器内我有几个输入组件(文本输入、滑块等)。然后在商店中我有一个可写的过滤器属性,在同一个商店中,我有一种观察者,它触发对后端的调用以根据该过滤器检索一些数据。

以上是关于Svelte:双向绑定触发反应性两次的主要内容,如果未能解决你的问题,请参考以下文章

Vue 3 通过双向绑定将反应对象传递给组件

vue3.0(双向绑定)源码分析

vue双向绑定原理

Knockout 双向绑定的理解

观察者模式--双向数据绑定

Vue的双向数据绑定原理