个人总结的前端面试题

一.vue2 与vue3 的 区别
1.vue2和vue3 双向绑定  方法不同

vue2是object.defineProperty() ，后添加的属性是劫持不到的，所有会出现数据更新了视图没更新的问题

vue3是new Proxy()，即使后添加的也可以劫持的，且不需要循环

2.$set在vue3中没有了，因为new Proxy不需要

3.v-if和v-for优先级不同
vue2 for>if,vue3 if>for

4.vue2是选项式API，vue3可以向下兼容（既可以是选项式API，也可以是组合式API或者set up 语法糖形式）

二.vue3 hooks
     说明：hooks(函数式)，主要让功能模块细分（提高项目的维护性）
    问：vue3写代码的方式
    答：setup语法糖形式
    问：怎么维护？
    答：使用hooks

三.如果vue3用setup写如何获取类似于vue2中的this? 
    先全局封装方法，然后使用 getCurrentInstance() 函数获取到当前组件的实例对象，然后从实例对象中获取需要的属性或方法。

四.vue3 常用的API有哪些？

1.createApp() 创建一个应用实例
  说明：等于vue2里的 new vue()
  使用场景：写插件的时候（或封装全局组件时会使用）
2.provide/inject  依赖注入
    说明：传值
    使用场景：某一个父组件传值到后代组件，如果层级过多传递麻烦，所有使用
3.directive
  说明：自定义指令
  使用场景：后台管理系统中的按钮权限控制（一个用户拥有某些权限，但是只能查看和修改，不能删除）
4.mixin
  说明：1.全局混入
      2.局部混入
  使用场景：可以添加生命周期，小程序的分享功能常用
  缺点：不怎么好维护和查询数据来源
5.app.config.globalProperties
  说明：获取vue这个全局对象的属性和方法
    使用场景：自己封装插件的时候需要把方法添加到对象中
6.nexTick
  说明：等下一次DOM 更新刷新的工具方法：nextTick返回一个Pormise,回调函数是放在Pormise中的，所以是异步执行的
    使用场景：DOM要更新，那么vue是数据驱动dom，所以数据的赋值就要在nextTick中进行
7.computed
  说明：是一个计算属性
    使用场景：在有缓存的地方
8.reactive,ref
  说明：用来定义数据的，和vue2的data类似
9.watch
  说明：用于需要监听的场景（vue3不需要深度监听）
10.markRaw
  说明：不被new proxy()代理，是静态数据
11.defineProps()
  说明：父组件传递的值，子组件使用setup的形式，需要用defineProps（）接收
12.defineEmits()
  说明：当前组件使用setup形式，自定义事件需要使用defineEmits
13.slot
  说明：分为三种1是匿名，2是具名，3是作用域
    使用场景：在后台管理系统中，左侧是固定菜单，右侧是不固定内容，那么右侧就是slot

五 .vue3常用的响应式数据类型
1.ref:基本类型
2.reactive：复杂类型
3.toRef:解构的某一个值
4.toRefs:解构多个值

六.介绍一下teleport组件及其使用场景
说明：teleport组件是一个传送门
使用场景：写弹出框时，需要在页面居中位置展示，不受当前组件限制，可以把盒子传送至body中

七.vue项目打包上线

路由模式：history

默认路由模式：hash 带#

前端自测使用hash

项目上线使用history

出现空白页问题,在vue.config.js路径修改为'./'

环境变量 
开发环境：.env.development 
生产环境：.env.production 
在项目中的根目录新建文件

八.vue设置代理
1.搭建后端目录

全局命令：npm install express-generator -g

进入项目目录：express --view=ejs server

2.node — express 跨域

router.all('*', function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Methods', '*');
  res.header('Content-Type', 'application/json;charset=utf-8');
  next();
});

九.布局单位
px:为固定单位
em，rem：为相对单位
    em:是父元素的font-size
    rem:是根元素的font-size，本身不具备自适应能力

移动端用到最多的单位是rem,因为相对于根元素好计算

十.自适应布局

ui设计图 宽一般为750

前端调试以iphone6为基准

十一.springboot的理解，它有哪些特性

理解：是用来快速开发spring应用的一个脚手架，其设计目的是用来简化spring应用的初始化搭建以及开发过程

特性（优点）：
1.提供很多内置的starter结合自动配置，对主流框架无配置集成，可以开箱即用
2.简化了开发，采用javaconfig的方式可以使用零xml的方式进行开发
3.内置web容器无需依赖外部web服务器，省略了web.xml，直接运行jar文件就可以启动web应用
4.帮助我们管理了常用的第三方依赖的版本，减少了版本冲突的问题
5.自带了监控功能，可以监控应用程序的运行状况，或者内存，线程池，HTTP请求统计等，同时还提供关闭应用程序等功能

十二.spring和springboot的关系和区别

spring boot是spring生态的产品

spring boot它不是一个框架，它是一个可以快速构建基于spring的脚手架（里面包含了spring和各种框架），为开发spring生态其他框架铺平道路

spring boot是为了更快速的开发spring生态的整个系统而诞生的

这两者不是一个层面的东西，没有可比性

十三.spring boot的核心注解

1.@SpringBootApplication 标记成Springboot应用
2.@SpringBootConfiguration 标记启动类是一个配置类
3.@EnableAutoConfiguration 用来启动自动配置类
4.@Conditional很关键，没有它我们无法在自定义应用中进行定制开发
    （1）@ConditionalOnBean 容器当中是否存在这个Bean,如果存在则启用
      (2) @ConditionalOnMissingBean 容器中如果缺失这个Bean则启用
     (3) @ConditionalOnClass 容器当中是否存在这个Class,如果存在则启用
     (4) @ConditionalOnExpression 用于在满足特定条件时才启用某个 Bean 或配置类

十四.spring boot配置原理

1.通过@SpringBootConfiguration引入了@EnableAutoConfiguration（负责启动自动配置功能）
2.@EnableAutoConfiguration引入了@Import
3.spring容器启动时：加载IOC容器时会解析@Import
4.@Import导入了一个deferredImportSelector,它会使spring boot的自动配置类的顺序在最后，方便我们扩展和覆盖
5.读取所有的/META-INF/spring.factories文件
6.过滤出所有的AutoConfigClass类型的类
7.最后通过@Conditional排除无效的自动配置类

十五.Mysql有几种锁？

1.表级锁： 开销小， 加锁快； 不会出现死锁； 锁定粒度大， 发生锁冲突的概率最高， 并发度最低。
2.行级锁： 开销大， 加锁慢； 会出现死锁； 锁定粒度最小， 发生锁冲突的概率最低， 并发度也最高。
3.页面锁： 开销和加锁时间界于表锁和行锁之间； 会出现死锁； 锁定粒度界于表锁和行锁之间， 并发度一般。

十六.MySQL 中有哪些不同的表格？
共有 5 种类型的表格：
1. MyISAM
2. Heap 
3. Merge 
4. INNODB 
5. MISAM

十七.MySQL性能调优经验

1.为查询缓存优化你的查询
2.EXPLAIN你的SELECT查询
3.当只要一行数据时使用LIMIT 1
4.为搜索字段建索引
5.在Join表的时候使用相当类型的例，并将其索引
6.千万不要 ORDER BY RAND()
7.避免 SELECT *
8.永远为每张表设置一个 ID
9.使用 ENUM 而不是 VARCHAR
10.从 PROCEDURE ANALYSE() 取得建议
11.尽可能的使用 NOT NULL
12.无缓冲的查询
13.把 IP 地址存成 UNSIGNED INT
14.固定长度的表会更快
15.垂直分割
16.拆分大的 DELETE 或 INSERT 语句
17.越小的列会越快
18.选择正确的存储引擎
19.使用一个对象关系映射器(Object Relational Mapper)

十八.MySQL常用函数
1.大小写函数
2.空格函数
3.连接函数
4.字符长度函数
5.字符截取函数
6.字符串填充函数
7.匹配字符函数

十九.vuex是什么？怎么使用？哪种功能场景使用它？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是：应用遇到多个组件共享状态时，使用vuex。

场景：多个组件共享数据或者是跨组件传递数据时

二十.vuex有哪几种属性？

有五种,分别是State , Getter , Mutation , Action , Module (就是mapAction)

二十一.vuex的state、getter、mutation、action、module特性分别是什么？

1.state：存放公共数据的地方
2.getter：获取根据业务场景处理返回的数据
3.mutations：唯一修改state的方法，修改过程是同步的
4.action：异步处理，通过分发操作触发mutation
5.module：将store模块分割，减少代码臃肿

二十二.页面刷新后vuex的state数据丢失怎么解决？

放在localStorage 或者sessionStorage中 ，或者借用辅助插vuex-persistedstate。
vuex-persistedstate的createPersistedState()方法

二十三.使用vuex的优势是什么？

作为全局变量来用；vue是单向数据流，有一个vuex来建一个”全局仓库“，可以减少很多开发时候的”传参地狱“。其实vuex中的所有功能都能够通过其他的方式进行实现，只不过vuex对这些方法进行了整合处理，使用起来更加便捷，同时也便于维护。

二十三.如何理解this关键字

1.直接输出this指向全局对象  （全局函数其实是window{全局对象}的方法）
2.this放在方法中，this指向调用这个方法的对象
3.new关键字做了什么？
    new会创建对象，将构造函数 中的this指向创建出来的构造函数（构造函数：是用来创建对象的）
4.箭头函数中的this指向谁？
  （1）普通函数：谁调用就指向谁；箭头函数：在哪里定义就指向谁
  （2）箭头函数外指向谁就指向谁
  （3）箭头函数中没有this

二十四.call，apply，bind的基础语法

1.call是一个对象，是函数的方法，call是直接调用
2.call可以调用函数，call可以改变函数中this的指向
3.apply和call会调用函数，区别是是传参的方式不同，apply是传数组
4.bind会作为一个返回值，可以多次调用

二十五.call，apply，bind的实际应用

1.继承：子类 可以使用父类的方法 （使用call的好处，可以实现多重继承）

二十六.理解同步与异步

常见的是异步程序：
1.计时器（setTimeout,setInterval）
2.ajax
3.读取文件

区别： 1.同步是阻塞模式，异步是非阻塞模式
      2.同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去
    3.异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。
    4.如果同步异步同时存在，则同步程序执行完成后才会执行异步程序

二十七.JavaScript运行机制 ——单线程

1.JavaScript是单线程的，一个任务完成后才能执行另一个任务 
2.process.nexTick方法在同步异步之间，setImmendiatee方法在当前任务循环结束后执行

二十八.JavaScript运行机制 ——事件循环

1.不断检测任务队列中是否存在任务，如果有，则执行；存在多个任务时，按顺序执行（任务队列是异步，异步程序执行完设置的事件后才会进入任务队列；运行栈式同步）

2.计时器时不准确的，因为它不是到点了就执行，而是需要等设置的时间到了才会进入任务队列中，而任务队列中的程序什么时候执行是取决于运行栈中的程序什么时候执行完成后，看任务队列中计时器前是否还有其他任务，如果有，则要把计时器前的任务执行完后才会执行计时器

二十九.JavaScript运行机制 ——宏任务与微任务

1.宏任务：计时器，ajax，读取文件
2.微任务：promise.then

执行顺序：
1.同步程序
2.process.nexTick
3.微任务(promise.then)
4.宏任务(计时器，ajax，读取文件)
5.setImmendiatee

三十.JavaScript运行机制 ——prominse与async函数

1.async函数的返回值是prominse对象
2.prominse中使用then函数，需要resolve

三十一.JavaScript中对象属性的描述，可枚举，可配置，可重写

1.configurable：属性是否可以删除。true可以，false不可以
2.enumerable：属性是否可以枚举。true可以，false不可以（枚举是指对象中的属性是否可以被遍历）
3.value:属性值
4.writable：属性是否可以修改/重写。true可以，false不可以
5.Object.defineProperty方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象

三十二.闭包的基本概念

1.概念：函数嵌套函数，内部函数就是闭包
2.特性：内部函数没有执行完成，外部函数变量不会被销毁
3.作用域链：
    （1）概念：各个作用域的嵌套关系组成一条作用域链
    （2）作用：是进行标识符（变量和函数）的查询，标识符解析就是沿着作用域链一级一级的搜索标识符的过程，而作用域链就是保证对变量和函数的有序访问
4.正常情况下，函数执行完成，内部变量会销毁（销毁：指释放内存空间）

三十三.闭包的应用

1.作用：可以封装一段代码

三十四.对象拷贝——JS内存结构

原始类型：数值，字符串，布尔，null,undefined
引用类型：对象，数组，函数

1.栈内存存储原始类型，堆内存存储引用类型

三十五.对象拷贝——浅拷贝

1.概念：是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 。

2.特性：如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 。

三十六.对象拷贝——递归

1.概念：自己调用自己
2.使用的必要条件：给递归函数安排出口/结束条件，否则会造成无限递归，无限递归会造成执行栈溢出，浏览器会报错。

三十七.对象拷贝——深拷贝

1.概念：是将对象及值复制过来，两个对象修改其中任意的值另一个值不会改变

2.特性：深拷贝后的对象与原始对象是相互独立、不受影响的，彻底实现了内存上的分离

三十八.对象拷贝——通过JSON拷贝

JSON是什么？
    JavaScript 对象表示法，是一种轻量级的数据交互格式。

1. JSON.stringify() 作用是将一个对象变成一个字符串
2.JSON.parse() 作用：是将一个字符串变成一个JavaScript对象

三十九.防抖与节流（一）

1.防抖概念：多次触发 只执行最后一次
2.防抖作用：高频率触发的事件,在指定的单位时间内，只响应最后一次，如果在指定的时间内再次触发，则重新计算时间
3.防抖使用场景：搜索时，用户在不断输入值时，用防抖来节约请求资源

4.节流概念：规定时间内 只触发一次
5.节流作用：高频率触发的事件,在指定的单位时间内，只响应第一次
6.节流使用场景：（1）鼠标不断点击触发，mousedown(单位时间内只触发一次)
           （2）监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

四十.原型对象

1.概念：每一个对象都有它的原型对象，它可以使用自己原型对象上的所有属性和方法
2.获取原型的方法：
    （1）通过对象的__proto__获取
    （2）通过构造函数的prototype属性拿到原型
    （3）通过类的prototype拿到原型
3.作用：通过原型对象给构造函数设置公共方法

四十一.ES6类的基础语法

1.类的声明：使用 class 关键字，后面跟着类名，并使用大括号包裹类的方法和属性。

2.类的构造函数：使用 constructor 方法来定义，它会在类实例化时自动调用。构造函数可以接收参数，用来初始化类的属性

3.类的属性：可以通过 this 关键字来定义，也可以在构造函数中初始化

4.类的方法：可以使用普通函数的方式来定义，也可以使用箭头函数的方式来定义。类的方法可以访问类的属性和其他方法

5.类的继承：使用 extends 关键字来实现，子类会继承父类的所有属性和方法。子类可以覆盖父类的方法，也可以使用 super 关键字来调用父类的方法

四十二.ES5类的基础语法

1.构造函数：用来创建类的实例，使用关键字this来指代实例的属性和方法

2.原型：用来为类定义共享的属性和方法，所有类的实例都可以访问原型中的属性和方法。

3.实例化：使用new关键字和构造函数来创建类的实例

4.继承：使用原型链来实现类的继承，子类可以访问父类的原型中的属性和方法

5.静态属性和方法：使用构造函数来定义的属性和方法，不会被实例继承，只能由类本身访问

6.getter和setter：用来获取和设置属性的值的方法，可以在类的原型中定义

7.类的继承：使用Object.create方法和call方法来实现类的继承

四十三.ES5与ES6的区别

1.语法：ES6引入了一些新的语法特性，比如箭头函数、模板字面量、const和let关键字等，这些语法特性使得代码更加简洁易读，同时也减少了一些潜在的错误。

2.类和模块：ES6引入了类和模块的概念，使得JavaScript更加像一种面向对象的语言。类是一种定义对象的模板，而模块是一种组织代码的方式，可以将代码分离为不同的文件，从而使得代码更加易于维护和重用。

3.Promise和异步编程：ES6引入了Promise的概念，使得异步编程更加易于理解和处理。Promise可以将异步代码组织为一个链式的调用，从而使得代码的可读性更高，同时也减少了一些潜在的错误。

4.函数：ES6引入了一些新的函数特性，比如默认参数、剩余参数和展开操作符等，这些特性使得函数更加灵活和易于使用。

5.总结：ES6相比ES5有更多的语法特性和新的概念，这些特性和概念使得JavaScript更加现代化和易于使用。

四十四.原型链

1.概念：在 JavaScript 中，每个对象都有一个指向它的原型对象的内部链接，这个链接称为原型链，原型链的概念使得对象可以继承另一个对象的属性，这种继承方式被称为原型继承。在 JavaScript 中，所有对象都继承自 Object.prototype，因此所有对象都可以访问 Object.prototype 中定义的属性和方法。

2.作用：（1）数据共享 节约内存内存空间
       （2）实现继承

四十五.CSS的盒子模型

1.有两种： （1）标准盒子模型
        （2）IE盒子模型
2.区别：
    标准盒子模型：有margin,border,padding,content
  IE盒子模型:margin,content包含了(border,padding,content)

3.通过CSS转换盒子模型
    （1）转换为标准盒子模型：box-sizing:content-box
    （2）转换为IE盒子模型：box-sizing:border-box

四十六.line-height和height的区别

1.line-height是每一行文字的高，如果文字换行则整个盒子的高度会增大(行数*行高+边框高度)
2.height是一个死值，写多少就是多少，不会改变

四十七.CSS选择符有哪些，那些属性可以继承？

1.CSS选择器
    （1）标签选择器（div,p,h1,li,ul）
    （2）类选择器(.)
    （3）层级选择器(后代选择器ul li）
    （4）id选择器（#）
    （5）组选择器(.box1,.box2,.box3)
    （6）伪类选择器(.box:)
    （7）通配选择器（*）
    （8）相邻选择器（+）
    （9）子元素选择器（>）
    （10）属性选择器（a[href]）
2.CSS属性哪些可以继承
    （1）文字系列：font-size,color,line-height,text-align

3.CSS属性哪些不可以继承
    （1）marign
    （2）padding
    （3）border

四十八.CSS优先级算法如何计算？

1.优先级比较：!important > 内联样式 > id > class > 标签 > 通配

2.CSS权重计算：
    （1）第一：!important                  权重值为无限大
    （2）第二：内联样式（style）     权重值为1000
    （3）第三：id选择器                      权重值为100
    （4）第四：类选择器                      权重值为10
    （5）第五：标签&伪元素选择器     权重值为1
    （6）第六：通配，>,+                    权重为0 （后者覆盖）

四十九.用CSS画一个三角形

1.用边框画:border-left,border-right,border-top,border-bottom任选一个加solid(实线)和颜色，其他三个solid(实线)和transparent(透明)

五十.一个盒子不给宽高如何居中

1.方法一：先画两个盒子，一个为父盒子，一个为子盒子，先设置父盒子的宽高，然后设置父盒子的display为flex,justify-content为center,align-items为center

2.方法二：使用定位，先画两个盒子，一个为父盒子，一个为子盒子，先设置父盒子的宽高，然后设置父盒子的position为relative,子盒子设置position为absolute,left为50%，top为50%，transfrom为translate为（-50%，-50%）

五十一.display有哪些值？说明它们的作用

1.none:隐藏元素
2.block:把某个元素转换为块元素
3.inline：把某个元素转换为内联元素
4.inline-block：把某个元素转换为内块元素
5.table:把某个元素转换为块级表格元素，表格前后带有换行符

五十二.对于BFC规范(块级格式化上下文)的理解

1.概念：就是页面上一个隔离的独立容器，容器里的子元素不会影响到外面的元素

五十三.箭头函数与普通函数的区别？

1. 箭头函数比普通函数更加简洁

如果没有参数，就直接写一个空括号即可

如果只有一个参数，可以省去参数的括号

如果有多个参数，用逗号分割

2. 箭头函数没有自己的this

因为箭头函数不会创建自己的this，所以它没有自己的this，会在自己作用域的上一层继承this。所以箭头函数中this的指向在它在定义时已经确定了，之后不会改变。

3. 箭头函数继承来的this指向永远不会改变

4. call()、apply()、bind()等方法不能改变箭头函数中this的指向 

5. 箭头函数不能作为构造函数使用 
由于箭头函数时没有自己的this，且this指向外层的执行环境，且不能改变指向，所以不能当做构造函数使用。

6. 箭头函数没有自己的arguments

7. 箭头函数没有prototype

8. 箭头函数的this指向哪⾥？
箭头函数不同于传统JavaScript中的函数，箭头函数并没有属于⾃⼰的this，它所谓的this是捕获其所在上下⽂的 this 值，作为⾃⼰的 this 值，并且由于没有属于⾃⼰的this，所以是不会被new调⽤的，这个所谓的this也不会被改变。

五十四.什么是钩子函数

1.定义：钩子函数是Windows消息处理机制的一部分，通过设置"钩子"，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统

2.特性： （1）在系统消息触发时被系统调用 
      （2）不是用户自己触发的
3.应用场景：在特定的代码位置执行自定义的代码。使用钩子函数可以在不修改原始代码的情况下，实现一些额外的功能或修改程序的行为。
4.VUE常见的钩子函数：
    （1）beforeCreate（创建前）
    （2）created(创建后)
    （3）beforeMounted(挂载前)
    （4）mounted(挂载后)
    （5）beforeUpdate(更新前)
    （6）updated(更新后)
    （7）activated(激活时)
    （8）deactivated(未被激活)
    （9）beforeDestroy(实例销毁前)
    （10）destroyed(实例被销毁后)

五十五.HTTP请求

1.Get指从指定的资源获取数据（比如获取列表中的数据）
2.Post指向指定的资源提交要被处理的数据（如提交表单信息）
3. Put指上传指定的 URI 表示
4.Delete指删除指定资源

5.Get和Post的区别：
 （1）get把请求的数据放在url上，即HTTP协议头上；post把数据放在HTTP的请求体内。
 （2）get提交的数据最大是2k；post理论上没有限制。
 （3）GET请求只能进行url编码；POST支持多种编码方式。
 （4）GET在浏览器回退时是无害的；POST会再次提交请求。