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

一、简单页面
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()方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。
let obj1 = {
   a: { b: 1},
   c: 2
}
let obj2 = Object.assign({},obj1)
obj2.a.b = 3;  //第二层，obj1变了，是浅拷贝
obj2.c = 3;  //第一层，obj1不变，是深拷贝
console.log(obj1);  
console.log(obj2); 

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的区别

 

 $route 和 $router 的区别

 

 

 

 

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中的类的特征（继承、封装、多态性、抽象）