在 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>
关键注意事项：
-
深度监听
{ deep: true }
必须显式开启才能检测数组内部变化（如push、splice或直接修改索引值）。 -
引用变化 vs 内部变化
-
重新赋值整个数组（
numbers.value = [...]）会触发引用变化。 -
修改数组内部元素（
numbers.value[0] = 100或push()）需要深度监听。
-
-
watchEffect的自动依赖
在回调中使用到的响应式变量（如numbers.value）会被自动跟踪，无需声明依赖。
根据你的具体场景选择合适的监听方式即可。
