自我介绍
问： 用的vue比较多还是react比较多
答：react
问： （笑），那可以问vue吗，因为我们这边要求用react开发
答： 哈哈，没有问题
（进入正题）
问题一：vue中组件中的data为什么是一个函数？
答： 一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。
问题二：用过vue-router吧，说说vue-router的模式
答：hash和history；
hash模式（vue-router默认模式URL后面带#）使用URL的hash值来作为路由，支持所有浏览器,vue-router默认就是hash模式， 缺点：只能改变#后面的来实现路由跳转。
history模式 通过HTML5 History API 和服务器配置， 缺点：怕刷新如果后端没有处理这个情况的时候前端刷新就是实实在在的请求服务器这样消耗的时间很多还很慢。
追问 => 怎么去设置模式是hash还是history呢?
复答：默认就是hash不用设置，通过mode: 'history’来改变为history模式
问题三：有处理过跨域问题吗？简单说下为什么会有跨域，跨域的解决方法有哪些
答：有的，跨域是是因为浏览器的同源策略限制，是浏览器的一种安全机制，服务端之间是不存在跨域的。所谓同源指的是两个页面具有相同的协议、主机和端口，三者有任一不相同即会产生跨域。而同源策略规定，不同源的页面之间，不准互相访问数据。
解决方法有：jsonp, 跨域资源共享(cors),nginx代理跨域，简单介绍了下巴拉巴拉
追问：jsonp为什么能解决跨域问题呢
复答：
1.因为jsonp是通过script标签
2.用script标签加载资源是没有跨域问题的
打破沙锅式追问：实际怎么操作呢
嘴角上扬式作答：在资源加载进来之前先定义一个函数，这个函数接受一个参数(数据)，函数里面利用这个参数做一些事情。
然后在需要的时候通过script标签加载对应远程文件资源，当远程的文件资源被加载进来的时候，就会执行我们前面定义好的函数，并且把我们想拿到的数据当做这个函数的参数传入进去。
（KO！）
问题四：说下js的缓存吧
答：js的缓存一般分为cookie
sessionStorage
localStorage
indexedDB
区别
关于cookie、sessionStorage、localStorage三者的区别主要如下：
存储大小：cookie数据大小不能超过4k，sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
有效时间：localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； sessionStorage数据在当前浏览器窗口关闭后自动删除；cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
数据与服务器之间的交互方式，cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端； sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
应用场景
在了解了上述的前端的缓存方式后，我们可以看看针对不对场景的使用选择：
标记用户与跟踪用户行为的情况，推荐使用cookie
适合长期保存在本地的数据（令牌），推荐使用localStorage
敏感账号一次性登录，推荐使用sessionStorage
存储大量数据的情况、在线文档（富文本编辑器）保存编辑历史的情况，推荐使用indexedDB，（顿了一下）
以上四种都是本地缓存
（PS： 自己挖坑坐等你问还有什么缓存，协商缓存我又可以巴拉巴拉了，可惜面试官没有get到我的点，下一个了）
问题五：说到缓存 ，你知道keep-alive吗，简单说下
答：keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动的组件，我们能够知道，一般情况下，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用keep-alive来实现。
追问：keep-alive缓存页面之后去到另外一个页面，再想回到之前缓存的页面，怎么操作？
答：（想了一会，扶了扶额），这个我真想不起来了，太久没用vue了，下一个吧
问题六： Vue中key是用来做什么的？为什么不推荐使用index作为key？
答：
1、key的作用是唯一标识，主要是为了高效的更新虚拟DOM（使用key，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素）
2、当以数组的下标index作为index值时，其中一个元素（如增删改查）发生了变化就有可能导致所有元素的key值发生变化
问题七： 浏览器从你输入url到页面显示出来经历了什么？
答：
1、DNS解析：url解析成ip地址和对应的端口号
2、建立TCP连接：通过三次握手与服务器建立连接，然后进行数据传输
3、客户端发送HTTP请求：把输入的地址封装成HTTP Request请求行，发送给服务器
4、服务端返回资源
5、浏览器渲染页面
6、断开TCP连接：通过四次挥手断开连接
问题八： 说下ES6吧，ES6新增了哪些方法
答：
1、includes（）用于判断数组是否包含给定的值 返回一个布尔值
2、find（）用于找出第一个符合条件的数组成员
3、findindex（）返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1
4、set数据结构，类似于数组，但是成员的值都是唯一的，没有重复的值
5、let声明变量、const声明常量（这里就要问你var、let、const的区别了）
6、解构赋值 ...
追问：set 和map 的区别！！！（被问到没看过，懵逼了，所以记录在此）
1.Map是键值对，Set是值的集合，键和值可以是任何的值；
2.Map可以通过get方法获取值，而set不能因为它只有值，set只能用has来判断，返回一个布尔值；
4.Set的值是唯一的可以做数组去重，Map由于没有格式限制，可以做数据存储
- promise
- 箭头函数
- class 类的继承
ES6中不再像ES5一样使用原型链实现继承，而是引入Class这个概念,Class可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多；
追问： 说到var、let、const，你知道他们的区别吗
答：（嘿，我就知道）
var声明的变量存在变量提升，即变量可以在声明之前调用，值为undefined
let和const不存在变量提升，即它们所声明的变量一定要在声明后使用，否则报错
暂时性死区
var不存在暂时性死区
let和const存在暂时性死区，只有等到声明变量的那一行代码出现，才可以获取和使用该变量
块级作用域
var不存在块级作用域
let和const存在块级作用域
重复声明
var允许重复声明变量
let和const在同一作用域不允许重复声明变量
修改声明的变量
var和let可以
const声明一个只读的常量。一旦声明，常量的值就不能改变
使用
能用const的情况尽量使用const，其他情况下大多数使用let，避免使用var
追问：箭头函数和普通函数的区别
答： （这个回答的不是很好，不全面，这里事后去搜了一下，记录在此）
- 箭头函数比普通函数更加简洁
{ 如果没有参数，就直接写一个空括号即可
如果只有一个参数，可以省去参数的括号
如果有多个参数，用逗号分割
如果函数体的返回值只有一句，可以省略大括号}
2.箭头函数没有自己的this
箭头函数不会创建自己的this， 所以它没有自己的this，它只会在自己作用域的上一层继承this。所以箭头函数中this的指向在它在定义时已经确定了，之后不会改变。
3.箭头函数继承来的this指向永远不会改变
···
var id = 'GLOBAL';
var obj = {
id: 'OBJ',
a: function(){
console.log(this.id);
},
b: () => {
console.log(this.id);
}
};
obj.a(); // 'OBJ'
obj.b(); // 'GLOBAL'
new obj.a() // undefined
new obj.b() // Uncaught TypeError: obj.b is not a constructor
···
对象obj的方法b是使用箭头函数定义的，这个函数中的this就永远指向它定义时所处的全局执行环境中的this，即便这个函数是作为对象obj的方法调用，this依旧指向Window对象。需要注意，定义对象的大括号{ }是无法形成一个单独的执行环境的，它依旧是处于全局执行环境中。 - 箭头函数不能作为构造函数使用
由于箭头函数时没有自己的this，且this指向外层的执行环境，且不能改变指向，所以不能当做构造函数使用。 - 箭头函数没有自己的arguments
箭头函数没有自己的arguments对象。在箭头函数中访问arguments实际上获得的是它外层函数的arguments值，取而代之需要用展开运算符解决...解决
6.箭头函数没有没有原型属性prototype
问题九 : 工作中遇到的难题，怎么解决的
答：（开放性问题，就不在这细说了），简单说了关于视频流加载音视频不同步的问题和剪裁视频遇到的下载到本地不能播放的问题和怎么解决的
总结：
1. 没有问算法类的和源码类的，可能打算招聘的不是高级。
2. 比较开门见山，上来就问vue，不像其他项目会问你觉得自己哪个框架比较熟，后来了解得知项目刚成立一周多，大概是缺人干活，要一来就能埋头卷的那种。
3. 难度不大，但是光熟读八股文也不够，他们会问细节，甚至具体操作，实现原理，假如只背了百度上的粗略答案而没有实际做过的会被一语道破，别幻想一言以蔽之，还是得多准备准备。
网友评论