职场小白福利，常见的前端面试题vue，早日拿到offer

1.git代码下载重复怎么办？

回滚一下，重新pull,避免误操作

2.为什么要用Less,sass?

他们是css预处理器。他们是css上的一种抽象层。他们是一种特殊的语法/语言编译成css

less是一种动态样式语言，将css赋予了动态语言的特性，如变量，继承，运算，函数，less既可以在客户端上运行（支持IE6+,webkit,Firefoxx）,也可以在服务端运行（借助node.js）

• .结构清晰，便于扩展，
• 可以方便的屏蔽浏览器私有语法差异，
• 可以轻松实现多重继承，
• 完全兼容css代码，可以方便地应用到

区别

sass和less主要区别：在于实现方式less是基于javasscript的在客户端处理所以安装的时候用npm,

sass是基于ruby所以在服务器处理

3.什么是盒子模型？

把所有的网页元素都堪称一个盒子，它具有content,padding,border,margin,四个属性，这就是盒子模型

4.清除浮动的方法？（四种）

方式一:使用overflow属性来清除浮动

　　　　.ovh{

　　　　　　overflow:hidden;

　　　　　}

先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响.

　　注意：一般情况下也不会使用这种方式，因为overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏（overflow:hidden会将超出的部分隐藏起来）.

方式二:使用额外标签法

　　　　.clear{

　　　　　　clear:both;

　　　　　}

　　在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.

　　a.内部标签：会将这个浮动盒子的父盒子高度重新撑开.

　　b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子.

　　注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱.

方法三:使用伪元素来清除浮动(after意思:后来,以后)

　　　　.clearfix:after{

　　　　　　content:"";//设置内容为空

　　　　　　height:0;//高度为0

　　　　　　line-height:0;//行高为0

　　　　　　display:block;//将文本转为块级元素

　　　　　　visibility:hidden;//将元素隐藏

　　　　　　clear:both//清除浮动

　　　　　}

　　　　.clearfix{

　　　　　　zoom:1;为了兼容IE

　　　　}

方法四:使用双伪元素清除浮动

　　　　.clearfix:before,.clearfix:after {

content: "";

display: block;

clear: both;

}

.clearfix {

zoom: 1;

}

总结:第一种方法会将超出部分隐藏在某些时候我们想清除浮动并且保留超出部分时做不到,第二种方法会增加许多不必要的标签,

所以我们尽量使用第三种方法来清除浮动,为什么不选择第四种方法呢?因为第四种是第三种的改良版虽然比较简便,但是不严谨!

5.同步和异步的区别？

同步：

同步的思想是：所有的操作都做完，才返回给用户。这样用户在线等待的时间太长，给用户一种卡死了的感觉（就是系统迁移中，点击了迁移，界面就不动了，但是程序还在执行，卡死了的感觉）。这种情况下，用户不能关闭界面，如果关闭了，即迁移程序就中断了。

异步：

将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉，会告诉你，你的请求系统已经响应了。你可以关闭界面了。

6.http状态码有那些，分别代表是什么意思？

200 OK：服务器成功处理了请求（这个是我们见到最多的）

301 Moved Permanently：资源移动。所请求资源自动到新的URL，浏览器自动跳转到新的URL

304 Not Modified：服务端的资源与客户端上一次请求的一致，不需要重新传输，客户端使用本地缓存的即可

400 Bad Request：用于告诉客户端它发送了一个错误的请求

404 Not Found：(页面丢失)未找到资源

500 Internal Server Error：服务器内部出现了错误

501 Internal Server Error：服务器遇到一个错误，使其无法对请求提供服务

7.“==”和“===”还有“！=”和“！==”的区别？

==：运算符称作相等，用来检测两个操作数是否相等，这里的相等定义的非常宽松，可以允许进行类型转换

===：用来检测两个操作数是否严格相等

！=：会转换成相同的类型进行比较

！==：除了比对值，还比对类型

8.json字符串如何转换为json对象？json对象如何转换为json字符串？

json字符串

json对象：

方法有三种：转换函数，jq的转换函数，eval()方法

方法1--转换函数：JSON.parse()方法

注意：IE8（兼容模式）ok，但是IE6和IE7没有JSON对象，需要额外引入json.js或者json2.js。

方法2：parseJSON()方法 ，将字符串转换成非字符串

用的是jquery的插件

反过来，使用 serialize 系列方法：如：var fields = $("select, :radio").serializeArray();

方法3：eval()方法

eval()函数可计算某一个字符串，并执行其中的javascript代码。

注意事项：IE8(兼容模式)，IE7和IE6也可以使用eval()方法将字符串转成json对象，但是不推荐使用，因为这种方式不安全eval会执行接送字符串的表达式.

9.假设有一个字符串abcdefg,请将这个字符串倒序输出

方法一：

方法二：

• split("")---根据字符串拆分数组
• reverse()---数组反转元素位置
• join("")数组转回字符串，不带分隔符

10.jquery获取的dom对象和原生的dom对象有何区别？

js原生获取的dom是一个对象，jQuery对象就是一个数组对象，其实就是选择出来的元素的数组集合，所以说他们两者是不同的对象类型不等价

• 原生DOM对象转jQuery对象

• jQuery对象转原生DOM对象

11.什么是vue生命周期？生命周期的作用是什么？

从一个组件创建、数据初始化、挂载、更新、销毁，这就是生命周期。在组件中具体的方法有:beforeCreate 、created、beforeMount、mounted、beforeUpdate、updated、 beforeDestroy、destroyed

beforeCreat() 创建前 在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在此生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法

created（）被创建 data 和 methods都已经被初始化好了，可以调用了

beforeMount() 挂载前 在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的

mounted（）已挂载 Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行

beforeupdate（）更新前 页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步

updated（）更新 页面显示的数据和data中的数据已经保持同步了，都是最新的

beforeDestroy() 销毁前 Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁

destroyed（）被销毁 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。

12.promise是干什么的？

1、主要用于异步计算

2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果

3、可以在对象之间传递和操作promise，帮助我们处理队列

13.jq和props获取参数有什么区别

jq参数会消失，props不会

attr() 方法设置或返回被选元素的属性值。

prop() 方法设置或返回被选元素的属性和值。

14.es6获取变量var let const有什么区别？

1. var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
2. let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
3. const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。

15.ajax和axios区别？

ajax：

本身是针对MVC的编程,不符合现在前端MVVM的浪潮

基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案

JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务

axios：

从 node.js 创建 http 请求

支持 Promise API

客户端支持防止CSRF

提供了一些并发请求的接口（重要，方便了很多的操作）

16.为什么要封装axios

在项目的开发中有三个阶段

1.开发环境(dev.abc.com)

2.测试环境(text.abc.com)

3.生产环境(abc.com)

访问接口数据时，例如：商品接口会是【域名】/api/v1/products

当环境不同时，直接修改域名就可。这就是封装请求的原因。

17.父传子，子传父

父组件向子组件传值

1.创建子组件，在src/components/文件夹下新建一个Child.vue

2.Child.vue的中创建props，然后创建一个名为message的属性

3.在App.vue中注册Child组件，并在template中加入child标签，标签中添加message属性并赋值

4.保存修改的文件，查看浏览器

5.我们依然可以对message的值进行v-bind动态绑定

父组件向子组件传值成功

总结一下：

• 子组件在props中创建一个属性，用以接收父组件传过来的值
• 父组件中注册子组件
• 在子组件标签中添加子组件props中创建的属性
• 把需要传给子组件的值赋给该属性

子组件向父组件传值

1.在子组件中创建一个按钮，给按钮绑定一个点击事件

2.在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

子组件向父组件传值成功

总结一下：

1.子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件

2.将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法

3.在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听