对象键值对内容映射

对象映射：

数据字段的英文名映射为更易理解的中文标签进行展示。即数据字段英文名 -> 中文描述。

作用：

• 提高代码的可读性。
• 支持数据字段与展示内容的解耦，方便修改展示语言或样式，而无需改动数据源。

映射特点：

1. 映射的灵活性

   // 只需更改 fieldMapping 的内容即可修改字段的展示标签。
   const fieldMapping = {name: "Full Name",age: "Years Old",email: "Email Address",phone: "Phone Number",
   };
   

2. 适应数据模型的变化

   // 数据模型发生变化时，映射机制使组件更易于扩展。例如新增字段 address
   const fieldMapping = {...fieldMapping,address: "地址",
   };
   

3. 支持复杂数据结构

   // 如果字段是嵌套对象，可以用自定义函数处理映射
   const userData = {name: "张三",address: { city: "北京", street: "朝阳路" },
   };const fieldMapping = {name: "姓名","address.city": "城市","address.street": "街道",
   };const getNestedValue = (obj, key) =>key.split('.').reduce((o, k) => (o ? o[k] : 'N/A'), obj);<template v-for="(label, field) in fieldMapping"><div class="info-item"><strong>{{ label }}:</strong> {{ getNestedValue(userData, field) }}</div>
   </template>
   

4. 数据与视图解耦

   // 数据的命名和存储结构独立于视图，视图仅关心展示格式。
   // 例如：
   // 数据中使用英文命名 email，方便开发和 API 兼容。
   // 界面展示为 "电子邮箱"，方便用户阅读。
   

应用：

组件封装：

<template><div class="user-info" v-if="userData"><template v-for="(label, field) in fieldMapping" :key="field"><div class="info-item"><!-- 在组件中，使用了 userData[field] || 'N/A' 来处理可能的字段缺失问题：
如果 userData 中某字段不存在，渲染 "N/A"，避免页面显示 undefined 或报错。
这种处理方式是简单的数据保护策略。--><strong>{{ label }}:</strong> {{ userData[field] || 'N/A' }}</div></template></div><div v-else>Loading...</div> <!-- 显示 loading，直到 data 准备好 -->
</template><script setup>
const props = defineProps({userData: {type: Object,required: true,default: () => ({name: '张三',age: 28,email: '[e-mail]',phone: '1234567890'})}
})
// fieldMapping 的键是 userData 对象的字段名（如 name、age），值是字段对应的中文标签（如 "姓名"、"年龄"）。
const fieldMapping = {name: "姓名",age: "年龄",email: "电子邮箱",phone: "联系电话",
};
</script><style scoped>
.user-info {padding: 20px;background-color: #f9f9f9;border-radius: 8px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}.info-item {margin-bottom: 10px;font-size: 16px;
}strong {color: #333;
}
</style>

组件使用：

<template><Change :userData="list"></Change>
</template><script setup>
import Change from '../components/change.vue'
const list = {name: '张三',age: 28,email: '[e-mail]',phone: '1234567890'
}
</script><style></style>

效果: