Vue篇
1. vue的组件化需要用到哪些技术点？
组件化常用到组件传值、通信，包括属性Props，饮用refs，子组件children，emit父组件自定义事件，$parent搭桥通信，事件总线EventBus，
2.vue3.0和vue2.0的区别
- 生命周期变化使用
setup代替了beforeCreate，created - 使用
proxy代替defineProperty，defineProperty只能响应首次渲染时候的属性，Proxy需要的是整体，不需要关心里面有什么属性 diff算法的提升，减少了循环对比，减少了CPU占用时间typescript支持- 打包体积变小
3.为什么Vue3用了proxy 性能更好？
proxy本身性能就比defineProperty要好。另外代理对象可以拦截属性的访问、赋值、删除等操作，不需要初始化时遍历所有的属性。另外多层嵌套属性只有在访问时才会递归处理下一层属性
可以监听动态新增的属性，vue2.0中需要调用vue.set()进行处理
可以监听删除的属性，vue2.0监听不到属性的删除
可以监听数组的索引和length属性，vue2.0监听不到这两个属性的操作，2.0为了监听数组重写了push等方法
4.proxy的缺点是什么？proxy为什么比Object.defineProperty快？
proxy缺点是兼容性差，无法用polyfill来兼容，因为Object.defineProperty只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。
5.Vue3 在打包时按需引入是如何做到的，为什么Vue2没有做到？
vue3按需引入依赖于es6模块语法的静态结构特性例如 import 和 export。首先通过静态分析确定依赖关系，和运行时的状态无关，可以进行可靠的静态分析。静态分析会在绘制依赖图时做DCE，减少打包体积。当全部导入时就不支持tree shaking
6.Vue项目性能优化？
- 代码层面优化，条件语句，循环语句优化等等，图片资源优化，比如使用，vue-lazyload实现懒加载，优化页面卡顿，路由优化，使用
babel-plugin-component插件优化加载，服务端渲染。 - webpack优化，压缩图片，提炼公共代码，预编译，提取CSS，优化SourceMap，编译优化
- gzip压缩，浏览器缓存，CDN
7.有没有了解http缓存？
HTTP缓存主要是通过请求和响应报文头中的对应 Header 信息，来控制缓存的策略。服务器响应请求时，会告诉浏览器一个告诉浏览器资源的最后修改时间，浏览器之后再请求的时候，会带上一个头时间，这个值就是服务器上一次给的最后修改时间，服务器会比对资源当前最后的修改时间，，则说明资源修改过了，浏览器不能再使用缓存，否则浏览器可以继续使用缓存。
8. 强缓存是对比的哪个header值？
强缓存是指不会向服务器发送请求，直接从缓存中读取资源，强缓存可以通过设置两种 HTTP Header 实现：Expires（http1.1不用设置了，作用基本忽略） 和 Cache-Control。
9. 说一下什么是协商缓存？协商缓存会在什么时候读？
协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程，通过设置通过设置Last-Modified 和 ETag 实现。强制缓存优先于协商缓存进行，若强制缓存生效则直接使用缓存，若不生效则进行协商缓存，协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，返回200，重新返回资源和缓存标识，再存入浏览器缓存中；生效则返回304，继续使用缓存。
10. 有没有了解资源的缓存策略？ html、css、js的缓存怎么设置？
浏览器缓存，h5的Application Cache，PWA（渐进式网页应用，Vue+Ionic），CDN缓存，html、css、js的缓存可以通过cache-control，etag等设置
11. Vue中的插槽机制是怎么样的，如何使用？
Vue中的插槽机制时，组件内部定义的slot标签，我们可以理解为占位符，父组件中插槽内容，就是要分发的内容。插槽处理本质就是将指定内容放到指定位置。插槽就是一个返回VNode的函数。普通插槽和作用域插槽没有区别，普通插槽就是作用域插槽的子集。
12. 插槽有哪些API?插槽的作用域
略
13. 具名插槽如何使用？
略
14. 自定义组件的双向绑定怎么写？
vue双向绑定v-model相当于一个特殊的语法糖，绑定了:value和@input两个命令，通过props接收组件在外部使用时v-model传进来的值，但是传进来的值不能修改，否则会违反vue单向数据流的原则，修改完成后通过$emit方法完成更新操作。
15. 父子组件如何通信？除过$emit和eventbus外你还知道哪些？
props，slot，Vuex, $children/$parent,$ref,provide/ inject，localStorage/sessionStorage
16. vue双向绑定的sync有了解过吗？
.sync修饰符：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。
17. Vue组件的响应式，他对数组做了额外处理吗？
Object.defineProperty响应式只对对象有效，对数组无效，通过重写：sort, push, pop, slice, splice, shift, unshift方法来达到监听数组的响应式功能。
18. 知道数组有哪些API会改变原数组吗？
- shift：将第一个元素删除并且返回删除元素，空即为undefined
- unshift：向数组开头添加元素，并返回新的长度
- pop：删除最后一个并返回删除的元素
- push：向数组末尾添加元素，并返回新的长度
- push：向数组末尾添加元素，并返回新的长度
- reverse：颠倒数组顺序
- sort：对数组排序
- splice:splice(start,length,item)删，增，替换数组元素，返回被删除数组，无删除则不返回
语法篇
19. 说一下解构
解构就是一种打破数据解构，将其拆分成更小部分的过程，解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量，解构对象，你可以把它的每个属性与不同的变量绑定。
20. 说一下剩余参数，他是如何使用的？
...
21. 解构时，如何给一个变量赋默认值？
可以在表达式左边中为任意对象预设默认值,比如[a=1] = [2]
22. 你是怎么使用Promise的？
Promise表示一个当被创建出来时不一定已知的值，使用方法是通过Promise的构造函数接收一个参数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。resolve是将Promise的状态置为fullfiled，reject是将Promise的状态置为rejected。构造成功之后，我们可以通过链式调用，then，catch等方法来获取回调函数的参数。
23. 如何把一个请求封装成Promise方式？
window.jQuery.ajax = ({method,path,body,headers})=>{//ES6语法
//进行Promise封装
return new Promise((resolve,reject)=>{//这句话是套路,记住
let request = new XMLHttpRequest();
request.open(method,path);//配置
for (const key in headers) {//遍历header,设置响应头
let value = headers[key];
request.setRequestHeader(key,value);
}
request.send(body);//发送,并配置响应体
request.onreadystatechange = ()=>{
if(request.readyState ===4){
if ( request.status>=200&&request.status<=400){
resolve.call(undefined,request.responseText);//执行成功函数
}else if(request.status>=400){
reject.call(undefined,request);//执行失败函数
}
}
}
})
}
24. then可以接受什么回调，它可以接受失败回调吗？
then方法中接受两个回调，一个成功的回调函数，一个失败的回调函数。
25. 说一下Typescript中的泛型，以及他的使用方式与场景？
泛型是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型。 使用场景是，当组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型时，需要考虑使用范性。在需要使用范型的函数，类，接口的时候使用<>符号描述需要使用范型
27. 举使用typescript泛型的例子？
比如描述一个需要可以添加任何类型的数据的队列
30. 说一下typescript中的内置类型
partial：泛型的所有属性标记为可选属性
Required：泛型的所有属性标记为必选属性
Readonly: 将所有属性标记为 readonly
pick: 从某个类型中过滤出某个或某些属性
Record: 标记对象的key或者value的类型
Exclude: 移除特定类型中的某个（些）属性
Extract: Exclude 的反操作，取 T，U 两者的交集属性
NonNullable: 排除类型 T 的 null | undefined 属性
ReturnType: 获取函数类型 T 的返回类型
31. 说一下typescript中的 pick类型？
这个类型则可以将某个类型中的子属性挑出来，比如服务端传输一个json，通过 pick过滤，获得仅需要的属性。
32. 如何使用typescript定义一个对象类型？
使用接口Interfaces 来定义对象的类型，使用class来实现对象具体方法。
33. 说一下typescript 中的 type 与 interface 的区别
相同点是，都可以描述对象或者函数，都可以被不同的方式去实现。
不同点是：type可以声明基本类型别名，联合类型，元组等类型，interface不可以，interface可以进行声明合并，type不可以
一般来说，如果不清楚什么时候用interface/type，能用 interface 实现，就用 interface , 如果不能就用 type 。
34. 说一下typescript中的交叉类型
交叉类型是将多个类型合并为一个类型。 这让我们可以把现有的多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性，通过&符号进行操作。而 交叉类型的对象同时拥有了这三种类型的成员。
CSS篇
36. 说一下flex中，你常用的的属性？
flex-direction 项目的排列方式
flex-wrap排列满屏是否换行
align-items属性决定了项目在交叉轴上的对齐方式
justify-content:决定了项目在主轴上的对齐方式
align-content：决定了多根轴线的对齐方式
37. flex溢出换行用的哪个属性？
flex-wrap
38. 主轴与交叉轴的方向用哪个属性定义？如何颠倒这些属性？
justify-content，align-items，通过设置order属性
39. 说一下flex-grow怎么使用？
flex-grow 属性用于设置或检索弹性盒子的扩展比率。数字越大扩展比例越高，默认值是-0
40. 说一下css的选择器都有哪些以及优先级？
通配符选择器，标签选择器，类选择器，id选择器，
!important>行内样式>ID选择器>类、伪类、属性>元素、伪元素>继承>通配符
43. 让元素横着排列，除了 flex还可以怎么做？
display：inline-block
float：left/right
table布局
绝对定位
flex/grid
transform:translate
