Vue响应式原理（10）：数组的索引和length

2023-11-01 02:44:18

在之前探索响应式系统的文章中，我们深入了解了 Vue 如何使用代理对象来实现对普通对象的响应式跟踪。然而，在实际开发中，我们经常会遇到数组类型的数据，而它们的行为与普通对象又有所不同。本文将深入探究 Vue 是如何对数组进行代理，以及数组索引和 length 属性的响应式行为。

数组与普通对象的区别

在 JavaScript 中，数组实际上是一种特殊的对象，具有独特的属性和方法。与普通对象相比，数组有以下几个主要区别：

索引： 数组使用数字索引来访问元素，而普通对象使用字符串键。
length： 数组有一个特殊的 length 属性，表示数组中元素的数量。
遍历： 数组可以使用 for...of 和 forEach 等方法轻松遍历其元素，而普通对象需要使用 Object.keys() 或 Object.values() 等方法来获取其键或值。

Vue 对数组的代理

Vue 通过重写数组的原生方法来实现对数组的代理。当一个数组被声明为响应式时，Vue 会创建一个代理数组，该数组将拦截并修改对原始数组的所有操作。

索引响应式

当使用数字索引访问或修改数组元素时，Vue 会触发索引响应式。例如：

const arr = Vue.observable([1, 2, 3]);

// 访问元素
console.log(arr[1]); // 输出：2

// 修改元素
arr[1] = 10;

上述代码中，访问数组索引 1 时，Vue 会触发索引响应式，导致相关组件重新渲染。同样，修改数组元素也会触发索引响应式。

length 响应式

length 属性是数组的一个特殊属性，它表示数组中元素的数量。当 length 属性被修改时，Vue 会触发 length 响应式。例如：

const arr = Vue.observable([1, 2, 3]);

// 修改 length
arr.length = 2;

上述代码中，修改数组的 length 属性时，Vue 会触发 length 响应式，导致相关组件重新渲染。

实例

为了更好地理解 Vue 对数组的代理，让我们看一个具体的例子：

<template>
  <div>
    <ul>
      <li v-for="item in arr">{{ item }}</li>
    </ul>
    <p>数组长度：{{ arr.length }}</p>
  </div>
</template>

<script>
import Vue from 'vue';

export default {
  data() {
    return {
      arr: Vue.observable([1, 2, 3])
    };
  }
};
</script>