vue面试题

一、css响应式布局如何实现

	响应式布局主要是可以实现自适应不同网页的分辨率，让客户有更好的体验。
	1、rem布局
	2、百分比布局
	3、vw布局
	4、媒体查询 media （不同的分辨率设置不同的css样式）
	5、弹性盒子布局

二、rem响应式布局的实现原理

	rem实现原理主要是动态绑定根元素html的字体大小来设置的，比如html字体  
	大小是100px，那么1rem=100px。

三、数据类型判断

	typeof 主要是判断基本数据类型，但是引用数据类型是不起做用的。
	instanceof  主要是判断用于new关键字 创建的引用数据类型。  
	constructor 基本数据类型和引用数据类型都可以判断  
	完美解决方案 Object.prototype.toString.cell()

四、原型和原型链

	javascript每个对象都有一个原型，这个原型就是proto,当对象构造函数实例化时  
这个对象的原型就指向了prototype。  
	原型链就是要使用一个属性或者方法时，就会在自身的原型上查找，如果没有就  
会在自身的原型上的prototype的父级的proto的prototype上查找，如果还没有就会再  
次在prototype的父级的proto的prototype上查找，直到查找到属性或者方法或者返回  
undefined，这就是原型链。 

五、闭包

	当一个函数被调用时他的返回值是内部函数，而且内部函数调用 了这个函数的内部变量  
并且返回的那个函数在外部被执行，就形成了闭包。  
闭包的特性：
不会被垃圾机制回收  
函数嵌套函数  
内部函数可以访问外部函数的变量和属性  
闭包的优点：  
长期储存在内存中  
私有成员的存在
不会被污染  
闭包的缺点：  
长期驻扎在内存中，增大内存的储存量，使用不当会导致内存泄漏

六、js继承

原型链继承  
借用构造函数继承    
组合式继承  
原型式继承  
寄生式继承  
寄生组合式继承  
ES6实现继承

七、什么是深拷贝，浅拷贝，如何实现

	深拷贝和浅拷贝只要是针对复杂数据类型的，浅拷贝是只拷贝一层，深拷贝是层层拷贝。  
	浅拷贝的实现方式主要是 扩展运算符... 、for in 、Object.assign等。  
	深拷贝的实现方式主要是 JSON.stringify、JSON.parse 和递归等。

八、事件冒泡，事件捕获

	事件冒泡就是从最具体到最不具体的，是IE提出的事件冒泡流。  
	事件捕获就是从最不具体到最具体的，是网景提出的事件捕获流。  
	主要是针对于事件来触发的  

九、h5 和css3 的新特性

H5新特性：  
本体存储  
语义化标签  
视频音频  
拖拽  
重力感应等等...  
CSS3新特性：  
边框圆角  
背景图片  
css3动画  
css3过渡  
css3弹性盒子  
css3文字  
css3伪类选择器 等等...

十、Axios 拦截做过哪些

	Axios分为请求拦截和相应拦截 ，请求拦截是你发送一条请求就会触发、主要是用于实  
现loading加载和设置token验证的，还有请求的预加载也可以做，相应拦截主要是loading  
记载完毕和请求数据加载完毕时做的，这个时候就需要马上发给前端的时候让loading加载  
隐藏。  
	Axios还可以设置公用地址，延迟时间，以及跨域问题。

十一、sessionStorage,localStorage cookie 的区别

这三个都是用于存储数据的
localStorage 永久存储在浏览器中，如过你不主动删除的话就不会消失 ，大小在5M
sessionStorage 是绘画存储，只存储在当前页面，只要关闭这个页面就会删除，大小在5M
cookie  主要用于做保存登录信息的，需要连接服务器，可以设置失效时间，每条大小在4kb以内超出了会被忽略

十二、图片懒加载实现原理

	图片懒加载的实现原理，主要是一个懒字么，当一个页面特别长可视区域装不下，就会  
使用到懒加载，实现的方式就是只加载可视区域的img的src属性，不在可视区域的img不给  
设置src属性。  
	全部加载会影响用户体验  

十三、瀑布流原理

	瀑布流是一种布局方式，一般应用在网页中，原理就是一个页面视图有一排图片宽度一  
样但是高度参差不齐，下一排的第一个图片就会放在上一排图片高度最低的那个位置，   
以此类推。

十四、meta 标签内属性及详解

name属性
1.keywords用于告诉搜索引擎，你网页的关键字
2.description用于告诉搜索引擎，你网站的主要内容
3. viewport(移动端的窗口)<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

十五、解构赋值

	解构赋值就是可以快速的获取数组或者对象里面的值，实现方法左右结构必须一样，  
不一样就会报错

十六、async/await

	async和await是同步写法，异步操作，这两个必须同时使用才会好使，单独使用不会有效果，await后面必须是  
promise对象，当请求多条数据时会执行完当前这一条再执行下一条，

十七、es6 有哪些拓展

	块级作用域let和const
	语法糖class
	函数的默认赋值和箭头函数
	新增基本数据类型symbol
	扩展运算符
	新的数据结构set和map
	数组的新增方法 keys()和values()，entries()
	模块化数据 import和export
	结构赋值
	数组新增API isArray 、from 、of等方法

十八、## 请写出在vue中使用promise封装项目api接口的思路？

	在src目录下新建一个文件夹,在文件夹里创建query.js文件和api.js文件，query文件里引入axios可以设置共用地址，延
迟时间，请求拦截和相应拦截，api里引入query这个文件定义一些get请求方式和post请求方式，可以在组件中按需引用。

十九、promise 是什么？有哪些状态和参数？如何使用？

promise主要是用于异步操作，可以实现异步队列化。
有三个状态初始态，成功态，失败态，promise一旦改变就不会在变化了。
有两个参数 resolve和reject 
resolve是成功参数，可以用.then来接收
reject是失败参数，可以用.catch来接受

二十、for…in 迭代和 for…of 有什么区别

for in 是来用于循环对象的，循环出来的是key值、 for of 是用于循环数组的 ，循环出来的是value值
for of 是es6新增的 弥补了for in 的不足、for of 不能循环普通的对象需要和Object.keyS()来搭配使用

二十一、Ajax 是什么?以及如何创建 Ajax?

Ajax是用来请求数据渲染页面的，是异步操作，用于页面的局部刷新，低版本浏览时不可以使用
//1.创建xhr 核心对象
	var xhr=new XMLHttpRequest();
//2.调用open 准备发送
//参数一：请求方式
//参数二: 请求地址
//参数三：true异步，false 同步
	xhr.open('post',url,true)
//3.如果是post请求，必须设置请求头。
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
//4.调用send 发送请求 （如果不需要参数，就写null）
	xhr.send('user=tom&age=10&sex=女')
//5.监听异步回调 onreadystatechange
	//判断readyState 为4 表示请求完成
	//判断status 状态码 为 200 表示接口请求成功
	//responeseText 为相应数据。字符串类型。
xhr.onreadystatechange=function(){
	if(xhr.readyState==4){ 
		if(xhr.status==200){
 			console.log(xhr.responseText);
			var res=JSON.parse(xhr.responseText);
 			console.log(res);
			if(res.code==1){
				modal.modal('hide');
				location.reload();
			}
		}
	}
}
//备注：如果是post请求，想要传json格式数据。
xhr.setRequestHeader('Content-Type', 'application/json')
//open发送数据
xhr.open({_id:xxx,user:xxxx,age:xxxx})

二十二、什么是跨域，以及jsonp的原理?

	跨域就是协议名、端口号、主机名三者不相同就是跨域，不相同就是同域。  
	JSONP就是动态绑定一个script标签请求接口地址，然后传递callback参数，后端接收
callback参数,经过处理返回callback,callback的参数就是jsonp。
	只能用get方式请求，浏览器兼容性好

二十三、跨域的解决方式有哪些？

jsonp方式
代理方式
CORS方式

二十四、说一下从输入 URL 到页面加载完中间发生了什么?

DNS解析
TCP链接（三次握手）
发送HTTP请求
服务器接收请求并且返还给浏览器
浏览器接收并解析渲染页面
链接结束（四次挥手）

二十五、 Vue 中 methods,computed, watch 的区别

methods是没有缓存性的，无论是否有变化只要触发了就会执行
computed有缓存性，当绑定的值发生变化了才会执行
watch没有缓存性，监听的值只要发生改变了就会触发

二十六、prop 验证，和默认值

	prop可以说就是父传子，形成单向数据流，在子组件里可以用props接收，在子组件里是不能修改父组件里的属性
的，如果想要修改只能通过$emit在父组件里修改
只要父组件发生更新是，子组件的prop值都会更新
默认值就是在子组件data函数里定义一个变量来接受通过props接过来的值 写法arr:this.值

二十七、vue 双向数据绑定原理

	双向数据绑定原理主要是使用数据劫持Object.defineProprty()方法里的，set()和get()来实现的，
在数据发生变化时发送给订阅者触发监听

二十八、vue 组件父子，子父，兄弟通信

父传子：
	在父组件的子组件标签中，定义一个自定义属性挂载要传输的值，在子组件中用props来接受
子穿父：
	子组件中定义一个点击事件，在点击事件里用this.$emit()来传输，在父组件的子组件的标签上
定义一个自定义事件，挂载传递过来的值可以在mounted中用this.$on()来接收
兄弟传值
	在src目录下创建一个bus.js文件，引入VUE默认导出一个vue的空实例。
	在兄弟一、二组件下都引入这个bus.js文件，在要传递数据的组件下用bus.$emit()来传递数据，
用bus.$on()来接收数据

二十九、vue 生命周期

创建前：beforeCreate --- 只初始化vue实例,data还没有加载
创建后：created --- data已经加载完毕可以使用data中的属性，可以调用methods中的方法，是最早操做data的
挂载前：beforeMount --- DOM树还没有加载完毕
挂载后：mounted --- DOM树已经加载完毕，这个钩子函数时最早可以操作DOM元素的
更新前：beforeUpdate --- 当数据发生改变时，内存是新的，页面是旧的
更新后：updated --- 当数据发生改变，内存是新的，页面也是新的
销毁前：beforedestroy --- 还没有销毁完毕 ，可以做一些清除定时器之类的
销毁后：Destroyed --- 已经销毁完毕

三十、vue 路由传参数如何实现

	有两种实现方式：query和params
	query传参可以使用touter-link或者$router.push()来传递参数使用？来拼接要传递的参数
	例如：to="/a/?id=id" 然后再页面通过$route.query.id来接收
	params传参通过在 router-link 或 this.$router.push()传递用/来拼接要传递的参数
	例如：to="/a/id" 然后再路由页面配置path:'/a/:id' 然后再页面通过$route.params.id来接收

三十一、路由导航守卫有几种，如何实现

守卫有三个参数分别是to,from,next
	to()到哪里去
	from()从哪里来
	next()一个回调函数，可以使用to方法
全局路由守卫
	全局前置守卫：router.beforeEach()
	全局后置守卫：router.afterEach()
组件路由守卫
	beforeRouterEnter()    进入当前路由时调用
	beforeRouterUpdate() 页面刷新时调用
	bedoreRouterLeave() 离开当前路由时调用
路由独享守卫
	beforeEnter()  路由独享守卫是在路由配置页面单独给路由配置的一个守卫

三十二、vuex中state、mutations、actions、getters、modules的用途和用法

VUEX就是一个vue的状态管理工具
state:是用来存储变量的
mutations:是vuex中唯一一个可以操作state属性的，是同步操作，在组件中使用$store.commit()来使用的
axtions:是异步操作，可以操作mutations里的方法，在组件中使用$store.dispath()来使用的
getters:相当于计算属性，可以可以计算state中的属性
modules:模块化管理

三十三、vue 中 key 的作用

唯一标识符，“key 值:用于管理可复用的元素。使页面更快更高效的渲染页面

三十四、vue 自定义指令如何使用？

	VUE的自定义指令分为全局和局部的
	全局是 Vue.directive()
	局部是 directives()
	自定义指令有五个钩子函数
	bind() // 只和调用一次，与元素第一次绑定时调用
	unbind() // 只和调用一次，与元素解绑定时调用
	update() // 元素所在模板更新时调用
	componentUpdate() // 元素所在节点以及其子节点更新时调用
	inserted() // 被绑元素插入父节点调用
	每个钩子都有四个参数
	el // 指令所绑定的元素，可以用来直接操作 DOM。
	binding // 一个对象
	vnode // 新节点
	onode // 旧节点

三十五、vue常用修饰符

	.stop  // 阻止事件冒泡
	.capture // 阻止事件捕获
	.prevent // 阻止默认事件
	.self // 只执行当前元素，不包括子元素
	.once // 只执行一次

三十六、keep-alive 的作用

缓存失活组件状态
有两个参数：
include - 匹配的组件会被缓存
exclude - 匹配的组件都不会被缓存

三十七、Object.defineProperty()方法有何作用

// 主要是用作数据劫持的，可以用来做双向数据绑定
// 这个方法有三个参数 第一个参数是对象，第二个参数是要设置的属性名字，第三个参数是要设置的属性描述
value:设置属性的值
writable:值是否可以重写 默认是false
get:目标属性获取值的方法
set:目标属性设置值的方法

三十八、什么是虚拟dom，和 diff 算法

		虚拟DOM就是提供与真实DOM节点所对应的虚拟节点vnode 和 onode对比然后进行视图更新
		diff算法就是用js对象的结构，来表示DOM树结构，然后用这个树创建一个真是的DOM树，插到文档中当数据
发生变更时，重新构造一个新的DOM树，然后用新的DOM树和旧的DOM树对比。把差异的部分更新到视图中

三十九、vue 中数组中的某个对象的属性发生变化，视图不更新如何解决

	可以使用this.$set(this.obj,key,value)
	可以使用Object.assign({},this.obj),Object.assign([],this.obj)

四十、vue3.0 与 vue2.0 的区别

性能提升，体积更小巧更快速，支持摇树优化；支持 Fragments 和跨组件渲染；支持自定义渲染器。
API变动，主要是scope-slot发生改变了，其他的没有什么变化
重写虚拟DOM