Javascript 在vuejs_v2.6.12中更新数组中的项会触发反应

我想知道，当我直接使用索引设置一个项目时，为什么vue会更新页面。 根据官方文档，当我直接使用索引设置项目时，Vue无法检测到数组的更改。 我的代码是

const-app=新的Vue({
el:“#应用程序”，
数据（）{
返回{
标题：“你好，世界！”，
课程：[“数学”、“文学”、“计算机科学”]
}
},
安装的（）{
设置超时（（）=>{
this.title='Hello，vue！'；
本课程[1]=“化学”；
这个。课程。推送（“物理”）；
}, 3000);
}
})

{{title}}
{{c}}

这是因为您正在更改循环模板的：键

 <div v-for="c in courses" :key="c">
    {{c}}
 </div>

{{c}}

在这里，您提供了数组元素作为vue的键，以使其保持在其更改检测机制中。所以它的反应性取决于元素。这些元素中的任何更改都将触发更改检测，因此将更新div

如果您不希望vue在更改数据时更改循环元素，那么我会说更改密钥。如果不想重新渲染，可以对键使用数组索引，但这不是一个好主意

 <div v-for="(c, index) in courses" :key="index">
    {{c}}
 </div>

{{c}}

---

查看此资源以了解有关vue中重新渲染机制的更多信息：

this.title='Hello，vue！'和
本课程推送（“物理”）触发渲染。然后vue创建一个新的Vnode，其中获取的
this.courses[1]
已更改

试试这个


const-app=新的Vue({
el:“#应用程序”，
数据（）{
返回{
标题：“你好，世界！”，
课程：[“数学”、“文学”、“计算机科学”]
}
},
安装的（）{
设置超时（（）=>{
//this.title='Hello，vue！'；
本课程[1]=“化学”；
//这个。课程。推送（“物理”）；
}, 3000);
}
})

{{title}}
{{c}}
但是，如果我不注释
this.title='你好，vue！'
和next
推送
，仍会触发渲染。课程的任何更改都会触发循环的渲染，而标题的更改将触发渲染到标记，因为您已为他们提供了vue更改检测机制的键