2021高频前端面试题（含答案）

迷南。 2023-01-15 10:29 172阅读 0赞

## 一、简单页面 ##

**1、CSS选择器样式优先级**  
**2、CSS实现三列布局（左右固定宽度，中间自适应）**  
（1）CSS浮动  
第一个float:left，第二个float:right，第三个设置margin-left和margin-right  
（2）绝对定位法  
第一个定位到left，第二个定位到right，第三个设置margin-left和margin-right  
（3）flex布局

.left{
      width:200px;
      或者
      flex:0 0 200px;
    }
    .right{
      width:200px;
      或者
      flex:0 0 200px;
    }
    .center{
      flex:1;
    }

**3、如果要做优化，CSS提高性能的方法有哪些？**  
内联首屏关键CSS  
异步加载CSS  
资源压缩  
合理使用选择器  
减少使用昂贵的属性  
不要使用@import

## 二、js ##

**1、防抖和节流，应用场景**  
防抖和节流都是防止某一时间频繁触发，但是原理却不一样。  
防抖是将多次执行变为只执行一次，节流是将多次执行变为每隔一段时间执行。  
防抖(debounce)：  
search搜索联想，用户在不断输入值时，用防抖来节约请求资源。  
window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次  
节流(throttle)：  
鼠标不断点击触发，mousedown(单位时间内只触发一次)  
监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断  
**2、什么是闭包**  
「函数」和「函数内部能访问到的变量」（也叫环境）的总和，就是一个闭包。  
**3、继承有哪些方法**  
原型链继承  
借用构造函数继承（伪造对象、经典继承）  
实例继承（原型式继承）  
组合式继承  
寄生组合继承  
es6继承 extends  
**4、什么是深/浅拷贝，有哪些实现方式**  
基本数据类型：string、number、boolean、undefined、null  
引用数据类型：object、array、function  
JS数据类型分为基本数据类型和引用数据类型，基本数据类型保存的是值，引用类型保存的是引用地址(this指针)。浅拷贝共用一个引用地址，深拷贝会创建新的内存地址。  
`Object.assign`：对象的合并 （第一级属性深拷贝，第一级以下的级别属性浅拷贝。）  
ES6中的 `Object.assign()`，第一个参数必须是个空对象。  
`Object.assign()`方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。

5、数组有哪些常用方法，引出下一个问题,slice和splice区别  
6、Promise.all和Promise.race的区别，应用场景  
7、微任务和宏任务的区别

三、vue  
1、Vue中的的通信方式有几种？隔代组件的通信你用那种方式解决？  
`props/$emit`适用父子组件通信  
`ref与parent/children`适用父子组件通信  
`attrs/listeners,provide/inject` 适用于隔代组件通信  
`vuex,EventBus(事件总线)`适用于父子、隔代、兄弟组件通信  
slot插槽方式  
2、v-show 和 v-if指令的共同点和不同点？  
v-show是css切换，v-if是完整的销毁和重新创建，如果频繁切换时用v-show，运行时较少改变用v-if  
3、为什么使用key？做一个唯一标识， Diff 算法就可以正确的识别此节点。作用主要是为了高效的更新虚拟 DOM。  
4、简述computed和watch的使用场景 computed商品结算 ，watch搜索数据  
5、params和query的区别  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 1]

6、`$route` 和 `$router` 的区别  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 2]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 5]

7、怎么定义 vue-router 的动 态路由? 怎么获取传过来的值？（在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id。）

8、vue-router 有哪几种导航钩子?（全局导航钩子：router.beforeEach(to,from,next)）作用：跳转前进行判断拦截、组件内的钩子、单独路由独享组件

9、Vue实例的生命周期讲一下, mounted阶段真实DOM存在了嘛?  
Vue实例从创建到销毁的过程，就是生命周期。  
也就是：开始创建->初始化数据->编译模板->挂载dom->数据更新重新渲染虚拟 dom->最后销毁。这一系列的过程就是vue的生命周期。所以在mounted阶段真实的DOM就已经存在了。  
beforeCreate：vue实例的挂载元素el和数据对象data都还没有进行初始化，还是一个 undefined状态  
created: 此时vue实例的数据对象data已经有了，可以访问里面的数据和方法， el还没有，也没有挂载dom  
beforeMount: 在这里vue实例的元素el和数据对象都有了，只不过在挂载之前还是虚拟的dom节点  
mounted: vue实例已经挂在到真实的dom上，可以通过对 dom操作来获取dom节点  
beforeUpdate: 响应式数据更新时调用，发生在虚拟dom打补丁之前，适合在更新之前访问现有的 dom，比如手动移除已添加的事件监听器  
updated: 虚拟dom重新渲染和打补丁之后调用，组成新的 dom已经更新，避免在这个钩子函数中操作数据，防止死循环。  
beforeDestroy: vue实例在销毁前调用，在这里还可以使用，通过this也能访问到实例，可以在这里对一些不用的定时器进行清除，解绑事件。  
destroyed：vue实例销毁后调用，调用后所有事件监听器会被移除，所有的子实例都会被销毁。

10、第一次页面加载会触发哪几个钩子？beforeCreate， created， beforeMount， mounted

11、vuex有哪几种属性，怎么使用？哪种功能场景使用它？  
vuex是一个专门为vue.js开发的状态管理模式，每一个vuex应用核心就是store(仓库)。store基本上就是一个容器，它包含着你的应用中大部分的state(状态)  
vuex的状态存储是响应式的，当 vue组件中store中读取状态时候，若store中的状态发生变化，那么相应的组件也会相应地得到高效更新。  
改变store中的状态的唯一途径就是显示 commit(提交)mutation，这样使得我们可以方便地跟踪每一个状态的变化。  
State: 定义了应用状态的数据结构，可以在这里设置默认的初始状态  
Getter: 允许组件从Stroe中获取数据， mapGetters辅助函数仅仅是将store中的getter映射到计算属性。  
Mutation: 唯一更改store中状态的方法，且必须是同步函数。  
Action: 用于提交muatation, 而不是直接变更状态，可以包含任意异步操作。  
Module: 允许将单一的store拆分为多个 sotre且同时保存在单一的状态树中

12、vuex中state存储的数据如果页面刷新此时数据还会有吗?

13、v-bind和v-model的区别， v-model原理知道吗？  
v-bind用来绑定数据和属性以及表达式  
v-model使用在表单中，实现双向数据绑定的，在表单元素外不起使用。  
v-model原理：我们在vue项目中主要使用v-model指令在表单 input、textarea、select、等表单元素上创建双向数据绑定， v-model本质上就是vue的语法糖，v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：  
text和 textarea元素使用value属性和input事件  
checkbox和 radio使用checked属性和change事件  
slect字段将 value作为prop并将change作用事件

14、Vue中的常见指令有那些？？  
v-text/v-html/v-for/v-show/v-if/v-else/v-cloak/v-bind/v-on/v-model/v-slot…

四、综合  
1、前端工程化理解（模块化、组件化、规范化、自动化）  
JS的模块化、css的模块化、资源的模块化  
从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元  
HTML规范、CSS规范、JS规范、图片规范、命名规范  
图标合并、持续集成、自动化构建、自动化部署、自动化测试

2、组件封装过程  
建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。　　  
准备好组件的数据输入。即分析好逻辑，定好 props 里面的数据、类型。　　  
准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。　　  
封装完毕了，直接调用即可。

五、扩展  
1、Typescript中的内置类型 Number String Boolean Null Void Undefined  
2、TS的接口是什么意思  
接口是在我们的应用程序中充当契约的结构。它定义了要遵循的类的语法，这意味着实现接口的类必须实现它的所有成员。它不能被实例化，但是可以被实现它的类对象引用。无论对象是否具有特定的结构，TypeScript编译器都使用接口进行类型检查  
4、nodejs搭建一个简单的http服务器过程  
5、Typescript中的类的特征（继承、封装、多态性、抽象）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70]: /images/20221022/4aa1c6b3a1164ed8a19eec69c2f9cc96.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/3e667e5604194589b5e0481ad01caa7f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210701152336253.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 3]: /images/20221022/e14a6b9a38294e979f98c806f46e861e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 4]: /images/20221022/71d88b1bf31e45d1992bf070832e2273.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 5]: /images/20221022/cd1900f55ffb4f80a5eb998cee12c778.png