面试笔试题

1.src与href的区别

请求数据类型不同
	href表示超文本引用,用来建立当前元素和文档的链接.常用的有:link,a
	href 是Hypertext Reference的简写，表示超文本引用，指向网络资源所在位置。
	src 是source的简写，目的是要把文件下载到html页面中去。
	在src资源时会将其指向的资源下载并应用到文档中,常用的有srcipt,img
作用结果不同

		href用于在当前文档和引用资源之间确立联系
		src用于替换当前内容
		
浏览器解析方式不同
	当浏览器遇到href会并行下载资源并且不会停止对当前文档的处理。(同时也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式)
	当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载或执行完毕。(这也是script标签为什么放在底部而不是头部的原因) 

		<a href="http://www.baidu.com"></a> 
		<link type="text/css" rel="stylesheet" href="header.css">

link和@import的区别

两者都是外部引用 CSS 的方式，但是存在一定的区别：
（1）link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务；而@import属于CSS范畴，只可以加载CSS。
（2）link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载。
（3）link是XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持。
（4）link支持使用Javascript控制DOM改变样式；而@import不支持

2.页面元素隐藏方式 和各自特点？

 	 oveflow:hidden;  溢出隐藏
    display: none; 直接“销毁”元素在页面中的位置；  
    visibility: hidden; 直接让元素不可见，但元素的物理空间位置还是存在的；

详解：display:none; 设置为display:none;的元素将不会再占用页面空间，其占用的空间会被其他元素所占有，从而会引起浏览器的重排和重汇。
	 visibility: hidden 这种做法虽然能够隐藏元素，但是该元素仍会占用页面空间，因此只会导致浏览器的重汇而不 会引起重排。
    opacity:0 设置元素透明度opacity属性为0，也可以隐藏页面元素。在呈现上与visibility:hidden;方式一样， 同样会占据页面空间。
   overflow:hidden; 超出区域隐藏 

3.用过哪些盒模型，以及他们各自的区别？

IE盒子模型box-sizing:border-box;（怪异模式）

W3C标准盒子模型 box-sizing:content-box;（标准模式）默认模式

 box-sizing:content-box; 默认值，代表W3C盒模型：盒子定义宽高 = 内容宽高（content）
box-sizing:border-box; 代表IE盒模型：盒子定义宽高 = 内容宽高（content） + 内边距 （padding）+ 边框（border）

4.谈谈你的移动端适配方案有哪些？

布局视口：CSS布局，是以布局视口做为参照系来计算的。
	     一般手机浏览器的默认布局视口宽度为980px(黑莓和IE的宽度为1024px)
视觉视口：视觉视口是页面当前显示在屏幕上的部分
理想视口：理想视口的大小取决于设备独立像素的大小
Rem理想(适配)视口   viewport视觉视口     百分比布局视口
解释REM

媒体查询+rem实现元素动态大小变化.

Rem单位是跟html来走的，有了rem页面元素设置不同大小尺寸。媒体查询可以根据不同设备宽度来修改样式，媒体查询+rem就可以实现不同设备宽度，实现页面元素大小的动态变化。

方式一: 通过为不同的尺寸设置不同的font-size值.

方式二: 以js窗口改变事件根据不同尺寸设置font-size值. 

5.js 数据类型有几种？它们之间的区别是什么？

 JS中有两种数据类型
1.简单数据类型（也称基本数据类型）：Undefined;Null;Boolean;Number和String, symbol
	2.引用数据类型（也称复杂数据类型），其中包括Object；Array；Function等等。
	基本数据:
	1.基本数据类型的值是不可变的,任何方法都无法改变一个基本类型的值
	2.基本数据类型不可以添加属性和方法
	3.基本数据类型的赋值是简单赋值,如果从一个变量向另一个变量赋值基本类型的值，会在变量对象上创建一个新值， 然后把该值复制到为新变量分配的位置上
	4.基本数据类型的比较是值的比较
	引用数据类型
	1.引用数据类型的特点和基本数据类型相反。
	2.引用类型可以添加属性和方法
	3.引用类型的赋值是对象引用
	4.引用类型的比较是引用的比较
区别:

基本数据是栈内存,引用数据是堆内存
堆栈:(堆栈内存就是在计算机内存中分配出来的一块空间，用于执行和存储代码)
不同内存分配机制也带来了不同的访问机制
深拷贝与浅拷贝的原因
参数传递的不同(实参传递形参的过程)
 浅拷贝：基础数据类型
深拷贝：引用数据类型 
B复制了A，当修改A时 ，B也跟着变了，说明这是浅拷贝 

6.数据类型强制转化和隐式转化的分别怎么使用？

强制转化[
			数值:
				1.Number(参数) 把任何的类型转换为数值类型
				2.parseInt(参数1，参数2) 将字符串转换为整数
				3.parseFloat() 将字符串转换为浮点数
			
			字符串:
				1.String(参数),可以将任何的类型转换为字符串
				2.toString(),调用的格式 对象.toString(), 作用是将对象以字符串的方式来表示
			
			布尔类型:
				1.Boolean() 可以将任何类型的值转换为布尔值
		]


隐式转换:{
 	在js中，当运算符在运算时，如果两边数据不统一，CPU就无法计算，这时我们编译器会自动将运算符两边	数据做一个数据类型转换，
 转成一样的数据类型再计算  这无需程序员手动转换，而由编译器自动转换的方式就称为隐式转换
		isNaN( ) 该函数会对参数进行隐式的Number()转换，如果转换不成功则返回true;
		alert() 输出的内容隐式的转换为字符串
理解：  不同类型的变量比较要先转类型，叫做类型转换，类型转换也叫隐式转换。隐式转换通常发生在运算符加减乘除，等于，还有小于，大于等。。
 }

7.let const 和 var 的区别 ？

   var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
   let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
   const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。
	var声明的变量会挂载在window上，而let和const声明的变量不会
	var声明变量存在变量提升，let和const不存在变量提升
	let和const声明形成块作用域
	同一作用域下let和const不能声明同名变量，而var可以
	暂存死区
	在当前块作用域中存在a使用let/const声明的情况下，给a赋值10时，只会在当前作用域找变量a，
	而这时，还未到声明时候，所以控制台Error:a is not defined
	const
	一旦声明必须赋值,不能使用null占位。
	声明后不能再修改
	如果声明的是复合类型数据，可以修改其属性

8.箭头函数和普通函数的区别 ？

1)外形不同：箭头函数使用箭头定义，普通函数中没有
2)普通函数可以有匿名函数，也可以有具体名函数，但是箭头函数都是匿名函数。
3)普通函数可以用于构造函数，以此创建对象实例,但是箭头函数不能用于构造函数不能使用new
4)箭头函数的 this 永远指向其上下文的 this ，任何方法都改变不了其指向，如call() , bind() , apply();普通函数的this指向调用
它的那个对象
箭头函数：不能当做构造函数 相当于匿名函数，不可以使用new命令，this永远指向上下文的this无法改变其指向
箭头函数不绑定arguments，取而代之用rest参数...解决
箭头函数不能当做Generator函数,不能使用yield关键字
普通函数：this指向调用它的那个对象
总结： 	普通函数：this指向调用它的那个对象
   		箭头函数的 this 永远指向其上下文的  this ，任何方法都改变不了其指向，如 call() ,  bind() ,  apply() 

9.解释什么叫回调地狱 以及怎么解决回调地狱 ？

当一个函数作为参数传入另一个参数中，并且它不会立即执行，只有当满足一定条件后该函数才可以执行，这种函数就称为回调函数。
	
	地狱回调概念：回调函数套回调函数的情况就叫做回调地狱，
	Promise 解决方式      Async/await 解决方式

10.说明原生ajax的实现步骤？

1.创建对象
2.设置回调函数
3.设置请求地址
4.设置open()方法
5.设置请求头（GET请求可以忽略这一步）
6.发送请求

var xhr = new XMLHttpRequest()//获取对象
            xhr.onreadystatechange = function(){//设置回调函数
                if(xhr.readyState != 4)return;//这里的4是请求的状态码，代表请求已经完成
                if(xhr.status == 200 && xhr.readyState == 4){//这里是获得响应的状态码，200代表成功，304代表无修改可以直接从缓存中读取
                    console.log(xhr.responseText)//这里获取的是响应文本，也可以获得响应xml或JSON
                }else{
                    console.log("请求失败")
                    			 
                }
            }
            xhr.open("get","http://localhost:3030")  //打开链接（创建请求）
    
            xhr.send()//发送请求

同步:任务在主线程上排队执行，只有前一个任务执行完毕，才能执行下一个任务。
异步:任务不进入主线程，而是进入异步队列，前一个任务是否执行完毕不影响下一个任务的执行。

11.什么情况下会导致跨域以及怎么解决跨域？

同源策略是一种约定，它是浏览器最核心也最基本的安全功能.
同源（协议、域名、端口号相同）
以下任意一种情况不同都会导致跨域：
		协议不同： http://
		子域名不同：www
		主域名不同：baidu.com
   		端口号不同：8080
		ip地址和网址不同：www.baidu.com
跨域解决方法：1、jsonp    是前端解决跨域最实用的方法
			 2、cors跨域资源共享   
			 3、设置document.domain   
			 4、用Apache做转发（逆向代理），让跨域变成同域

12.vue 有几个生命周期 以及各个生命周期的调用时机 ？beforeCreate : 创建Vue实例前的时候执行，

	beforeCreate : 创建Vue实例前的时候执行，
created : 创建Vue实例完成后执行，		  科瑞tei 特
beforeMount : Vue实例开始渲染前执行，
mounted : Vue实例渲染完成后执行，  		 芒特
beforeUpdate : Vue实例修改前执行，
updated : Vue实例修改完成后执行， 		 啊呸 dei tei 特
beforeDestroy : Vue开始消亡前执行，
destroyed : Vue实例消亡后执行，            第四最特
activated ：组件激活时调用。该钩子在服务器端渲染期间不被调用。
deactivated ： 组件停用时调用。该钩子在服务器端渲染期间不被调用。

13. 使用vue中的v-for时,为什么要绑定 :key? 如果不绑定会有什么效果？

Vue的v-for不绑定key，默认行为和绑定key="index"是差不多的，官方没有默认这种行为的情况下，会导致所有列表DOM重新渲染。key="index"这种行为无法最大化性能，比如在第一个元素插入新元素，会导致所有列表DOM重新渲染。绑定key后，发现绑定的key值的元素变化了，就重新渲染该元素，而不是全部元素都重新渲染，会提高性能。性能主要是DOM渲染影响。key绑定id一类的唯一键好处就是
在列表中插入某个元素，不会像index那样导致后面的元素全部重新渲染，而是根据绑定id的元素是否变化渲染。

14.v-show 和 v-if 的作用和区别, v-bind 和 v-model的作用和区别？

 v-if和v-show的区别:
		实现方式:v-if为DOM渲染属性,  通过添加删除DOM节点实现;
                v-show通过样式的display控制标签的显示，正因为实现方式上
								面有差异，导致了他们的加载速度方面产生了差异;
		加载性能:v-if加载速度更快;v-show加载速度慢;
		切换开销:v-if切换开销大;v-show切换开销小;
		一般来说,v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好，
如果在运行时条件很少改变，则使用v-if较好。
   v-bind和v-model的区别:
		
		v-bind：动态地绑定一个或多个特性,或一个组件 prop 到表达式使用v-bind的是使用父组件的值(根据属性名),没有使用v-bind的
是将标签里的数值当做字符串来使用
		v-model:在表单控件或者组件上创建双向绑定,会根据输入变化

“:” 是指令 “v-bind”的缩写，“@”是指令“v-on”的缩写；“.”是修饰符 
v-bind
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>

v-on
<!-- 完整语法 -->
<a v-on:click="Some">...</a>
<!-- 缩写 -->
<a @click="Some">...</a>


修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，
用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件
调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit">...</form>

15.vue 组件通信如何实现，至少列举3种方式并说明各自的局限性？

 父子间通信:父亲提供数据通过属性 props传给儿子；儿子通过 $on 绑父亲的事件，再通过 $emit 触发自己的事件

利用父子关系 $parent 、 $children ，

ref 获取组件实例，调用组件的属性、方法

跨组件通信 Event Bus （Vue.prototype.bus=newVue）其实基于bus = new Vue）其实基于bus=newVue）其实基于on与$emit

vuex 状态管理实现通信

 局限性:   

     父传子: 传入的值想作为局部变量来使用,直接使用会 报错  

      父子关系:不可控性大，有一定风险

       vuex: 流程相比较稍微复杂。
     Vuex通信方式相比其他方式，比较复杂，
     而且如果不同的模块，需要建立独立的modules

		 总结
	父子组件通信需要一定的媒介，也就是中间站。
	调用方法进行传值

16.详细说明vue组件中 data ，computed 和 watch的区别？

data：
初始组件的时候data拿到的是store的值是还没有输入过的原始值,
点击按钮的时候，取data中的值是原始值，不能自己更新。
computed：
换成计算属性时，是当值发生变化的时候，从新计算，不变化的时候拿到的是之前缓存的值。
watch：也可以实现实时监听.
 　　1、功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。

　　2、是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。

　　3、是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。

　　4、使用场景：computed----当一个属性受多个属性影响的时候，使用computed-------购物车商品结算。watch----当一条数据影响多条数据的时候，使用watch-------搜索框。 

17.keep-alive的作用是什么？ 使用它的目的是什么？

keep-alive可以实现组件缓存，当组件切换时不会对当前组件进行卸载

包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染
比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染

常用的两个属性include/exclude，允许组件有条件的进行缓存
两个生命周期activated/deactivated，用来得知当前组件是否处于活跃状态
目的:

    清除缓存 

18.vue-router的作用是什么？ 为什么不使用a标签？

Vue的创新之处在于，它利用虚拟DOM的概念和diff算法实现了对页面的"按需更新",Vue-router很好地继承了这一点，重渲染是我们不希望
看到的，因为无论跳转到哪个页面，只需要渲染一次就够了。<Link>组件帮助我们实现了这个愿望反观<a>标签，每次跳转都得重渲染一次，
在一个浩大的项目里，这多么可怕！我们的"渲染"做了许多"无用功"，而且消耗了大量弥足珍贵的DOM性能！
简单：Vue做的都是单页应用，就相当于只有一个主的index.html页面，所以你写的标签是不起作用的，你必须使用vue-router来进行管理。

19.vuex 是什么？ 怎么使用？为什么用使用它？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

state 数据源，载体 （是dei特）

getters 用于改变state的值，派生出多个数据源 （给桃儿）

mutation 唯一可以提交可以改变state的状态，也就是数据的属性值 （木tei甚）

actions 提交的是mutation,用commit提交 而不是直接变更状态，可以包含任意异步出操作 （ 阿克甚）

modules 拆分成多个模块 （ 马的俊斯）

vuex就是将数据共享给多个组件共同使用，同时也将这个数据的状态进行了共享（一个组件改变这个数据的状态其它组件也跟着改变）

20.请谈一下你对 使用原生js开发和 使用vue开发的看法。(至少20字以上)

 原生js
DOM操作频繁，代码繁杂
DOM操作与逻辑代码混合，可维护性差
不同功能区域书写在一起，可维护性低
模块之间的依赖关系复杂
vue
数据驱动视图
组件化开发

21.说一说ES6常用的属性有哪些？

1)块级作用域
2)提供了定义类的语法糖
3)增加了一种基本数据类型(Symbol)
4)新增了变量的结构赋值
5)函数参数允许设置默认值，引入rest参数，新增箭头函数
6)数组新增一些API和一些方法
7)对象和数组新增了扩展运算符
8)ES6新增了模块化
9)ES6新增了set和map数据结构
10)ES6原生提供Proxy构造函数，用来生成Proxy实例
ES6新增了生成器（Generator）和遍历器（Iterator）

22.Promise的作用是什么？尝试将Fetch进行封装。

作用:
1)主要用于异步计算
2)可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
3)可以在对象之间传递和操作promise，帮助我们处理队列
	fetch('请求地址')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

23.说一说你对闭包的理解

闭包的优点是可以避免全局变量的污染；缺点是闭包会常驻内存，增加内存使用量，使用不当很容易造成内存泄漏。在JavaScript中，函数
即闭包，只有函数才会产生作用域。
闭包有3个特性：
（1）函数嵌套函数。
（2）在函数内部可以引用外部的参数和变量。
（3）参数和变量不会以垃圾回收机制回收。

24、在vue中如何让CSS只在当前组件中起作用？

<style scoped></style>

25.Vue里面如何获取dom元素？

(1)直接给相应的元素加id,然后再document.getElementById("id");获取
(2)使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素