详解VUE 数组更新

深入理解Vue中的数组更新问题

Vue.js，一个流行的前端框架，对于处理数组更新有着独特的方式。在Vue中，当我们操作数组时，视图会自动更新以反映数组的变化。但要确保视图正确更新，我们需要理解如何在Vue中正确地操作数组。

一、数据方法分类

1. 原数组改变的方法：

这些方法会直接改变原数组，并触发视图的更新。包括：push、pop、unshift、shift、reverse、sort以及splice。

2. 原数组未变，生成新数组的方法：

这些方法不会改变原数组，但可以通过新数组替换原数组来更新视图。如slice、concat、filter等。

二、示例说明

以下是一个Vue应用的简单示例，展示了如何在Vue中使用数组并更新视图。在这个例子中，我们有一个包含书籍信息的数组，并使用v-for指令在视图中显示这些信息。

```html

```

三、不会触发视图更新的操作

在Vue中，有些操作不会触发视图的自动更新，需要我们手动更新。例如：

1. 通过索引直接设置项：如 `app.books[0] = {name: 'newBook', author: 'newAuthor'};` 这样的操作不会触发视图更新。要解决这个问题，可以使用Vue提供的方法如 `Vue.set()` 或者替换数组。

2. 修改数组长度：直接修改数组的长度，如 `app.books.length = 1`，也不会触发视图更新。要更新视图，你需要用新数组替换旧数组或者通过索引设置新的项。

理解Vue中数组更新的方式是非常重要的，可以帮助我们更有效地使用Vue框架来构建应用。对于过滤数组的需求，我们可以使用计算属性来实现。在Vue框架中，我们可以利用计算属性来动态处理数组数据，无需改变原始数组。下面是一个示例：

假设我们有一个包含书籍信息的数组，我们希望按照书名长度进行排序并展示。这可以通过计算属性来完成。在Vue组件中，我们可以如下定义计算属性：

```html

```

关于Vue如何监听数据的变化，主要依赖于其响应式系统。在Vue中，每个组件实例都会对应一个watcher实例，它会追踪并响应数据的变动。当数据发生变化时，相关的组件会重新渲染。这是通过getter/setter机制实现的，Vue会在初始化时对属性进行getter/setter转化，使其具有响应性。这样，当数据变动时，setter会被触发，通知watcher重新计算，从而更新相关的组件。Vue无法检测到对象属性的动态添加或删除，也无法在实例创建后动态添加新的根级响应式属性。这是因为现代JavaScript的限制以及Object.observe的废弃。要确保数据的响应性，需要在初始化时就声明所有需要响应的属性。在 Vue 中，响应式属性的添加对于嵌套对象来说同样适用。Vue 提供了一种强大的工具，即 `Vue.set(object, key, value)` 方法，用于将响应属性添加到对象上，包括嵌套的对象。一个简单的例子就是 `Vue.set(vm.someObject, 'b', 2)`，这样，`vm.someObject` 对象上的 'b' 属性就被添加并设置为 2 了。还有一个 `vm.$set` 实例方法，它是全局 `Vue.set` 方法的别名。这个方法的妙处在于它能让你轻松地操作对象中的属性。