面试题：Vue Fragment在中等规模电商项目商品展示模块的应用

使用Vue Fragment优化电商商品展示模块代码结构的方法

提高复用性：通过将商品展示相关的HTML结构、CSS样式和JavaScript逻辑封装在一个Vue组件中，在不同页面或场景中直接复用该组件，无需重复编写。例如商品列表页和商品详情页都可复用此组件。
增强维护性：将商品展示相关代码集中在一个组件内，便于修改和维护。若要修改商品价格的显示样式，只需在该组件内进行调整，而不会影响到其他无关代码。

具体实现步骤

创建Vue组件：

<template>
  <Fragment>
    <img :src="product.image" alt="商品图片">
    <h2>{{product.name}}</h2>
    <p>价格: {{product.price}}</p>
    <p>{{product.description}}</p>
  </Fragment>
</template>

<script>
import { Fragment } from 'vue';
export default {
  name: 'ProductDisplay',
  components: {
    Fragment
  },
  data() {
    return {
      product: {
        image: '',
        name: '',
        price: 0,
        description: ''
      }
    };
  },
  props: {
    productData: {
      type: Object,
      required: true
    }
  },
  created() {
    this.product = this.productData;
  }
};
</script>

<style scoped>
/* 组件内的样式，只作用于该组件 */
img {
  width: 200px;
  height: 200px;
}
h2 {
  font-size: 20px;
}
</style>

响应式布局：

使用CSS媒体查询来实现不同设备上的布局不同。例如：

@media (max - width: 768px) {
  img {
    width: 100px;
    height: 100px;
  }
  h2 {
    font - size: 16px;
  }
}

也可以借助一些CSS框架，如Bootstrap、Tailwind CSS等，利用它们的网格系统和响应式类来快速实现响应式布局。在Vue组件中引入相应框架的CSS文件，然后在模板中使用框架提供的类名来控制布局。例如使用Bootstrap：

<template>
  <Fragment>
    <div class="row">
      <div class="col - md - 4">
        <img :src="product.image" alt="商品图片" class="img - fluid">
      </div>
      <div class="col - md - 8">
        <h2>{{product.name}}</h2>
        <p>价格: {{product.price}}</p>
        <p>{{product.description}}</p>
      </div>
    </div>
  </Fragment>
</template>

复用组件：在其他需要展示商品信息的Vue组件中，引入并使用该ProductDisplay组件。

<template>
  <div>
    <ProductDisplay :productData="product1"></ProductDisplay>
    <ProductDisplay :productData="product2"></ProductDisplay>
  </div>
</template>

<script>
import ProductDisplay from './ProductDisplay.vue';
export default {
  name: 'ProductList',
  components: {
    ProductDisplay
  },
  data() {
    return {
      product1: {
        image: 'image1.jpg',
        name: '商品1',
        price: 100,
        description: '这是商品1的描述'
      },
      product2: {
        image: 'image2.jpg',
        name: '商品2',
        price: 200,
        description: '这是商品2的描述'
      }
    };
  }
};
</script>

星途面试题库

面试题：Vue Fragment在中等规模电商项目商品展示模块的应用

知识考点

面试题答案

使用Vue Fragment优化电商商品展示模块代码结构的方法

具体实现步骤