一、逃不开的自我介绍
经历过才知道面试自我介绍里面暗藏玄机，主要是需要面试者能够简洁明了讲解完自身情况。例如，姓名、毕业学校、自身所学习的技术栈（技术栈尽量挑重要的，像前端三件等等）。简要讲解一下自己的项目经历，方便面试官从你的介绍中了解你详细的信息。时间尽量简短些，方便。
二、css题目
1.如何让元素居中？这里考察布局
这次的面试充分考虑到了新人的现状，面试官也是从css开始，这道题我是先回答的利用position绝对定位来完成，使用定位方法呢，又需要考虑transform。还有flex布局，利用flex布局中的justify-content：center；（主轴方向居中），align-items：center；（垂直方向居中）。以及还有一种可能永远都用不到的方法，使用margin外边距强行将元素居中。
2.css中有哪些选择器，它们的优先级是怎么排序的？
选择器：内联样式；ID选择器；类选择器、属性选择器和伪类选择器；元素选择器和伪元素选择器；优先级排序是利用特定性值的大小来排序的，特定性值较大的具有更高的优先级，这也可以叫权重。（内联样式>ID选择器>类选择器、属性选择器和伪类选择器>元素选择器和伪元素选择器）
3.如何隐藏页面中的元素？
dispaly：none；直接隐藏元素，取消元素的占位以及元素的点击事件。（）
opacity：0；将元素的透明度降低为0，不会取消元素的占位，以及点击事件。
position：absolute； top：-999px；这类方法相当于将元素移出所显示区域，占位失效点击事件依旧存在。
三、问了一个项目中的vue题目
1.v-if，v-show的区别
在Vue中，v-if和v-show都是用来控制元素显示与隐藏的指令，但它们在实现方式、性能消耗以及使用场景上有所不同。
v-show通过CSS的display属性控制元素的显示与隐藏。无论初始条件如何，元素总是会被渲染，只是通过display: none或display: block来控制其可见性。而v-if则是通过控制Vue的虚拟DOM树上的节点来联动控制真实DOM上的节点，从而控制元素的显示与隐藏。当条件为假时，v-if不会渲染元素，直到条件第一次变为真时才开始渲染。
v-if拥有更高的切换性能开销，因为它涉及到DOM元素的创建和销毁。
v-show有更高的初始渲染消耗。
四、js
1.js中的数据类型
首先是基本数据类型：
Number（数字）、String（字符串）、Boolean（布尔值）、Null（空值）、Undefined（未定义）、Symbol（符号）、Bigint（大整数）
其次是复杂数据类型：
Object（对象数据类型）、Array（数组）、function（函数）
2.你知道什么是闭包嘛?
闭包也就是一个函数引用了另一个函数作用域中的局部变量，通常是在嵌套函数中实现的。
闭包可以延伸变量的作用范围-变量不会销毁（核心作用）
同时也会引申出一个问题，闭包会使变量被执行后依旧存在于内存中，直到没有任何引用闭包。这种情况下，可能会导致内存泄露问题。
3.你知道js中的事件循环嘛?请你简单的介绍一下事件循环?
js是单线程，为了防止代码堵塞，我们把代码分为同步和异步，其中同步代码直接给js引擎执行，而异步代码则交给浏览器（宿主环境）。同步代码直接放入执行栈中执行，而异步代码则需等待时机送入任务队列中排队。同步代码执行完毕后，会去任务队列反复查看是否有异步任务，有就送至执行栈执行，反复循环查看执行，这就是事件循环。
五、你知道跨域嘛?为什么会产生跨域问题?如何解决跨域问题?
什么是跨域，一个页面试图向不同源（不同的域名，协议和端口）发起HTTP请求。
由于浏览器的同源策略限制了跨域请求，用于保护用户的安全性和隐私，这样就产生了跨域问题。
如何解决？
- JSONP：通过动态创建
<script>标签来实现跨域请求。 - CORS（Cross-Origin Resource Sharing） ：通过服务器设置特定的HTTP头部来允许跨域请求。
- 服务器端代理：通过在同源服务器中设置一个代理转发请求到目标服务器
六、Vue中有哪些生命周期呢?
vue2生命周期四个阶段八个方法
- 创建阶段：创建前后
- 挂载阶段：挂载前，挂载后（mounted）
- 更新阶段：更新前，更新后
- 销毁阶段：销毁前，销毁后
vue3生命周期
- 创建阶段：创建前后
- 设置阶段：setup函数
- 挂载阶段：挂载前（beforeMount），onBeforeMount，挂载后（mounted），onMounted
- 更新阶段：更新前（beforeUpdate），onBeforeUpdate，更新后（updated），onUpdated
- 卸载阶段：卸载前（beforeUnmount），onBeforeUnmount，卸载后（unmounted），onUnounted
七、vuex是用来干嘛的呢？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它的主要作用是集中管理Vue应用中多个组件的共享状态，并确保这些状态以可预测的方式发生变化。
Vuex的核心概念包括以下几个部分：
- State：是驱动应用的数据源，可以在组件间共享。
- Getters：类似于计算属性，可以从state派生出一些状态，例如对列表进行过滤并计数。
- Mutations：是唯一可以直接更改state的方法，它们必须是同步函数。
- Actions：用于提交mutation，可以包含任意异步操作。
- Modules：当应用变得非常复杂时，可以将store分割成模块，每个模块拥有自己的state、mutations、actions、getters等。
八、项目拷打
1.路由守卫你是怎么处理的？在什么地方应用了？
路由守卫主要用来通过跳转或取消的方式守卫导航，路由守卫本质上是一系列的钩子函数。
在我的项目中，路由守卫的应用场景非常广泛，不仅限于权限校验，还包括但不限于以下几个方面：
- 权限校验：如上例所示，在全局前置守卫中检查用户是否已登录及是否拥有访问目标路由的权限，未通过则重定向到登录页面或权限不足页面。
- 页面加载前数据预获取：对于某些需要依赖数据渲染的页面，可以在路由守卫中提前获取这些数据，如从API获取用户信息、文章列表等，减少页面白屏时间，提升用户体验。
- 页面离开前的数据保存：利用
beforeRouteLeave守卫，在用户离开当前页面前提示保存未提交的数据，或自动将表单数据提交到服务器，避免数据丢失。
2.比如你封装过什么组件嘛？你能讲一下你是怎么封装的嘛？你觉得封装一个组件要注意一些什么东西呢？
我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)、tabbar(切换功能组件)、list(上拉加载更多功能组件)）
例如，利用element-plus组件库二次开发封装select、icon组件,以及公共目录菜单menu组件。
首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性低等问题。
我们一般用脚手架开发项目，每个 .vue单文件就是一个组件。在另一组件import 导入，并在components中注册，子组件需要数据，可以在props中接受定义。并且，在封装组件时，我们大多采用引入现成的组件库，例如element-plus，从中我遵守相互独立，完全穷尽原则，保留组件原功能，并在此基础上不断添加。
3.你在项目中的echarts怎么用的呢？有没有一些具体的实现的细节？
Echarts 是一个由百度开发的开源数据可视化图表库，它可以在网页上实现各种美观、交互性强的图表展示，包括柱状图、折线图、饼图、地图等多种类型。Echarts 具有以下特点：
- 丰富的图表类型：满足不同数据展示需求。
- 高度可定制性：可以通过配置项对图表的外观、样式、交互等进行精细调整。
- 良好的交互性：支持鼠标悬停、点击等交互操作，方便用户探索数据。
- 跨平台兼容性：可以在各种主流浏览器上运行。
我在项目中先使用 npm 安装：在项目目录下执行 npm install echarts，然后在.vue文件后缀名文件中通过 import echarts from 'echarts' 引入。
然后在页面中通过配置初始化图表：
const myChart=echarts.init(document.getElementById('myChart'));
具体图表数据和选项在option中完成。const option = {}，最后使用配置项显示图表
myChart.setOption(option);
九、总结
第一次参加面试，在开始之前我就知道自己有很多的不足。对于自己的项目没有重新去review，自己的代码不熟练，平时开发写东西也不会去想这么多细致的问题，总是觉得能用就行，项目中，缺少对项目重难点的分析，这导致我在面试中对于自己的项目，时常会卡壳。面对八股题也没有去进行一个细致的了解和深入学习，语言生硬，没能转化为自己的文字去理解。
面试，无非就是一个检查你的准备工作的过程，我相信面包会有的，牛奶也会有的。
