1、this指向
- 全局作用域下，this指向window；this就是window,指向window的空间地址
- 函数执行中，看看有没有‘.’,没有‘.’，this只想window,有点，指向点的前面
- 给元素的事件行为绑定方法，方法中的this指向当前被绑定的元素
- 自执行函数中的this永远指向window
- 回调函数中的this，一般指向window
- 构造函数中的this指向当前实例
- call/apply/bind可以改变this的指向
- 箭头函数中的this指向上一级作用域中的this
2、 vue生命周期
beforeCreate：在当前阶段data、methids、computed及watch上的数据和方法都不能访问created：实例创建完成之后，已完成数据观测。可以使用数据，更改数据，但是无法操作dombeforeMount：template模板已导入渲染函数编译，当前阶段虚拟dom创建完成mounted：挂载完成，当前阶段真实dom挂载完毕。数据完成双向数据绑定，可以访问dom节点beforeUpdate：更新之前，响应数据发生更新，可在当前阶段更改数据updated：更新完成之后，当前阶段组件dom已完成更新，要避免更新数据，导致无限循环更新beforeDestroy：实例销毁之前，在当前阶段进行收尾工作，如清除定时器destroyed：实例销毁之后，只剩下dom空壳。组件已拆解，数据绑定被卸除，监听移除，子实例被销毁
3、vue-router路由实现
画个图吧，感觉图比文字更清楚一些
4、mvvm原理及响应式数据原理
MVVM是Model-View-ViewModel缩写，也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。
Vue在初始化数据时，会使用Object.defineProperty重新定义data中的所有属性，当页面使用对应属性时，首先会进行依赖收集(收集当前组件的watcher)如果属性发生变化会通知相关依赖进行更新操作(发布订阅)。
此题答案来源：juejin.cn/post/684490…
5、实现双向数据绑定
<input id="input" />
const data = {};
const input = document.getElementById('input');
Object.defineProperty(data, 'text', {
set(val){
input.value = val;
this.value = val;
}
});
input.onchange = function(e){
data.text = e.target.value;
}
6、webpack流程步骤
1）初始化参数：从配置文件和shell语句中读取与合并参数，得到最终参数
2）开始编译：用上一步得到的对象初始化compiler对象，加载所有配置的插件
3）确定入口：根据配置中的entry找出所有的入口文件
4）编译模块：从入口文件出发，调用所有配置的loader对模块进行编译
5）完成编译：得到每个模块编译后的依赖关系
6）输出资源：根据入口和模块之间的依赖关系，组装成一个包含多个模块的chunk
7）写入文件：在确定号输出内容后，根据配置确定输出的路径和文件名
7、webpack中的loader和plugin的区别
1）在webpack.config.js中指定loader。此外，module.rules可以指定多个loader。loader虽然是扩展了 webpack ，但是它只专注于转化文件（transform）这一个领域，完成压缩，打包，语言翻译。
2）plugin完成的是loader不能完成的功能。plugin也是为了扩展webpack的功能，但是 plugin 是作用于webpack本身上的。plugin不仅只局限在打包，资源的加载上，它的功能要更加丰富。从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。
3）loader运行在打包文件之前（loader为在模块加载时的预处理文件）。plugins在整个编译周期都起作用。
8、组件传参
- 父传子：props
- 子传父：发布订阅
- 兄弟之间：eventBus
- 组件过多：vuex
9、nextTick实现
nextTick主要使用了宏任务和微任务.
- Promise
- MutationObserver
- setImmediate
- 如果以上都不行则采用setTimeout
10、vue如何监测数组变化
- 使用函数劫持的方式，重写了数组的方法
Vue将data中的数组，进行了原型链重写。指向了自己定义的数组原型方法，这样当调用数组api时，可以通知依赖更新.如果数组中包含着引用类型。会对数组中的引用类型再次进行监控。
11、https与http的区别
1）https需要到Ca申请证书，免费较少，需要一定费用
2）http是超文本传输协议，信息是明文传输。https具有安全性的ssl加密传输协议
3）http和https是完全不同的连接方式，端口也不同，前者是80，后者是443
4）http连接是无状态的。https状态是由ssl和http协议构建的，可进行加密传输，身份认证的网络协议，比较安全
12、vue3.0
1）vue2和vue3双向数据绑定原理发生了改变
2）默认进行懒观察（lazy observation）
3）更精准的变更通知
4）3.0 新加入了 TypeScript 以及 PWA 的支持
1）vue2和vue3组件发送改变
13、常见的状态码
- 301 永久性重定向
- 302 临时性重定向
- 304 该状态码表示客户端发送附带条件的请求时，服务器端资源已找到，但未符合条件请求
- 400 参数错误
- 401 访问加密 需要登录
- 403 拒绝或禁止访问
- 500 服务器内部错误
14、get和post的区别
1）传送方式：get通过地址栏，post通过报文
2）传送长度：get有参数限制（2kb），post没有参数限制
3）get产生1个TCP数据包，post产生2个TCP数据包
4）get 浏览器会把http、header和data一并发送出去，服务器响应200，返回数据
post 浏览器先发送header，服务器响应100 continue；浏览器再发送data，服务器响应200 ok，返回数据 并不是所有浏览器都会在post发送两个包，fireFox就只发送一次
5）post比get更安全
6）做查询，用get；数据添加、修改、删除用post
15、cookie和session的区别
1）保持状态：cookie保存在浏览器端。session保存在服务器端
2）使用方式：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。而当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据该id返回对应session对象。
3）存储内容：cookie只能保存字符串类型，以文本的方式；session通过类似与Hashtable的数据结构来保存，能支持任何类型的对象(session中可含有多个对象)
4）存储大小：cookie：单个cookie保存的数据不能超过4kb；session大小没有限制。
5）安全性：cookie：针对cookie所存在的攻击：Cookie欺骗，Cookie截获；session的安全性大于cookie。
16、闭包
主要考察定义，使用场景及数据泄露的问题
17、js执行顺序及事件循环机制
当主任务队列中的任务完成之后，然后去等待队列先找到微任务，把微任务放到主任务队列执行。如果有多个微任务，按照执行顺序依次执行，执行完再去执行等待队列中的宏任务
18、原型链
1）每一个函数数据类型（函数、类）都天生自带一个prototype属性，prototype的属性值是一个对象数据类型的
2）prototype的属性值都天生自带一个constructor属性，其属性值指向当前原型所属的类
3）每一个对象数据类型天生自带一个__proto__属性，其属性值指向当时实例所属类的原型
4种继承方式：
原型继承、中间类继承、call继承、寄生组合继承
19、设计模式
当时只说到了2个，单例模式和工厂模式
- 单例模式：也叫“手工作业模式”，把描述同一件事物的不同属性放在同一个空间下，避免了全局变量的干扰
- 工厂模式：把实现同一功能的代码放到一个函数中，当想实现这个功能时，直接执行这个函数就可以，从而减少代码的冗余，实现高内聚、低耦合的特点
20、px rem em区别
- px 绝对单位
- rem 相对于根元素
- em 相对于父级元素
- vw 可视区宽度
- vh 可视区高度
21、检测数据类型
typeof：可以检测基本数据类型和函数instanceof：检测实例是否属于某个类（如果是返回true；不是返回false）constructor：当前实例是否是Fn的一个实例；是的话返回true；不是返回falseObject.prototype.toString.call();：通过自定义类创建的实例，返回"[object Object]"
22、微任务 宏任务
- 微任务：promise的then、async await、process、nextTick
- 宏任务：setTimeout、setInterval、ajax
23、key的作用
DIFF算法在执行时有三个维度，分别是Tree DIFF、Component DIFF和Element DIFF，执行时按顺序依次执行，它们的差异仅仅因为DIFF粒度不同、执行先后顺序不同。新旧 children 中的节点只有顺序是不同的时候，最佳的操作应该是通过移动元素的位置来达到更新的目的。
需要在新旧 children 的节点中保存映射关系，以便能够在旧 children 的节点中找到可复用的节点。key也就是children中节点的唯一标识。key的作用是尽可能的复用 DOM 元素。
24、keep-alive
这个有问到，额。。。但是我没用过。。。
25、防抖、节流
// 防抖
function debounce(fn, delay) {
let timer = null
return function () {
if (timer) {
clearTimeout(timer)
timer = setTimeout(fn, delay)
} else {
timer = setTimeout(fn, delay)
}
}
}
// 节流
function throttle(fn, delay) {
let valid = true
return function () {
if (!valid) {
//休息时间 暂不接客
return false
}
// 工作时间，执行函数并且在间隔期内把状态位设为无效
valid = false
setTimeout(() => {
fn()
valid = true;
}, delay)
}
}
26、null和undefined的区别
- null的3种情况 1）通过id获取元素时，如果id对应的这个元素不存在，获取的结果为null
2）正则捕获如果捕获不到内容，得到的结果为null
3）获取元素的哥哥节点时，如果不存在，得到的结果为null
- undefined的4种情况 1）获取对象的属性名对应的属性值，如果属性名不存在，得到的属性值为undefined
2）如果变量只声明，不赋值，默认的存储值为undefined
3)函数如果只有形参，没有对应的实参，形参默认值是undefined
4）函数如果没有return，默认函数的返回值是undefined
27、http1与http2的区别
1） HTTP2采用二进制格式而非文本格式
2） HTTP2是完全多路复用的，而非有序并阻塞的——只需一个连接即可实现并行
3） 使用报头压缩，HTTP2降低了开销
4） HTTP2让服务器可以将响应主动“推送”到客户端缓存中
28、箭头函数和普通函数的区别
1）箭头函数不存在arguments;参数过多，采用剩余运算符，接收所有的实参
2）不能作为构造函数，不能被new
3）不存在this，箭头函数的this指向箭头上一级作用域的this指向
4）不能使用yield命令，也不能作为generator函数
