2

为一个新项目尝试 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仅出现在分配的左侧，它不是它所依赖的值。
  • 为什么循环依赖对编译器“隐藏”，为什么以下工作不起作用？
    $: {
        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 }
    }

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

4

1 回答 1

2

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

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

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

于 2020-05-07T10:12:34.760 回答