利用 Vue 2 数组索引修改数据时，视图会发生变化吗？

前言

在 Vue 2 中，数据响应性是一个核心概念，它允许我们轻松地构建出与数据模型紧密绑定的视图。当数据模型发生变化时，视图会自动更新，从而实现数据与视图的双向绑定。

本文将重点探讨这样一个问题：在 Vue 2 中，通过数组索引修改数据时，视图是否会发生变化？ 为了深入理解这个问题，我们将从 Vue 的响应式数据机制入手，逐步揭示数据劫持的秘密。

数据劫持：揭开 Vue 响应式数据的神秘面纱

数据劫持是 Vue 2 实现响应式数据的基础。Vue 将数据对象中的每个属性都转换为一个 getter/setter，当属性被访问或修改时，就会触发 getter/setter，从而实现对数据变化的监听。

具体来说，Vue 通过以下步骤实现数据劫持：

1. 遍历数据对象，将每个属性都转换为一个 getter/setter。
2. getter 函数会在属性被访问时被调用，setter 函数会在属性被修改时被调用。
3. 在 setter 函数中，会触发一个更新视图的函数，从而实现数据与视图的同步。

数组索引修改数据时，视图是否会发生变化？

现在，我们回到本文的主题：在 Vue 2 中，通过数组索引修改数据时，视图是否会发生变化？

答案是：会。

这是因为，数组也是一个对象，其内部的元素可以通过索引访问。当我们通过数组索引修改数据时，实际上就是在修改数组对象的属性，因此会触发 getter/setter，从而导致视图更新。

举个例子

为了更好地理解这一点，让我们来看一个简单的例子：

<div id="app">
  <p>{{ message }}</p>
  <ul>
    <li v-for="item in list">{{ item }}</li>
  </ul>
</div>

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World',
    list: ['Item 1', 'Item 2', 'Item 3']
  }
});

// 通过数组索引修改数据
app.list[1] = 'Item 2 (updated)';

在这个例子中，我们通过 app.list[1] 修改了数组 list 的第二个元素。由于数组也是一个对象，因此这种修改会触发 getter/setter，从而导致视图更新。

运行这段代码，你会看到页面上的列表项 Item 2 已经变成了 Item 2 (updated)。

总结

通过本文的分析，我们可以得出这样一个结论：在 Vue 2 中，通过数组索引修改数据时，视图会发生变化。

这是因为，数组也是一个对象，其内部的元素可以通过索引访问。当我们通过数组索引修改数据时，实际上就是在修改数组对象的属性，因此会触发 getter/setter，从而导致视图更新。