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

在Vue开发中，我平常封装过以下几种常用的组件：

1. 表单组件：例如输入框（Input）、下拉选择框（Select）、单选框（Radio）、复选框（Checkbox）等，封装这些组件可以减少重复的代码，并且可以统一样式和验证规则。

2. 列表组件：例如表格（Table）、列表（List）等，封装这些组件可以实现数据的展示和操作，提高代码的复用性。

3. 模态框组件：例如对话框（Dialog）、提示框（MessageBox）等，封装这些组件可以实现弹窗效果，并且可以统一样式和交互方式。

4. 轮播图组件：例如图片轮播（Carousel）、文字轮播（Marquee）等，封装这些组件可以实现轮播效果，并且可以配置自定义的动画和样式。

5. 图表组件：例如柱状图（Bar Chart）、折线图（Line Chart）、饼图（Pie Chart）等，封装这些组件可以实现数据可视化的效果，并且可以配置自定义的数据和样式。

以上是我平常封装的一些常用组件，当然还有很多其他类型的组件可以根据具体需求来进行封装。

相关问题

面试官问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封装全局弹窗组件的步骤如下：

1. 创建一个Vue实例，作为全局弹窗组件的容器。可以使用`createApp`方法创建Vue实例，并将其挂载到一个DOM元素上。

2. 在全局弹窗组件上定义必要的属性和方法。比如，可以定义一个`visible`属性控制弹窗的显示与隐藏，一个`title`属性用于显示弹窗的标题，一个`content`属性用于显示弹窗的内容等。

3. 在全局弹窗组件内部实现弹窗的样式和交互逻辑。可以使用Vue的模板语法和样式定义实现弹窗的外观和样式效果，并通过Vue的响应式特性，实现弹窗的交互逻辑，比如点击关闭按钮时隐藏弹窗。

4. 添加全局方法，在Vue实例的原型上添加一个方法，用于在任意组件中调用弹窗组件。可以使用`app.config.globalProperties`来添加全局方法，以便在任何地方都可以访问到该方法。

5. 在组件中使用全局弹窗组件。在需要显示弹窗的组件中，通过调用全局方法来调用弹窗组件。可以通过传递参数的方式，动态设置弹窗的内容和样式。

6. 在全局弹窗组件的内部实现弹窗的生命周期钩子函数，比如`mounted`函数用于在弹窗组件被挂载到DOM后执行相应的逻辑。

通过以上步骤，就可以封装一个可在任何组件中使用的全局弹窗组件。在使用过程中，只需要调用全局方法，传入相应的参数，即可显示自定义的弹窗内容和样式，提供更好的用户体验。