对象映射：

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

作用：

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

映射特点：

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: '[email protected]',
      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: '[email protected]',
  phone: '1234567890'
}
</script>

<style></style>

效果: