Question

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

我得出以下结论：

<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仅显示在分配的左侧，因此它不是它依赖的值。
为什么周期性依赖项被编译器“隐藏”，为什么以下代码不起作用？

    $: {
        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更改时，您的第一条语句将重新运行。

函数方法行之有效，因为突然之间您只提到一个变量（编译器仅在立即块中查找，而不在将被调用的任何函数中查找）

我承认一开始有点令人困惑，但是希望这会使它更清晰

良性循环依赖

1 个答案: