Question

我是Svelte的新手，所以我怀疑这是一个非常根本的缺乏了解的问题。

有人可以解释为什么on：click更新UI，但是如果我尝试使用changeJob（items），UI将不会更新？ console.log指示阵列中的所有作业均已更改，但UI并未反映出来。

<script>
  import ListItem from './ListItem.svelte';

  let items = [
    { name: 'John', age: 23, job: 'plumber'},
    { name: 'Jane', age: 45, job: 'hair stylist'},
    { name: 'Juan', age: 18, job: 'student'},
  ];

  const changeJob = (arr) => {
    console.log(arr[0].job);
    arr[0].job = 'clown';
    console.log(arr[0].job);
  }

</script>

<button on:click={() => items[0].job = 'clown'}>Clownify</button>

<ul>
  {#each items as item }
    <ListItem {...item}/>
  {/each}
</ul>

代码段：REPL

Answer 1

当您有这样的代码时...

items[0].job = 'clown'

... Svelte理解它需要更新依赖于items的所有内容，因为赋值是对其被视为<script>内部的顶级变量的某个属性的赋值。

但是当您这样做时...

const changeJob = (arr) => {
  arr[0].job = 'clown';
}

...您不是分配给顶级变量的属性，而是分配给函数内部的局部arr变量的属性。对于斯维尔特来说，它实际上是不透明的。

只要您摆脱了局部变量，它就会起作用，就像这样：

const changeJob = () => {
  items[0].job = 'clown';
}

Svelte on：click函数更新数据，但不更新UI

1 个答案: