Javascript 苗条：单击函数更新数据，但不更新用户界面

我是苗条的新手，所以我怀疑这是一个非常根本的缺乏理解的问题

有人能解释为什么打开：单击会更新UI，但如果我尝试使用changeJob（项目），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>

从“./ListItem.svelte”导入ListItem；
让项目=[
{姓名：“约翰”，年龄：23岁，工作：“水管工”}，
{姓名：'简'，年龄：45岁，工作：'发型师'}，
{姓名：'Juan'，年龄：18岁，工作：'student'}，
];
const changeJob=（arr）=>{
console.log（arr[0].job）；
arr[0]。作业=‘小丑’；
console.log（arr[0].job）；
}
项目[0]。作业='小丑'}>小丑化

{#每个项目作为项目}
{/每个}

---

代码片段：

当您有这样的代码时

项[0]。作业=“小丑”

…Svelte知道它需要更新依赖于

项的任何内容，因为赋值是它识别为
内顶级变量的某个属性

但是当你这么做的时候

const changeJob=（arr）=>{
arr[0]。作业=‘小丑’；
}

…您没有分配给顶级变量的属性，而是分配给函数内部的本地
arr
变量的属性。这是有效的不透明的苗条

只要去掉局部变量，它就会起作用，如下所示：

constchangejob=（）=>{
项目[0]。作业=“小丑”；
}