前端面试题总结：模拟面试

1，问：请先自我介绍？

答：略

二，技术知识题

1，问：看你简历有项目经历，那在你之前的项目中，用到的技术栈有哪些？

答：主要使用过vue和微信小程序，其中对vue2使用的更多

2，问：你为什么使用vue呢？

答：vue相较于其他框架，更容易上手。在进行表单处理时，Vue的双向数据绑定非常方便。vue对第三方插件包容性很强，可以扩展vue的功能。

3，问：说一下v-if和v-show的区别？

答：v-if是对DOM操作是添加还是删除，如果条件为真，才会加载显示元素内容；v-show是对css的display属性进行操作，是渲染时的显示和隐藏。

4，问：vue组件之间的通信？

答：

父到子：在父组件中用v-bind赋值，在子组件中用props接收数据

子到父：在父组件中注册事件，在子组件中触发事件，并把数据当做参数传递过去，父组件处理事件并获取数据

相邻组件：先声明一个空的vue实例bus，在A中给bus注册事件，并监听事件处理程序，在B中触发bus上的事件，并把值当成参数传递，组件A通过事件处理程序获取数据

5，问：你怎么理解vue的数据双向绑定？

答：vue使用MVVM的模式，实现数据双向绑定，在改变视图的时候会更新数据，改变数据的时候会更新视图。

6，问：你举例实现一下数据双向绑定？

答：

<div id="app"><input v-model="msg"><br/>{{msg}}</div>
........var vue=new Vue({el:"#app",//需要被vue模版化管理的dom结构是哪个data(){return{msg:''}},}

7,问：MVVM和MVC区别？

答：m:model. v:view. vm:viewmodel
数据模型双向绑定原理。通过viewmodel控制。view负责接受反馈用户操作，model数据模型. 并且model和view是相互的。一方改变另一方也跟着改变。当用户操作vue. viewmodel感知到变化，然后通知model发生改变。反之model发生改变，viewmodel感知到变化，也会通知view发生改变。
m:model. v：view. c:control
用户操作—view(接收用户的输入操作)—control（用户逻辑处理）—model（数据model)—view(反馈给客户)

8，问：vue的生命周期？

答：：一个vue实例从实例化到销毁所经历的各个状态，这个周期就叫做生命周期。

挂载之前会初始化：初始化生命周期，事件，props，methods，data，computed，watch等。此时最重要的部分是Object.defineProperty设置setter和getter函数来实现响应式和数据依赖。

三个流程：挂载流程（4个钩子函数）

beforeCreate（）：在实例化之后，此时不能获取data中数据，也不能使用methods中的方法 created（）：此时可以调用methods中的方法，也可以获取data中的数据，一般用在发送请求获取数据的时候。

beforeMounted():在挂载开始前调用

mounted（）：此时vue实例已经被挂载到页面中，可以操控页面中的dom元素

更新流程（2个钩子函数）

beforeUpdate( ):数据更新时被调用，可以在这个时候进一步更改状态

updated（）：此时组件dom已经更新，可以执行依赖于dom的操作销毁流程（2个钩子函数）beforeDestroy():在实例销毁之前调用，此时实例还可以使用，会释放一些资源，比如：清除定时器

Destroyed（）：vue实例销毁之后调用，此时会解绑实例，清除监听器，销毁所有子实例。

9，问：有没有使用过什么自动化测试框架？

答：暂时对这个没有了解

10，问：有没有用过其他js框架？

答：我在实习的时候，有用过Taro+react联合开发可多端运行的小程序，其中对react有一点了解，希望在未来的工作中，有机会可以深入学习。

三、js基础知识题

1，问：js数据类型？

答：分为基本数据类型：number，string，undefined，null，boolean，symbol，bigint

和引用数据类型：object

2，问：js中的==和===的区别？

答：==是比较数值是否相等，

===是先比较数值是否相等，再比较类型是否相等

3，问：js深拷贝和浅拷贝的区别？

答：js浅拷贝是只拷贝值，不拷贝存储地址，当原值数值改变时，复制的值也会改变。

深拷贝是拷贝值和地址，当原值改变时，不会影响新值。

追问：深拷贝怎么实现？

答：JSON.parse(JSON.stringify(obj))

4，问：对原型，构造函数，实例怎么理解的？（问的原型链）

答：构造函数实例化会得到实例对象，每一个构造函数都有一个原型对象，构造函数通过prototype属性访问原型上的方法和属性，而原型的constructor可以指向它的构造函数，实例对象也可以通过__proto__访问原型上的属性和方法。如图：

5，问：怎么理解闭包？

答：函数嵌套，比如函数a中定义了一个函数b，函数b可以访问函数a中的变量和参数，这就是闭包，好处：保护函数b中的变量不被污染，坏处：函数b引用函数a中的变量不会被销毁，容易造成内存消耗，泄漏等问题，解决办法：变量引用后可以手动设为null。

6，问：你对js中的this怎么看？

答：this一般是指向当前对象，比如，在一般函数方法中使用 this 指代全局对象；作为对象方法调用，this 指代上级对象；作为构造函数调用，this 指代new 出的对象；也可以使用call，apply和bind改变this指向。

7，问：有遇到跨域问题吗？怎么解决的？

答：我在vue项目中使用过跨域，因为是前后端分离的项目，在解决方面，是使用webpack自带的跨域机制，配置的api。对于跨域的解决办法，我也有了解过，可以使用jsonp包裹数据传输，或者在服务器端配置CORS（CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法）。

8，问：请详述一些http请求过程？

答：1，在地址栏输入url，DNS域名解析系统会解析出ip地址，2，然后浏览器和服务器建立Tcp连接，3，浏览器发送HTTP请求，4，服务器响应请求，浏览器获取html代码，5，浏览器解析HTML代码，获取HTML中的资源，比如图片，样式等资源6，关闭TCP连接，浏览器渲染页面，把内容展示给用户。

9，问：你知道的web前端的优化策略？

答：1，减少http请求,2，图片懒加载，在未到达图片可视区时，不给src赋值，3，把一些css，js放在外部文件里，使用时引入。4，压缩图片大小，可以使用base64.

四，html，css基础知识

1，问：div和p都是块级标签，请问他们有什么区别？

答：1，div是布局标签，p是段落标签2，div的margin为0，两个div直接没有间隔，p标签有一定的margin值，两个p标签会有间隔，3，div一般用来框架布局，而p一般用于内容布局，4，一般可以在div里写p标签，不在p标签里写div

2，问：说一下css的盒子模型？

答：每一个HTML元素都可以看做一个盒子，它包括margin，border，padding，content，其中margin，border，padding都是可以通过css属性控制，所以叫css盒子模型。

盒子模型分为两种：W3C标准盒子模型：设置的宽高是content的宽高，如果再设置padding，margin，border，那实际的宽高需要加上这些属性值，不改变content的宽高。

IE盒子模型（怪异盒子）：它认为元素是一个整体，所以给content设置宽高，如果再设置padding，margin，border，它会挤压content的宽高，使整体的宽高不变。

3，问：说几个水平垂直居中的方法？

答：1，已知宽高，设置possion：aboulate，top：50%，left：50%，margin-top：-高度/2;margin-left:-宽度/2

2，未知宽高，设置possion：aboulate，top：50%，left：50%，transform：translate（-50%，-50%）

4，问：清除浮动的方式？

答：1，额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）2，父级添加overflow属性（父元素添加overflow:hidden）（不推荐）3，使用after伪元素清除浮动（推荐使用）4，使用before和after双伪元素清除浮动

5，问：重绘和回流的区别？

答：回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流
当页面布局和几何属性改变时就需要回流
比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变

6，问：说说你对响应式布局的理解？

答：响应式布局的关键技术是CSS3中的媒体查询，监测设备屏幕大小，通过css媒体查询来有针对性的更改页面的布局，这样做出的网站可以在三个不同的设备使用，一般用于网页简单的页面。

7，问：有使用过什么css框架吗？

答：bootstrap：栅格系统，实现响应式布局。

五，综合问题

1，问：说一说，项目中遇到的坑？

2，问：你觉得自己在项目中的亮点是什么？

3，问：有了解过package.json文件的作用吗？

答：管理npm的包依赖，配置项目信息，比如名字，版本等

4，问：你对webpack有什么优化建议吗？

答：1.如何优化构建速度：减少不必要的模块依赖；多线程构建；热更新
2.如何优化打包后的文件：（文件尽可能少、文件尽可能小）模块手动分离，减少公共代码；模块懒加载，使用插件实现。

5，问：你的学习计划？

6，问：未来规划？