WHAT - Vue3 数组响应性和注意事项

一、前言

关于 vue3 响应性，我们之前详细介绍过，比如：

• WHAT - Vue3 响应性连接丢失问题（含解构场景）
• WHAT - Vue3 响应性（一）
• WHAT - Vue3 响应性（二）

但在这些篇幅中，大都涉及对象场景。那对于日常开发中也被经常使用的数组场景，有没有什么需要注意的事项？

二、数组用 reactive

看如下代码：

<script setup>
import { reactive } from 'vue'
const count = reactive([1,2,3,4])
function increment() {
  count[1] = 4;
}
</script>
<template>
  <button @click="increment">
    {{ count }}
  </button>
</template>

我们发现在点击时会触发页面 count 的更新。

还记得我们的 reactive() 实现吗？

const data = reactive(obj)
function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      console.log("get");
      if(typeof target[key] === 'object') {
        return reactive(target[key]); // 递归去进行 proxy 绑定
      }
      return Reflect.get(target, key, receiver); // Reflect.get(...arguments);
    },
    set(target, key, value, receiver) {
      console.log("set");
      return Reflect.set(target, key, value, receiver); // Reflect.set(...arguments);
    }
  })
}

Vue 的 reactive() 是基于 Proxy 实现的，它可以捕获对象（包含数组）的属性访问和修改，并在发生变化时触发相关的更新。

三、数组用 ref

<script setup>
import { ref } from 'vue'
const count = ref([1,2,3,4])
function increment() {
  count.value[1] = 4;
}
</script>

<template>
  <button @click="increment">
    {{ count }}
  </button>
</template>

我们发现在点击时会触发页面 count 的更新。

在 Vue 3 中，当您使用 ref 函数创建一个响应式引用时，伪代码实现如下：

function toReactive(value) {
  // reactive() 对对象中深层嵌套对象同样会进行代理
  return isObject(value) ? reactive(value) : value;
}
class RefImpl {
  public _value;
  constructor(public rawValue, public _shallow) {
    // rawValue 传递进来的值
    // _shallow 浅 ref 表示不需要再次代理
    this._value = _shallow ? rawValue : toReactive(rawValue);
  }
}

可以发现在底层实现上，针对对象（包含数组）会将其用 reactive 进行封装。因此也可以通过通过索引改变值从而触发更新。

四、用 ref() 还是 reactive()

在 Vue 3 中，对于包含数组的场景的处理，使用 ref 或 reactive，具体取决于您的需求。

• ref()

主要用于创建单个基本数据类型的响应式数据，比如数字、字符串等。如果你有一个简单的数组，可以使用 ref() 将其包装成响应式数据。

import { ref } from 'vue';
const list = ref([1, 2, 3]);

在模板中访问时，需要使用 .value 来获取其值：{{ list.value }}。而且可以直接通过索引来修改值触发更新。

• reactive()

用于创建包含对象、数组等复杂数据结构的响应式数据。如果你有一个复杂的数据结构，比如包含多个属性的对象，或者嵌套数组，使用 reactive() 更合适。

import { reactive } from 'vue';
const list = reactive({ items: [1, 2, 3] });
// list.items[0] = 4;

一般来说，如果你只是需要对简单数据类型做一些响应式处理，使用 ref() 即可。但如果你的数据结构更复杂，涉及到对象嵌套或者数组嵌套，那么可以使用 reactive()。

五、数组方法响应性：如 splice

Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

这些方法会被 Vue 修改成了“响应式”的版本。当调用这些方法修改数组时，Vue 就能够捕获到数组的变化，并触发相关的更新。

function increment() {
  // count[1] = 4;
  count.splice(1, 1, 4);
}

理解 Vue 底层数组方法响应式实现并不是简单的任务，因为它包含了很多复杂逻辑。但是，我们可以尝试提供一个简化的示例，演示如何在 splice 方法中实现响应性。我们将使用 Vue 3 的 reactive 函数创建一个响应式数组，然后重写数组的 splice 方法，以便在修改数组时触发更新。以下是一个简化的示例代码：

import { reactive } from 'vue';

function createReactiveArray(arr) {

  const reactiveArray = reactive(arr);

  // 保存原始的splice方法
  const originalSplice = Array.prototype.splice;

  // 重写splice方法
  reactiveArray.splice = function(index, deleteCount, ...items) {
    const result = originalSplice.call(this, index, deleteCount, ...items);

    // 触发更新
    // 这里简化为调用一个更新方法
    updateView();

    return result;
  };
  return reactiveArray;
}

// 创建一个响应式数组
const arr = createReactiveArray([1, 2, 3, 4]);
// 用于触发更新的方法
function updateView() {
  console.log('视图已更新');
}
// 在数组中执行splice操作
arr.splice(1, 1, 5);
console.log(arr); // 输出：[1, 5, 3, 4]

在这个示例中，我们首先使用 reactive 函数创建了一个响应式数组 reactiveArray。然后，我们重写了数组的 splice 方法，以便在执行 splice 操作时触发更新。最后，我们在数组中执行了 splice 操作，可以看到在修改数组后，调用了更新视图的方法。

需要注意的是，这只是一个简化的示例，实际上 Vue 的底层响应式实现更加复杂，涉及到了更多的细节和处理逻辑。

相对地，也有一些不可变 (immutable) 方法，例如：

• filter()
• concat()
• slice()

这些都不会更改原数组，而总是返回一个新数组。当遇到的是非变更方法时，我们需要将旧的数组替换为新的：

// items 是一个数组的 ref
items.value = items.value.filter((item) => item.message.match(/Foo/))

你可能认为这将导致 Vue 丢弃现有的 DOM 并重新渲染整个列表——幸运的是，情况并非如此。Vue 实现了一些巧妙的方法（涉及到渲染系列的学习）来最大化对 DOM 元素的重用，因此用另一个包含部分重叠对象的数组来做替换，仍会是一种非常高效的操作。

六、数组过滤和排序场景

有时，我们希望显示数组经过过滤或排序后的内容，而不实际变更或重置原始数据。

1. 计算属性

const numbers = ref([1, 2, 3, 4, 5])
const evenNumbers = computed(() => {
  return numbers.value.filter((n) => n % 2 === 0)
})
// <li v-for="n in evenNumbers">{{ n }}</li>

在计算属性中使用 reverse() 和 sort() 的时候务必小心！这两个方法将变更原始数组，计算函数中不应该这么做。请在调用这些方法之前创建一个原数组的副本：

const numbers = ref([1, 2, 3, 4, 5])
const evenNumbers = computed(() => {
  return [...numbers].reverse();
})
// <li v-for="n in evenNumbers">{{ n }}</li>

2. 方法

在计算属性不可行的情况下 (例如在多层嵌套的 v-for 循环中)

const sets = ref([
  [1, 2, 3, 4, 5],
  [6, 7, 8, 9, 10]
])
function even(numbers) {
  return numbers.filter((number) => number % 2 === 0)
}
//<ul v-for="numbers in sets">
//  <li v-for="n in even(numbers)">{{ n }}</li>
//</ul>