Vue3中监听 Ref 类型的数字数组

在 Vue 3 中，监听一个 Ref 类型的数字数组（如 ref<number[]>([])）时，根据需求的不同，有几种监听方式：

1. 监听整个数组的引用变化

当整个数组被重新赋值时触发：

typescript

复制

下载

import { ref, watch } from 'vue';

const numbers = ref<number[]>([1, 2, 3]);

watch(numbers, (newVal, oldVal) => {
  console.log('数组被替换:', newVal, oldVal);
});

2. 监听数组内部元素的变化（深度监听）

当数组内部元素被修改（增/删/改）时触发：

typescript

复制

下载

watch(numbers, (newVal) => {
  console.log('数组内部变化:', newVal);
}, { deep: true }); // 关键：启用深度监听

3. 使用 watchEffect 自动跟踪依赖

自动响应数组及其内部元素的变化：

typescript

复制

下载

import { watchEffect } from 'vue';

watchEffect(() => {
  console.log('当前数组内容:', numbers.value);
});

4. 监听特定索引的元素

只关注数组中某个索引位置的变化：

typescript

复制

下载

watch(
  () => numbers.value[0], // 监听索引 0 的元素
  (newVal, oldVal) => {
    console.log('第一个元素变化:', newVal, oldVal);
  }
);

5. 监听数组长度变化

只关注数组长度的变化：

typescript

复制

下载

watch(
  () => numbers.value.length,
  (newLen, oldLen) => {
    console.log(`数组长度变化: ${oldLen} -> ${newLen}`);
  }
);

完整示例代码

vue

复制

下载

<script setup lang="ts">
import { ref, watch, watchEffect } from 'vue';

const numbers = ref<number[]>([1, 2, 3]);

// 1. 监听整个数组引用
watch(numbers, (newVal, oldVal) => {
  console.log('数组引用变化:', { newVal, oldVal });
});

// 2. 深度监听内部元素
watch(numbers, (newVal) => {
  console.log('深度监听内部变化:', newVal);
}, { deep: true });

// 3. 自动跟踪依赖
watchEffect(() => {
  console.log('watchEffect 触发:', numbers.value);
});

// 4. 监听特定索引
watch(
  () => numbers.value[0],
  (newVal, oldVal) => {
    console.log('索引 0 变化:', { newVal, oldVal });
  }
);

// 5. 监听数组长度
watch(
  () => numbers.value.length,
  (newLen, oldLen) => {
    console.log('长度变化:', { newLen, oldLen });
  }
);

// 测试方法
const changeArray = () => {
  numbers.value.push(4); // 触发深度监听、watchEffect、长度监听
};

const replaceArray = () => {
  numbers.value = [10, 20]; // 触发引用监听、深度监听、watchEffect
};

const updateElement = () => {
  numbers.value[0] = 100; // 触发深度监听、watchEffect、特定索引监听
};
</script>

<template>
  <div>
    <p>数组内容: {{ numbers }}</p>
    <button @click="changeArray">Push 新元素</button>
    <button @click="replaceArray">替换整个数组</button>
    <button @click="updateElement">修改第一个元素</button>
  </div>
</template>

关键注意事项：

1. 深度监听 { deep: true }
   必须显式开启才能检测数组内部变化（如 push、splice 或直接修改索引值）。

2. 引用变化 vs 内部变化

   • 重新赋值整个数组（numbers.value = [...]）会触发引用变化。

   • 修改数组内部元素（numbers.value[0] = 100 或 push()）需要深度监听。

3. watchEffect 的自动依赖
   在回调中使用到的响应式变量（如 numbers.value）会被自动跟踪，无需声明依赖。

根据你的具体场景选择合适的监听方式即可。