Vue监听数组变化源码解析

Vue 监听数组变化是通过 Object.defineProperty() API 实现的，具体实现代码在 Vue 的源码中可以在 core/observer/array.js 文件中找到。

具体来说，当我们使用 Vue 的时候，如果我们使用了数组的方法，比如 push()、splice() 等，在内部会调用 _ob__.observeArray(array) 方法，这个方法会遍历数组中的每一个元素，并使用 Object.defineProperty() 调用 defineReactive() 方法为其添加响应式属性。

而 defineReactive() 方法中会使用 Object.defineProperty() 将该属性设置成可监听的。这个方法会重写数组操作方法，使得在调用修改数组的方法时，能够同时触发监听器，更新视图。

下面通过两个示例来说明：

1. 在 data 中使用数组：

```

```

在这个示例中，我们在 data 中定义了一个数组 list，在模板中使用 v-for 遍历数组并渲染，在点击按钮时通过 push() 方法添加元素。由于使用了 Vue，因此在添加元素时能够自动触发视图更新。

1. 在组件内定义 prop：

```

```

在这个示例中，我们定义了一个组件，其中使用 prop 接收一个数组，然后在模板中遍历数组并渲染。在父组件中传递数组时，如果使用了 Vue，在修改数组时也能够自动触发子组件的更新。

以上两个示例都演示了使用 Vue 监听数组变化并自动更新视图的功能。在实际开发中，我们可以灵活运用，提高开发效率。