Vue 3 中如何监听数组的变化

在 Vue 3 中监听数组的变化

在 Vue 3 中，监听数组的变化是一个常见的需求，尤其是在构建数据驱动的应用时。Vue 3 提供了强大的功能来处理这种情况，包括 Composition API 和 Options API。这篇文章将详细介绍这两种方法，并通过示例代码演示如何实现。

使用 Composition API

Vue 3 引入了 Composition API，这是一个更加灵活和模块化的 API 设计方式。它允许你在一个函数中组织逻辑，从而提高了代码的可读性和复用性。

1. 创建响应式数组

要使用 Composition API 监听数组的变化，首先需要使用 ref 创建一个响应式数组。ref 是 Vue 3 提供的一个函数，用于将普通数据转变为响应式数据。

<template>
  <div>
    <button @click="addItem">Add Item</button>
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

// 创建响应式数组
const items = ref(['Item 1', 'Item 2', 'Item 3']);

// 向数组中添加新项
function addItem() {
  items.value.push(`Item ${items.value.length + 1}`);
}
</script>

在这个示例中，items 是一个响应式数组。点击按钮会调用 addItem 函数，向数组中添加新项。

2. 监听数组的变化

使用 watch 函数可以监控数组的变化。watch 函数接受两个参数：要观察的数据源和一个回调函数。回调函数会在数据变化时执行。

<script setup>
import { ref, watch } from 'vue';

const items = ref(['Item 1', 'Item 2', 'Item 3']);

function addItem() {
  items.value.push(`Item ${items.value.length + 1}`);
}

// 监听数组的变化
watch(items, (newItems, oldItems) => {
  console.log('Items changed from', oldItems, 'to', newItems);
}, { deep: true });
</script>

在这里，watch 被用来观察 items 数组。deep: true 选项确保即使数组内部的元素发生变化，也能被捕捉到。

使用 Options API

Vue 3 仍然支持传统的 Options API。这种方式对于许多开发者来说更加熟悉，特别是那些从 Vue 2 迁移过来的开发者。

1. 创建响应式数组

在 Options API 中，响应式数组可以通过 data 选项定义。

<template>
  <div>
    <button @click="addItem">Add Item</button>
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    };
  },
  methods: {
    addItem() {
      this.items.push(`Item ${this.items.length + 1}`);
    }
  }
};
</script>

在这个示例中，items 数组被定义在 data 选项中。addItem 方法用于向数组中添加新项。

2. 监听数组的变化

使用 watch 选项可以观察数组的变化。watch 选项支持深度观察，通过设置 deep: true 可以确保对数组内部变化的监听。

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    };
  },
  methods: {
    addItem() {
      this.items.push(`Item ${this.items.length + 1}`);
    }
  },
  watch: {
    items: {
      handler(newItems, oldItems) {
        console.log('Items changed from', oldItems, 'to', newItems);
      },
      deep: true
    }
  }
};
</script>

在这里，watch 选项用于观察 items 数组的变化。deep: true 确保对数组内部的变化也能进行深度观察。

在 Vue 3 中监听数组变化时，有几个关键点需要注意，以确保你的代码高效且正确地响应数据的变化：

1. 深度监听（Deep Watch）

当你需要监听数组内部的变化（例如，修改数组中的对象属性），必须使用 deep: true 选项来确保 Vue 进行深度观察。否则，只有数组本身的引用变化会被捕捉到，而内部元素的变化则不会。

示例：

watch(items, (newItems, oldItems) => {
  console.log('Items changed from', oldItems, 'to', newItems);
}, { deep: true });

2. 监听数组长度

有时你可能只对数组长度变化感兴趣，而不是对数组的每个元素的变化。这时可以直接监听 items.length，以减少不必要的性能开销。

示例：

watch(() => items.value.length, (newLength, oldLength) => {
  if (newLength > oldLength) {
    console.log('Item added');
  } else {
    console.log('Item removed');
  }
});

4. 使用响应式数据

确保使用 Vue 的响应式数据来管理数组，避免直接修改非响应式数据。直接操作非响应式数据不会触发 Vue 的反应性系统，也无法反映在视图中。

示例：

const items = ref(['Item 1', 'Item 2']);
items.value.push('Item 3'); // 正确的做法

5. 避免不必要的重渲染

在某些情况下，频繁的数组更新可能导致不必要的组件重渲染。优化数据更新逻辑，确保仅在真正需要时才触发更新。

总结

在 Vue 3 中，无论是使用 Composition API 还是 Options API，监听数组的变化都是处理数据的关键。Composition API 提供了更灵活的方式，通过 ref 和 watch 组合实现响应式数据的管理。而 Options API 则通过 data 和 watch 选项提供了传统的响应式数据管理方式。了解和掌握这些方法将帮助你在开发中更有效地管理和响应数据的变化。