面试官问vue平常封装过哪些组件

我平常在Vue中封装过一些常用的组件，例如：

1. 按钮组件（Button）：可以根据不同的样式和功能需求，封装不同类型的按钮，例如普通按钮、主要按钮、次要按钮等。

2. 模态框组件（Modal）：用于展示弹出窗口，可以根据需要设置标题、内容和按钮等。

3. 表单组件（Form）：可以封装常用的表单元素，例如输入框、下拉选择框、单选框、多选框等，以及表单验证的逻辑。

4. 列表组件（List）：用于展示数据列表，可以支持分页、排序和过滤等功能。

5. 菜单组件（Menu）：用于创建导航菜单，可以支持多级菜单和动态生成菜单项等。

6. 图表组件（Chart）：可以使用第三方图表库，封装成Vue组件，用于展示各种类型的图表数据。

这只是一些常见的组件封装示例，实际上，根据项目需求，可能还会封装其他类型的组件。

相关问题

面试官问vue2和vue3的区别

Vue 3相对于Vue 2的主要区别如下：

1. 性能优化：Vue 3引入了一些新的响应式系统，以及编译器优化，可以带来更快的渲染速度和更小的包体积。

2. 更好的类型支持：Vue 3使用TypeScript作为开发语言，并引入了一些新的类型定义，使得开发过程中更加顺畅和安全。

3. 组合式API：Vue 3引入了组合式API，使得开发者可以更好地组织代码逻辑，并且提高代码的可复用性和可维护性。

4. Teleport组件：Vue 3中新增了Teleport组件，可以更方便地在DOM树中移动元素，使得Portal和Modal等组件的实现更加简单。

5. 其他改进：Vue 3还引入了Suspense组件、Fragment组件等新特性，以及对v-model、v-if等指令的改进等。

需要注意的是，Vue 3的一些新特性可能与Vue 2不兼容，因此在进行迁移时需要仔细考虑。

vue3封装数字滚动组件

Vue3中封装数字滚动组件通常是为了复用一个可以滚动显示数字的功能模块。这个过程涉及创建一个自定义的Vue组件，它可以接受一些属性如最小值、最大值、初始值等，并通过响应式绑定数据，实现数字的动态滚动。

下面是一个简单的步骤示例：

1. **创建组件**：首先，创建一个新的文件`NumberScroll.vue`，并定义一个名为`NumberScroll`的Vue组件。

<template>
  <div class="number-scroll">
    <input type="number" :value="value" :min="min" :max="max" @input="updateValue">
    <button @click="scroll">滚动</button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0,
    },
    min: {
      type: Number,
      required: true,
    },
    max: {
      type: Number,
      required: true,
    },
  },
  methods: {
    updateValue(e) {
      this.value = e.target.value;
    },
    scroll() {
      // 滚动逻辑，比如增加或减少值
      if (this.value < this.max) {
        this.value++;
      } else if (this.value > this.min) {
        this.value--;
      }
    },
  },
};
</script>

<style scoped>
.number-scroll {
  /* 样式 */
}
</style>

2. **在父组件中使用**：然后，在需要使用滚动组件的地方导入并使用它，传入相应的属性值。

<template>
  <div>
    <NumberScroll v-bind:value="currentValue" v-bind:min="minValue" v-bind:max="maxValue" />
  </div>
</template>

<script>
import NumberScroll from '@/components/NumberScroll.vue';

export default {
  components: { NumberScroll },
  data() {
    return {
      currentValue: 0,
      minValue: 1,
      maxValue: 100,
    };
  },
  // ...其他组件逻辑
};
</script>