Svelte中修改变量触发无关响应式语句的原因排查

以下是我的简化场景：

我有一个组件，它：

• 从服务器获取一组数据项 -> bookmarks [{title, url}, ...]
• 通过响应式语句，基于bookmarks生成一个新集合，为每个项添加url对应的域名属性：xbookmarks = [{title, url, domain}, ...]
• 支持按域名筛选书签，通过展示每个域名对应的复选框实现：
  • 通过声明filter: {domains: {domain:true|false, ...}}变量实现
  • 在响应式语句中遍历xbookmarks，将所有域名设为true，以此填充filter.domains映射
  • 最后，在响应式语句中使用filter筛选xbookmarks，得到filteredBookmarks变量
• 展示筛选后的书签

以下是伪JavaScript代码流程：

let bookmarks=[]

let xbookmarks=[]
$: xbookmarks = bookmarks.map(b=>{...b, domain: computeDomain(b)})

let filter = {domains: {}}
$: filter.domains=extractDomains(xbookmarks)

let filteredBookmarks=[]
$: filteredBookmarks = xbookmarks.filter(using filter)

完整代码可参考Svelte REPL示例

当我取消勾选某个域名的复选框时：

预期行为： #

filter变更 => 触发依赖变量重新计算，即filteredBookmarks

实际行为： #

filter变更 => Svelte重新计算xbookmarks，接着重新计算filter.domains（将所有域名重置为勾选状态），最后才计算filteredBookmarks

我无法理解为何Svelte会认为xbookmarks依赖于filter

查看Svelte生成的JS代码后，按道理不应出现此问题：

从截图可见，生成的代码符合我的依赖直觉：

1. xbookmarks在bookmarks变更时重新计算
2. filter.domains在xbookmarks变更时重新计算
3. filteredBookmarks在filter或xbookmarks变更时重新计算

附言：我刚开始学习和使用Svelte

内容的提问来源于stack exchange，提问作者Jawher