良性循环依赖

Question

为新项目尝试 svelte 我编写了一个组件来编辑一个复合对象，该组件将对各个部分的编辑委托给子组件，并在部件发生更改时重新创建复合对象。当然，当复合对象被外部更改时，子组件应该更新为新值。

我得到以下结果：

<script>  
    let item = "content";
    export let holder = { item };

    $: {
        console.log("setting item to "+holder.item);
        item = holder.item;
    }

    $: setHolder(item);

    function setHolder(i) {
        console.log("setting holder for "+i);
        holder = { item: i }
    }
</script>

<input type="text" bind:value={item} />

以上编译但无法编辑内容，因为当编辑 item 时，第一个反应块被执行，将变量设置回 holder.item。

我不明白以下内容：

为什么第一个反应块被执行？由于 item 只出现在赋值的左侧，它不是它所依赖的值。
为什么循环依赖性是来自编译器的 "hidden"，为什么以下不起作用？

    $: {
        console.log("setting item to "+holder.item);
        item = holder.item;
    }

    $: {
        console.log("setting holder for "+item);
        holder = { item }
    }

为什么将两个反应块包装到函数中时一切正常？

    $: setItem(holder)
    function setItem(h) {
        console.log("setting item to "+h.item);
        item = h.item;
    }

    $: setHolder(item);
    function setHolder(i) {
        console.log("setting holder for "+i);
        holder = { item: i }
    }

依靠编译器以某种方式看不到代码在做什么似乎很奇怪所以我想知道我是否采用了完全错误的方法。

Answer 1

只要提到的任何变量发生变化，反应式语句就会重新执行。因此，当 holder 或 item 更改时，您的第一个语句将重新运行。

函数方法行得通，因为突然间你只提到一个变量（编译器只查看直接块，而不查看任何将被调用的函数）

我承认一开始有点混乱，但希望这能让它更清晰一些

良性循环依赖

Benign cyclical dependencies

svelte

svelte-component

svelte-3