一、css
中的样式优先级顺序
！important > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配选择器
（内联样式） > （内部样式） > （外部样式）
2.如何使一个盒子水平垂直居中？
（1）flex布局：
display: flex;
align-items: center;
justify-content: center;
（2）position定位：
父元素：绝对定位
子元素：相对定位，会将元素都转为行内块
调整子元素的位置的方法：
子元素left:50%;top:50%,
无需宽高transform:translate(-50%,-50%)
需要宽高，margin-left/margin-top子元素宽高的一半
子元素left:0;top:0;right:0;bottom:0
需要宽高，margin:0,auto;（3）grid布局：
display:grid;
place-item:center;中有哪些隐藏页面元素的方法?
（1）利用display：none来实现
（2）利用visibility:hidden隐藏元素
（3）利用opacity:0
二、js篇
1.数组中foreach和map的区别
（1）相同点
- 都是循环遍历数组中的每一项。
- 每次执行匿名函数都支持三个参数，参数分别为item(当前每一项)，index(索引值)，arr(原数组)。
- 匿名函数中的this都是指向window。
- 只能遍历数组。
（2）不同点
- map()会分配内存空间存储新数组并返回，forEach()不会返回数据。
- forEach()允许callback更改原始数组的元素，map()返回新的数组，map() 不会对空数组进行检测。
2.数组中常用的方法有哪些
（1）()，向数组的末尾添加一个或多个元素，并返回新的数组长度。原数组改变。
（2）()，删除并返回数组的最后一个元素，若该数组为空，则返回undefined。原数组改变。
（3）()，向数组的开头添加一个或多个元素，并返回新的数组长度。原数组改变。
（4）()，删除数组的第一项，并返回第一个元素的值。若该数组为空，则返回undefined。原数组改变。
（5）()，将数组的每一项用指定字符连接形成一个字符串。默认连接字符为 “,” 逗号。
3.如何获取数组中的最后一个元素
（1）pop()方法：pop()方法，删除数组最后一个元素，并返回该元素，所以利用这个方法可以取到数组的最后一个；
（2）length方法：
let arr=["1","2","3"];
( arr[ -1 ] ); // "3"（3）slice方法：在数组上使用slice(-1)就可以获取数组的最后一个元素了。(-1 指最后一个元素，-2 指倒数第二个元素)
let arr=["1","2","3"];
( (-1) ); // ["3"]和const的区别
（1）const 用于声明一个常量，即不可改变的变量。这意味着你不能再次对常量进行赋值，否则会抛出一个错误。但是，如果常量声明的是一个对象，你仍然可以修改对象的属性。
（2）let 用于声明一个变量，允许你对变量进行重新赋值。
和localstore和sessionstore区别
（1）相同点：cookie、sessionStorage和localStorage都用在客户端存储数据，每一个都有自己的存储和到期限制。
（2）不同点：
- 存储大小：cookie数据大小不能大于4K；localStorage和sessionStorage则可以达到5M
- 有效时间：cookie在设置的有效期内一直有效；localStorage存储持久数据，只要不手动清除则一直存在；sessionStorage数据在当前浏览器关闭后就会被自动清除
三、vue
1.vue2和vue3的区别
（1）双向数据绑定原理不同
- Vue2 的双向数据绑定是利用ES5的一个() 对数据进行劫持，结合发布订阅模式的方式来实现的。
- Vue3 中使用ES6的Proxy API对数据代理。
（2）API 类型不同
- Vue2 使用选项类型api,选项型api 在代码里分割了不同的属性：data,computed,method等。
- Vue3 使用合成型api,新的合成型api 能让我们使用方法来分割，相比于旧的api 使用属性来分组，这样代码会更加简便和整洁。
（3）定义数据变量和方法不同
- Vue2是把数据放到了data 中，在 Vue2中 定义数据变量是data(){},创建的方法要在method:{}
- Vue3 就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。使用以下三个步骤来建立反应性数据：1）从vue 引入 reactive；2）使用 reactive ()方法来声明数据为响应性数据；使用setup()方法来返回我们的响应性数据，从而template 可以获取这些响应性数据。
（4）生命周期钩子函数不同
- Vue2 中的生命周期：beforeCreate 组件创建之前；created 组建创建之后；beforeMount 组件挂载到页面之前执行；Mounted 组件挂载到页面之后执行，beforeUpdate 组件更新之前；updated组件更新之后
- Vue3 中的生命周期：setup 开始创建组件；onBeforeMount 组件挂载到页面之前执行；onMounted 组件挂载到页面之后执行；onBeforeUpdate 组件更新之前；onUpdated 组件更新之后；而且 Vue3 生命周期在调用前需要先进行引入。除了这些钩子函数外，Vue3 还增加了 onRenderTracked 和onRenderTriggered 函数。
-if和v-show区别
v-if控制Dom是否存在，v-show控制样式
3.组件及通信方式有哪些
（1）父子传递
- 父组件通过props向下传递数据给子组件
- 子组件通过 $emit 和父组件通信
（2）兄弟组件传值
- EventBus进行兄弟组件的传值
（3） 祖孙组件传递
- provide 与 inject进行祖孙组件间的传递
（4） vuex
4.路由的两种工作模式
hash 和 history区别
（1）hash
- 地址中永远带有#号，不美观
- 若以后将地址通过第三方手机app分享，若app效验严格，则地址会被标记为不合法
- 兼容性较好
（2）history模式
- 地址干净美观
- 兼容性和hash模式相比略差
- 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题
和computed区别
（1）是否有缓存功能
- computed是有缓存的，只有它依赖的属性值改变的时候，它才会进行计算。
- watch是没有缓存功能的，只要监听的数据变化了，它就会触发相应的操作。
（2）是否支持异步
- computed是不支持异步的，当computed内有异步操作的时候，它是监听不到数据变化的。
- watch是支持异步操作的，适合监听路由和设置计时器等。
6.vue3中的ref和reactive的区别
（1）数据类型不同：ref用于包装JavaScript基本类型的数据（如字符串、数字、布尔值等），而reactive可以用于包装JavaScript对象和数组等复杂类型的数据。
（2）使用方式不同：ref需要通过在模板中使用ref指令以及在JavaScript代码中使用ref函数进行创建和使用，而reactive则需要通过调用提供的reactive函数进行包装和创建。
（3）访问方式不同：对于通过ref函数创建的响应式数据，我们可以通过.value属性来访问其实际值；而对于通过reactive函数创建的响应式对象，我们可以直接访问其属性或调用其方法。
7.为什么 vue 中定义变量的地方需要使用data函数并 return 出去？
因为不使用包裹的数据会在项目的全局可见，造成变量污染；使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。
8.在 vue 中，v-for 的 diff 算法的原理是什么？
在Vue中，v-for 的diff算法原理是能够可以自动追踪列表中项目的身份，在列表数据发生变化时（例如，项目被添加、删除或重新排序），Vue能够智能地对DOM进行更新，而不是每次都重新渲染整个列表。
9.如果 v-if 和 v-for 同时使用，哪个优先级更高？
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。如果v-if和v-for一起用的话，vue中的的会自动提示v-if应该放到外层去。
10.关于 vue 的生命周期有哪些？简单描述
Vue 3中的选项式生命周期钩子基本上与Vue 2保持一致，它们都是定义在Vue实例的对象参数中的函数，它们在Vue实例的生命周期的不同阶段被调用。这里主要描述一下vue3的生命周期：
（1）onBeforeMount：对应Vue2中的beforeMount钩子，Vue实例挂载之前调用；
（2）onMounted：对应Vue2中的mounted钩子，Vue实例挂载完成后调用；
（3）onBeforeUpdate：对应Vue2中的beforeUpdate钩子，数据更新时调用，但在DOM更新前；
（4）onUpdated：对应Vue2中的updated钩子，数据更新后在DOM更新后调用；
（5）onBeforeUnmount：对应Vue2中的beforeDestroy钩子，Vue实例销毁前调用；
（6）onUnmounted：对应Vue2中的destroyed钩子，Vue实例销毁后调用。
11.关于 vuex 共有几个属性，哪里可以书写同步任务，哪里可以书写异步任务？
vuex共有5个属性，分别为：
（1）state：vuex的基本数据，用来存储变量；
（2）geeter：从基本数据(state)派生的数据，相当于state的计算属性；
（3）mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)；
（4）action：和mutation的功能大致相同，不同之处在于，Action提交的是mutation，而不是直接变更状态，Action可以包含任意异步操作；
（5）modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
同步任务可以在mutations中书写，因为mutations是直接修改状态的地方。异步任务通常在actions中书写。
12.什么事跨域，如何解决跨域问题？
跨域：跨域就是当在页面上发送ajax请求时，由于浏览器同源策略的限制，要求当前页面和服务端必须同源，也就是协议、域名和端口号必须一致。
解决方案：
- Node中间件跨域(http-proxy-middleware)，两次跨域。同源策略是浏览器需要遵循的标准，而服务器向服务器发送请求则无需遵循同源策略，使用一个代理服务器，设置Access-Control-Allow-Origin等字段便可以解决浏览器和代理服务器之间的跨域问题，而服务器之间没有限制，便实现了浏览器和服务器之间跨域通信，并且可以实现代理多个请求到不同的服务器。
- nginx反向代理。实现原理和node中间件代理类似，只需要修改nginx的配置即可解决跨域问题，支持所有浏览器，支持session，可修改cookie信息
四、nodejs篇
1.浅谈一下nodejs中的express？
概念：Express是NodeJS开发中一个非常重量级的第三方框架，它对于NodeJS服务端就相当于Jquery对于HTML客户端。
核心功能：
- 托管静态资源：nodejs实现静态服务器功能在express中只需要一行代码；
- 路由：express自带路由功能,让Node服务端开发变得极其简单，同时express支持链式语法，可以让代码看起来更加简洁
- 中间件：Express最为核心的技术和思想，万物皆中间件