盒子模型
https://www.bilibili.com/video/BV1sf4y1E7qN?p=2&vd_source=bb1c7fd921cf837ec97726bd611c96e1
css画三角形
https://www.bilibili.com/video/BV1sf4y1E7qN?p=7&vd_source=bb1c7fd921cf837ec97726bd611c96e1
bfc（重点！）
https://www.bilibili.com/video/BV1sf4y1E7qN?p=10&vd_source=bb1c7fd921cf837ec97726bd611c96e1
清除浮动
https://www.bilibili.com/video/BV1sf4y1E7qN?p=11&vd_source=bb1c7fd921cf837ec97726bd611c96e1
重绘和回流
https://www.bilibili.com/video/BV1rV411n72v?p=300&vd_source=bb1c7fd921cf837ec97726bd611c96e1
css隐藏一个元素的方法
css3有哪些新特性？
css的预编译器用过哪些，有什么特点？
定义变量、使用嵌套、运算
三栏布局的五种方式
https://www.bilibili.com/video/BV1G64y1y764?p=4&vd_source=bb1c7fd921cf837ec97726bd611c96e1
typeof的用法
https://www.bilibili.com/video/BV1rV411n72v?p=23&vd_source=bb1c7fd921cf837ec97726bd611c96e1
**instanceof **
https://www.bilibili.com/video/BV1Y84y1L7Nn?p=183&vd_source=bb1c7fd921cf837ec97726bd611c96e1
null和undefined的区别？
https://www.bilibili.com/video/BV12G411p7BQ/?spm_id_from=333.337.search-card.all.click&vd_source=bb1c7fd921cf837ec97726bd611c96e1
数组有哪些方法？
如何给一个对象转换成字符串？
我们可以用JSON.stringfy
如果给数组转换成一个字符串?
我们可以用arr.toString()
我们可以用数组方法arr.join(),而且这两个方法可以把多维数组转换为字符串，但是缺点是
缺点就是如果元素是对象的话，会出现[object,Object]
js如何合并两个数组？合并两个对象呢？
合并数组:1 for循环 2concat 3 push.apply 4 es6
合并对象
webapi（事件监听，事件流，事件冒泡，阻止冒泡，事件委托，dom的增删查）
https://www.bilibili.com/video/BV1Y84y1L7Nn?p=77&vd_source=bb1c7fd921cf837ec97726bd611c96e1
什么事件监听？
让程序检测是否有事件产生，一旦有事件触发，就立即调一个函数做出响应
什么是事件流？
https://www.bilibili.com/video/BV1m7411L7YW/?spm_id_from=333.337.search-card.all.click&vd_source=bb1c7fd921cf837ec97726bd611c96e1
事件流 分为捕获阶段和冒泡阶段.
捕获阶段：当我点击一个元素，事件不会立即触发，而是从顶部document一层一层向目标元素流动，我们把这个阶段叫做捕获。
冒泡阶段：当事件触发后，事件会以冒泡的形式一层层向上传播，我们把这个过程叫做冒泡
我们绑定事件可以利用addEventListenrt,第三个参数默认是false，表示事件在冒泡阶段触发，true表示在捕获阶段触发
什么叫事件委托？
我们可以利用事件冒泡来事件委托,如果我想给多个子元素绑定相同的事件，我不需要每一个都绑定，直接在父元素上绑定事件，然后子元素通过冒泡去触发父元素的事件
事件循环
https://www.bilibili.com/video/BV1Y84y1L7Nn?p=127&vd_source=bb1c7fd921cf837ec97726bd611c96e1
闭包
https://www.bilibili.com/video/BV1Y84y1L7Nn?p=154&vd_source=bb1c7fd921cf837ec97726bd611c96e1
es6
https://www.bilibili.com/video/BV1tb4y1D7pR?p=92&vd_source=bb1c7fd921cf837ec97726bd611c96e1
数组解构：
let [a,b,c] = [1,2,3]
对象解构：{a,b,c} = {}
剩余参数 ...args
扩展运算符(用来给数组或者对象转为用逗号分割的参数列表，可以用来进行合并数组，伪数组变成数组，合并对象)
let arr = [1,2,3] console.log(...arr)
arr.push(...[4,5,6]) {name:'zhangsan',...{age:18}} .
原型对象
https://www.bilibili.com/video/BV1Y84y1L7Nn?p=178&vd_source=bb1c7fd921cf837ec97726bd611c96e1
递归（老师讲的不太行，但是案例不错）
有一个小孩正在爬楼梯，每次只能走1个台阶或者2个台阶，问你如果要爬到第n个台阶，有几种方式？
1 1
2. (1+1,2)
3. (1+1+1,1+2,2+1) 3
n
深拷贝
https://www.bilibili.com/video/BV1Y84y1L7Nn?p=189&vd_source=bb1c7fd921cf837ec97726bd611c96e1
防抖节流底层实现
https://www.bilibili.com/video/BV1Y84y1L7Nn?p=196&vd_source=bb1c7fd921cf837ec97726bd611c96e1
什么是图片懒加载？
简单版：
https://www.bilibili.com/video/BV1jq4y117Qz/?spm_id_from=333.337.search-card.all.click&vd_source=bb1c7fd921cf837ec97726bd611c96e1
复杂版：
https://www.bilibili.com/video/BV1gX4y187pL/?spm_id_from=333.337.search-card.all.click&vd_source=bb1c7fd921cf837ec97726bd611c96e1
** 浏览器输入一个url按enter到底发生了什么（u rl地址解析，dns解析和预获取，tcp三次握手四次挥手，dom回流重绘）**
call，bind，apply的区别
https://www.bilibili.com/video/BV1Y84y1L7Nn?p=193&vd_source=bb1c7fd921cf837ec97726bd611c96e1
http请求方式的区别
https://www.bilibili.com/video/BV1rV411n72v?p=306&vd_source=bb1c7fd921cf837ec97726bd611c96e1
** ajax**
https://www.bilibili.com/video/BV1rV411n72v?p=305&vd_source=bb1c7fd921cf837ec97726bd611c96e1
跨域
https://www.bilibili.com/video/BV1eX4y1C7Xn/?spm_id_from=333.337.search-card.all.click&vd_source=bb1c7fd921cf837ec97726bd611c96e1
promise
https://www.bilibili.com/video/BV1454y1R7vj?p=1&vd_source=bb1c7fd921cf837ec97726bd611c96e1
简单版promise的原理
https://www.bilibili.com/video/BV1GA411x7z1?p=25&vd_source=bb1c7fd921cf837ec97726bd611c96e1
0.1+0.2为什么等于0.3
https://www.bilibili.com/video/BV1Ji4y1t7DY/?spm_id_from=333.337.search-card.all.click&vd_source=bb1c7fd921cf837ec97726bd611c96e1
localstorage sessionstorage cookie
https://www.bilibili.com/video/BV1SL4y1i7ZL/?spm_id_from=333.337.search-card.all.click&vd_source=bb1c7fd921cf837ec97726bd611c96e1
vue八股文
https://www.bilibili.com/video/BV1TN411P7JC?p=2&vd_source=bb1c7fd921cf837ec97726bd611c96e1
谈谈你对生命周期的理解
1为什么要用到生命周期钩子函数：
比如我一个组件，进去就需要开启一个定时器，或者需要在调接口请求数据，可以利用到生命周期钩子函数。生命周期钩子函数会在一个关键性的时刻进行调用，vue会自动帮我们调用。而且生命周期钩子函数里面的this，vue已经帮我们维护好了，就是组件的实例。
beforecreate:无法访问data里面的数据和methods方法
created：可以放访问data里面的数据和methods方法，而且vue已经实现了对data里面数据的响应式拦截
vue开始解析模版，生成虚拟dom
beforemounted：这个时候页面呈现的是未经vue编译过的dom结构
vue把虚拟dom转换为真实的dom插入页面
mounted：这个时候页面中的dom是vue经过编译以后的dom结构，至此，我们可以去开启定时器，ajax请求，绑定自定义事件，至此，vue的整个初始化的过程就完成了。
当我们修改data里面数据的时候，会触发两个钩子函数beforeupdated和updated
beforeupdated： 数据是新的，但是页面是旧的。
会 根据新的数据生成新的虚拟dom，然后去跟旧的虚拟dom进行对比，更新dom
updated：数据是新的，页面也是新的，页面和数据保持同步
beforedestroyed：
destroyed：
谈谈你对mvvm的理解：
https://www.bilibili.com/video/BV1iw411d7h6?p=10&vd_source=bb1c7fd921cf837ec97726bd611c96e1
m的意思是model，模型的意思，对应的是data里面的数据
v的意识view，视图的意思，对应的就是我们的页面
vm，viewmodel对应的就是我们的vue实例
mvvm就是当我data里面的数据改变，页面会随之改变。当我修改页面里面的数据，data里面的数据也会被改变
vue的响应式原理
let vm = {data:{name:'张三',age:15,hobby:[1,2,3]} }
function Observe(data){
for(let key in data) {
if(Array.isArray(data[key])){
console.log(data[key],'我进来啦')
observeArray(data[key])
}else{
defineReactive(key,data,data[key])
}
}
}
function defineReactive(key,data,value){
Object.defineProperty(data,key,{
get(){
return value
},
set(val){
console.log(key+'的值改变了,我要去渲染页面了')
value = val
}
})
}
function observeArray(arr){
arr.__proto__ ={
push(...args){
Array.prototype.push.call(arr,...args)
console.log('数组变化啦，我去渲染试图啦')
},
pop(){
},
shift(){
},
unshift(){
},
sort(){
}
}
}
Observe(vm.data)
首先要搞清楚defineProperty的用法
利用Observe方法返回一个实例，对data里面的数据进行劫持, 把这个实例挂载到vm对象上的_data上。当我修改observe实例的属性的时候，会触发set方法，修改data里面的数据的同时，去进行页面的重新渲染
检测数组变化：
当面试官问我vue如何检测数组的变化，我首先回答，在vue2里面，我们直接通过下标来修改数组里面的元素，页面是不会变化的，如果想让页面变化，我们需要使用push,pop,unshift,shift,splice,sort,reverse.
那是因为，vue重写了数组的方法，
vue路由传参
query传参通过url地址问号后面拼接传参，参数用query传和地址用path或name传
params传餐需要在配置路由的时候提前设置好占位符，地址用path或name传和参数用params传（用to的对象形式跳转，地址必须用name）
v-if和v-show的区别
v-if隐藏元素，页面会直接移除这个dom元素；v-show隐藏元素，页面会利用样式display:none去隐藏这个元素，不会暴力的去动我们的dom树
如果我们需要频繁的切换一个元素的显示与隐藏，那么我们建议用v-show，因为v-show的话，这个节点是存在的，性能较高。
谈谈你对keep-alive的理解:
keep-alive是vue自带的一个组件，可以用来对别的组件进行缓存，被缓存的组件会多出两个钩子函数，一个叫activated,一个叫deactivated。
keep-alive应用场景：从列表页面，进入详情页，返回列表页再次进入同一个详情页，我不想再去调用接口请求数据，我可以利用keep-alive把页面缓存起来。如果进入不同的详情页，我可以在钩子函数activated里面根据id进行判断，如果id和上一次不相同，我就再次调接口请求。
v-for中key的作用与原理（先给学生演示一下，然后视频从第十分钟开始放）
https://www.bilibili.com/video/BV1iw411d7h6?p=30&vd_source=bb1c7fd921cf837ec97726bd611c96e1
vue2中的diff算法？
diff算法主要是对父元素里面的所有子元素的新旧虚拟dom进行一个比对。四个指针，
oldstart,oldend,newstart,newend
https://www.bilibili.com/video/BV14i4y1g7iQ/?spm_id_from=333.337.search-card.all.click&vd_source=bb1c7fd921cf837ec97726bd611c96e1
vue3中生命周期钩子有哪些？
vue3和vue2有什么区别？
vue2是选项式api，vue3组合式api
vue3生命周期也可以写成组合式api的形式
vue2里面用mixin混入(多个组件存在重复代码)，vue3采用了自定义hooks
vue2响应式原理defineproperty，vue3响应式proxy
vue3中的响应式原理？
https://www.bilibili.com/video/BV11f4y1j7Vx/?spm_id_from=333.337.search-card.all.click&vd_source=bb1c7fd921cf837ec97726bd611c96e1
vue3中的diff算法？
https://www.bilibili.com/video/BV1a5411V7kX/?spm_id_from=333.337.search-card.all.click
vue3为什么要添加组合式api？vue3有哪些组合式api？
ref reactive computed watch
watchEffect(监视的回调中用到哪个属性，就监视哪个属性，有点类似computed)
toRef
toRefs（将响应式数据中的某个属性单独交给外部使用）
shallowReactive(只给第一层数据添加响应式)
shallowRef(给基本类型添加响应式，对于对象类型的替换也有响应式，但是对象内部属性的修改，没有响应式)
readonly(给我一个响应式数据，我给他变成只读的)
shallowreadonly(响应式数据的第一层 是只读的)
provide/inject（祖孙组件，跨级组件之间的通信）
vue3里面父组件怎么调用子组件啊？
vue3的生命周期钩子函数有哪些？
vue3里面没有breforedestroyed和destroyed了，改成了beforeunmount和unmount
vue3里面可以按照vue2的方式去书写生命周期钩子函数，
当然vue3也提供了组合式api的生命周期钩子函数:
beforemount--->onbeforemount
mounted-->onMounted
beforeupdate-->onBeforeUpdate
updated-->onUpdated
beforeUnmount-->onbeforeUnmount
unmounted--onunmounted
笔试题：
1、写一个函数，递归实现从1累加到n
2、写一个函数，递归实现数组求和 function(arr){ }
3、手写一下数组去重
4、两数之和
5、给你一个数字，比如123，变成321，比如100，变成001但是要给0删掉
27期程森面试遇到的问题：
1 面试官问你：大学都学了哪些专业啊？ 建议这么回答回答：c语言，数据结构，数据库，linux等等，因为前端现在比较火，自己对前端交互非常感兴趣，对js也非常热爱，所以就自学了一些前端知识
2面试官问你:那你英语怎么样啊，4级过了没啊？ 如果没过，建议这么回答：老师我四级没过，但是在学前端的过程中，自己一直在背单词，代码报错了我也一直积极的去翻译错误，积累解决问题的方法
3程森说自己vue用得多，element UI用的多，面试官问你，原生html用过么，在什么情况下用过？这个问题主要是考察你，是不是只会用elementui，自己有没有画过页面。 这么回答：elementui是一套帮我们封装好的ui组件库，如果ui设计师给我的样式，elementui无法满足，当然我自己也需要去手动画一些样式，封装一些组件，肯定要用到原生html
4面试官说 eacharts你用过么？用了哪些功能？ 这么回答：echart是一款基于canvas的制图插件，我用他来制作过折线图，柱状图，地图，等可视化面板。 面试又问：怎么做样式的穿透啊？回答：echart配置项 options里面有专门的属性来修改style样式
5面试官说 你们项目有架构师吗？回答：有，我们前端架构师主要去进行技术的选型，项目的搭建，ui组件库的封装，模块的划分，路由的配置，网络请求axios的配置 等等，架构师我们的组长也会对我们提交的代码进行审核，审核后再合并入主分支
6 面试官问：你们做过大屏的适配么？ 这么回答：做过，但是当时搭建不是我自己搭建的，我们大屏的话主要是用rem布局实现的，然后在用echart渲染的时候，单位用的都是%和rem
7面试官问:vue2全家桶你都用过哪些功能啊？他们是解决什么问题的啊？ 这么回答：我用过vuerouter，他主要是用来实现单页面应用，根据路径可以切换不同的组建，还可以用路由守卫进行判断拦截；vuex，用来做数据的集中处理，把公共的信息在前端做存储，组件之间的通信；elementui，一套ui组件库，主要是用来快速生成页面，提升开发效率
8面试官问你：请求有没有做过封装啊？程森回答请求拦截器和响应拦截器，面试官说，他们干了什么啊？ 请求拦截器我们可以配置一些请求头，响应拦截器我们对响应做统一处理，做一些弹框提示，退出登录
9 面试官问：你这个导入怎么做的？前端做的后端做的？（如果前端做，前端解析，用插件解析出来一个数组，当作参数传给后端）（如果后端做，把整个excel文件传给后端，后端自己解析，放进数据库）
10面试官问：封装了哪些组件啊？
弹幕组件：
1我们设置一个div容器，宽是100%，高度自己设置。我给容器分为三个部分，top，center，bottom。
2 每个弹幕其实是我自己利用createelement方法生成的span标签，他们的定位设置成absolute，他的高度是随机的。写了一个getposition的方法 ,参数可以传('top') bottom center 根据位置，去设置弹幕的top属性，left属性默认设置为0px。
3 我给每个span标签，加上一个类barrage，然后通过类去添加animation动画效果，持续时间是自定义的，比如3s。
4 我生成弹幕标签，并且通过append方法添加到容器中去，同时需要开启一个定时器，定时器的时间和动画的时间要保持一致，时间到了，利用remove方法去销毁这个弹幕。
