在父子组件间传递 Map 的正确姿势
在 Vue 实战中，将 Map 作为父子组件之间共享的数据，通常需要通过 props 传递，并确保它具有可观的响应性。将 Map 放在 ref 中可以让 Vue 跟踪引用的变化，从而避免部分变更被忽略。
推荐的方式是：父组件创建一个 Map 的实例，并通过一个响应式引用传递给子组件，子组件再通过 prop 的 map 来读取数据。
// ParentComponent.vue
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';export default {components: { ChildComponent },setup() {// 将 Map 放在 ref 中以便在父子之间传递const sharedMap = ref(new Map());// 初始数据sharedMap.value.set('userId', 42);sharedMap.value.set('userName', 'Liu');return { sharedMap };}
}
子组件的接收方式要明确，在 props 中指定 map，且尽量使用 Map 类型进行校验，避免传错类型导致 undefined。
// ChildComponent.vue
export default {props: {map: {type: Map,required: true}},// 这里仅演示如何读取，不涉及模板
}
避免在子组件中读取 undefined 的 map.get
在某些情况下，子组件渲染时 map 还未从父组件传递完成，导致 读取 map.get 时出现 undefined，从而抛出 Cannot read properties of undefined (reading 'get')。
为避免该问题，可以在计算属性中使用可选链和默认值，确保即使 map 尚未就绪时也不会报错。
// ChildComponent.vue
import { computed } from 'vue';export default {props: {map: {type: Map,required: true}},setup(props) {const userName = computed(() => props.map?.get('userName') ?? '未设置');const userId = computed(() => props.map?.get('userId') ?? null);return { userName, userId };}
}
{{ userName }}
Id: {{ userId }}
在模板中也可以使用可选链，以防止 map 未定义时访问 get 造成运行时错误。
结合示例代码：父组件初始化并传递 Map
实际场景中，父组件通常在初始化阶段就准备好 Map，并将其传递给子组件。为确保渲染时机正确，可以在父模板中加上条件渲染，确保 Map 已就绪再渲染子组件。
// ParentComponent.vue
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';export default {components: { ChildComponent },setup() {const sharedMap = ref(new Map());// 初始化数据sharedMap.value.set('userName', 'Liu');sharedMap.value.set('role', 'admin');return { sharedMap };}
}
// 更新 Map 后触发更新
// 直接在 Map 上变更可能不会触发 Vue 的更新，需要重新赋值一个新对象来触发
sharedMap.value.set('lastLogin', new Date().toISOString());
// 触发 Vue 的响应性更新的一种常见做法
sharedMap.value = new Map(sharedMap.value);
Vue3 中 Map 的响应性处理与最佳实践
Map 的修改不一定会被 Vue 监听到，直接调用 map.set 很可能不会触发依赖项的更新，尤其是在子组件中依赖该 Map 时。
最佳做法是：在父组件中维护一个 Map 的引用，并在需要更新时创建一个新的 Map 实例再赋值给 ref，这样就能确保相关组件重新渲染。
// 触发更新的常用姿势
sharedMap.value = new Map(sharedMap.value);
如果项目对性能敏感且 Map 的变更非常频繁，也可以考虑使用普通对象来替代 Map，或将 Map 的变更封装成业务事件再通知子组件更新。
// 使用普通对象的替代方案（仅示例）
const data = ref({}); // 而不是 Map
data.value.userName = 'Liu';
常见坑与排错要点
遇到 Cannot read properties of undefined (reading 'get') 这类错误时，最常见的原因是 子组件在接收到 map 之前就尝试读取，或者父组件没有正确传递 Map。
// 调试要点
console.log('Parent map value before render:', sharedMap?.value);
排错步骤：确保父组件确实通过 prop 将 Map 传给子组件，并在子组件使用前进行 guard，例如 v-if 判断或在计算属性中使用可选链。
// 子组件中的防御性读取
const value = computed(() => props.map?.get('key') ?? 'default');
