Vue中使用splice修改数组为何能触发视图更新？

Question

在Vue中，使用`splice`修改数组为何能触发视图更新？ Vue通过劫持数组的变异方法（如`push`、`pop`、`shift`、`unshift`、`splice`、`sort`、`reverse`）来实现响应式。当调用`splice`时，Vue能够检测到数组内容的变化，并通知视图进行更新。这是因为Vue重写了这些原生方法，在方法执行时会触发依赖的重新渲染。相比之下，直接替换整个数组或使用非变异方法（如`filter`、`concat`、`slice`）不会自动触发更新，需要手动赋值给响应式数据。因此，在开发中如果需要动态更新数组并同步到视图，推荐使用`splice`等变异方法。

Answer 1

1. Vue响应式基础

Vue的核心特性之一是数据的双向绑定，这依赖于其强大的响应式系统。在Vue中，当我们修改数组时，视图能够自动更新的关键在于Vue对数组方法的劫持。

Vue通过重写数组的变异方法（如`push`、`pop`、`shift`、`unshift`、`splice`、`sort`、`reverse`），使得这些方法在执行时可以触发视图更新。而像`filter`、`concat`、`slice`这样的非变异方法不会直接改变原数组，因此无法触发响应式更新。

关键词：

• 响应式
• 变异方法
• 非变异方法
• 视图更新

2. `splice` 方法的工作原理

`splice` 是一个变异方法，它可以直接修改原数组的内容。当我们在Vue中调用`splice`时，Vue会检测到数组的变化，并通知所有依赖该数组的视图进行重新渲染。

具体来说，Vue通过`Object.defineProperty`或Proxy（Vue 3）来拦截数组的变更操作。每当`splice`被调用时，Vue会在内部标记相关的依赖为“脏”状态，从而触发视图的更新。

代码示例：

    new Vue({
      el: '#app',
      data: {
        items: [1, 2, 3]
      },
      methods: {
        updateArray() {
          this.items.splice(1, 1, 4); // 修改数组
        }
      }
    });
    

3. 响应式系统的深度解析

为了更好地理解为什么`splice`可以触发视图更新，我们需要深入探讨Vue的响应式机制。以下是响应式系统的主要组成部分：

1. 观察者模式：Vue使用`Observer`类来监听数据变化。
2. 依赖收集：当组件访问数据时，Vue会将组件的渲染函数注册为依赖。
3. 调度更新：当数据发生变化时，Vue会通知所有相关的依赖进行更新。

对于数组，Vue通过重写其原型链上的变异方法来实现这一机制。例如，`splice`方法被改写为不仅修改数组内容，还会通知Vue的核心响应式系统。

4. 非变异方法的局限性

与`splice`不同，`filter`、`concat`、`slice`等非变异方法不会直接改变原数组，而是返回一个新的数组。由于Vue无法感知到这种间接的变化，因此不会触发视图更新。

解决方法是手动将新数组赋值回响应式数据。例如：

    this.items = this.items.filter(item => item > 2);
    

关键词：

方法类型	方法名称	是否触发更新
变异方法	splice	是
非变异方法	filter	否

5. 开发中的最佳实践

在实际开发中，推荐使用`splice`等变异方法来动态更新数组，以确保视图能够及时同步数据变化。如果必须使用非变异方法，则需要显式地将结果赋值给响应式数据。

此外，了解Vue的响应式原理可以帮助我们避免一些常见的陷阱，例如直接替换整个数组或尝试修改深层嵌套的对象属性。

流程图：

graph TD;
            A[用户调用 splice] --> B[Vuex 拦截方法];
            B --> C[通知依赖更新];
            C --> D[视图重新渲染];