盒子模型
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的預(yù)編譯器用過哪些给郊，有什么特點串绩？
定義變量垃瞧、使用嵌套北滥、運算
三欄布局的五種方式
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的區(qū)別纹因？
https://www.bilibili.com/video/BV12G411p7BQ/?spm_id_from=333.337.search-card.all.click&vd_source=bb1c7fd921cf837ec97726bd611c96e1
數(shù)組有哪些方法勇哗？
如何給一個對象轉(zhuǎn)換成字符串壕曼？
我們可以用JSON.stringfy
如果給數(shù)組轉(zhuǎn)換成一個字符串?
我們可以用arr.toString()
我們可以用數(shù)組方法arr.join(),而且這兩個方法可以把多維數(shù)組轉(zhuǎn)換為字符串苏研，但是缺點是
缺點就是如果元素是對象的話，會出現(xiàn)[object,Object]
js如何合并兩個數(shù)組腮郊？合并兩個對象呢摹蘑？
合并數(shù)組:1 for循環(huán) 2concat 3 push.apply 4 es6
合并對象
webapi（事件監(jiān)聽，事件流轧飞，事件冒泡衅鹿，阻止冒泡，事件委托过咬，dom的增刪查）
https://www.bilibili.com/video/BV1Y84y1L7Nn?p=77&vd_source=bb1c7fd921cf837ec97726bd611c96e1
什么事件監(jiān)聽大渤？
讓程序檢測是否有事件產(chǎn)生，一旦有事件觸發(fā)掸绞，就立即調(diào)一個函數(shù)做出響應(yīng)
?什么是事件流泵三？
https://www.bilibili.com/video/BV1m7411L7YW/?spm_id_from=333.337.search-card.all.click&vd_source=bb1c7fd921cf837ec97726bd611c96e1
事件流 分為捕獲階段和冒泡階段.
捕獲階段：當(dāng)我點擊一個元素，事件不會立即觸發(fā)衔掸，而是從頂部document一層一層向目標(biāo)元素流動烫幕，我們把這個階段叫做捕獲。
冒泡階段：當(dāng)事件觸發(fā)后敞映，事件會以冒泡的形式一層層向上傳播较曼，我們把這個過程叫做冒泡
我們綁定事件可以利用addEventListenrt,第三個參數(shù)默認是false，表示事件在冒泡階段觸發(fā)振愿，true表示在捕獲階段觸發(fā)
什么叫事件委托捷犹？
我們可以利用事件冒泡來事件委托,如果我想給多個子元素綁定相同的事件，我不需要每一個都綁定埃疫，直接在父元素上綁定事件伏恐，然后子元素通過冒泡去觸發(fā)父元素的事件
事件循環(huán)
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
數(shù)組解構(gòu)：
let [a,b,c] = [1,2,3]
對象解構(gòu)：{a,b,c} = {}
剩余參數(shù) ...args
擴展運算符(用來給數(shù)組或者對象轉(zhuǎn)為用逗號分割的參數(shù)列表，可以用來進行合并數(shù)組栓霜，偽數(shù)組變成數(shù)組翠桦，合并對象)
? 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
防抖節(jié)流底層實現(xiàn)
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
復(fù)雜版：
https://www.bilibili.com/video/BV1gX4y187pL/?spm_id_from=333.337.search-card.all.click&vd_source=bb1c7fd921cf837ec97726bd611c96e1
** 瀏覽器輸入一個url按enter到底發(fā)生了什么（u rl地址解析澎蛛，dns解析和預(yù)獲取，tcp三次握手四次揮手蜕窿，dom回流重繪）**
call谋逻，bind，apply的區(qū)別
https://www.bilibili.com/video/BV1Y84y1L7Nn?p=193&vd_source=bb1c7fd921cf837ec97726bd611c96e1
http請求方式的區(qū)別
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
談?wù)勀銓ι芷诘睦斫?/b>
1為什么要用到生命周期鉤子函數(shù)：
比如我一個組件桐经，進去就需要開啟一個定時器毁兆，或者需要在調(diào)接口請求數(shù)據(jù)，可以利用到生命周期鉤子函數(shù)阴挣。生命周期鉤子函數(shù)會在一個關(guān)鍵性的時刻進行調(diào)用气堕，vue會自動幫我們調(diào)用。而且生命周期鉤子函數(shù)里面的this畔咧，vue已經(jīng)幫我們維護好了茎芭，就是組件的實例。
beforecreate:無法訪問data里面的數(shù)據(jù)和methods方法
created：可以放訪問data里面的數(shù)據(jù)和methods方法誓沸，而且vue已經(jīng)實現(xiàn)了對data里面數(shù)據(jù)的響應(yīng)式攔截
vue開始解析模版梅桩，生成虛擬dom
beforemounted：這個時候頁面呈現(xiàn)的是未經(jīng)vue編譯過的dom結(jié)構(gòu)
vue把虛擬dom轉(zhuǎn)換為真實的dom插入頁面
mounted：這個時候頁面中的dom是vue經(jīng)過編譯以后的dom結(jié)構(gòu)，至此蔽介，我們可以去開啟定時器摘投，ajax請求，綁定自定義事件虹蓄，至此犀呼，vue的整個初始化的過程就完成了。
當(dāng)我們修改data里面數(shù)據(jù)的時候薇组，會觸發(fā)兩個鉤子函數(shù)beforeupdated和updated
beforeupdated：? 數(shù)據(jù)是新的外臂，但是頁面是舊的。
會 根據(jù)新的數(shù)據(jù)生成新的虛擬dom律胀，然后去跟舊的虛擬dom進行對比宋光，更新dom
updated：數(shù)據(jù)是新的，頁面也是新的炭菌，頁面和數(shù)據(jù)保持同步
beforedestroyed：
destroyed：
談?wù)勀銓vvm的理解：
https://www.bilibili.com/video/BV1iw411d7h6?p=10&vd_source=bb1c7fd921cf837ec97726bd611c96e1
m的意思是model罪佳，模型的意思，對應(yīng)的是data里面的數(shù)據(jù)
v的意識view黑低，視圖的意思赘艳，對應(yīng)的就是我們的頁面
vm酌毡，viewmodel對應(yīng)的就是我們的vue實例
mvvm就是當(dāng)我data里面的數(shù)據(jù)改變，頁面會隨之改變蕾管。當(dāng)我修改頁面里面的數(shù)據(jù)枷踏，data里面的數(shù)據(jù)也會被改變
vue的響應(yīng)式原理
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('數(shù)組變化啦，我去渲染試圖啦')?
? ? ? ? },
? ? ? ? pop(){
? ? ? ? },
? ? ? ? shift(){
? ? ? ? },
? ? ? ? unshift(){
? ? ? ? },
? ? ? ? sort(){
? ? ? ? }
? ? }
}
Observe(vm.data)
首先要搞清楚defineProperty的用法
利用Observe方法返回一個實例掰曾，對data里面的數(shù)據(jù)進行劫持, 把這個實例掛載到vm對象上的_data上旭蠕。當(dāng)我修改observe實例的屬性的時候，會觸發(fā)set方法旷坦，修改data里面的數(shù)據(jù)的同時掏熬，去進行頁面的重新渲染
檢測數(shù)組變化：
當(dāng)面試官問我vue如何檢測數(shù)組的變化，我首先回答塞蹭，在vue2里面孽江，我們直接通過下標(biāo)來修改數(shù)組里面的元素，頁面是不會變化的番电，如果想讓頁面變化，我們需要使用push,pop,unshift,shift,splice,sort,reverse.
那是因為辆琅，vue重寫了數(shù)組的方法漱办，
vue路由傳參
query傳參通過url地址問號后面拼接傳參，參數(shù)用query傳和地址用path或name傳
params傳餐需要在配置路由的時候提前設(shè)置好占位符婉烟，地址用path或name傳和參數(shù)用params傳（用to的對象形式跳轉(zhuǎn)娩井，地址必須用name）
v-if和v-show的區(qū)別
v-if隱藏元素，頁面會直接移除這個dom元素似袁；v-show隱藏元素洞辣，頁面會利用樣式display:none去隱藏這個元素，不會暴力的去動我們的dom樹
如果我們需要頻繁的切換一個元素的顯示與隱藏昙衅，那么我們建議用v-show扬霜，因為v-show的話，這個節(jié)點是存在的而涉，性能較高著瓶。
談?wù)勀銓eep-alive的理解:
keep-alive是vue自帶的一個組件，可以用來對別的組件進行緩存啼县，被緩存的組件會多出兩個鉤子函數(shù)材原，一個叫activated,一個叫deactivated。
keep-alive應(yīng)用場景：從列表頁面季眷，進入詳情頁余蟹，返回列表頁再次進入同一個詳情頁，我不想再去調(diào)用接口請求數(shù)據(jù)子刮，我可以利用keep-alive把頁面緩存起來威酒。如果進入不同的詳情頁，我可以在鉤子函數(shù)activated里面根據(jù)id進行判斷，如果id和上一次不相同兼搏，我就再次調(diào)接口請求卵慰。
v-for中key的作用與原理（先給學(xué)生演示一下，然后視頻從第十分鐘開始放）
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有什么區(qū)別歉井？
vue2是選項式api，vue3組合式api
vue3生命周期也可以寫成組合式api的形式
vue2里面用mixin混入(多個組件存在重復(fù)代碼)绑莺，vue3采用了自定義hooks
vue2響應(yīng)式原理defineproperty暖眼，vue3響應(yīng)式proxy
vue3中的響應(yīng)式原理？
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(監(jiān)視的回調(diào)中用到哪個屬性欺缘，就監(jiān)視哪個屬性栋豫，有點類似computed)?
?toRef?
toRefs（將響應(yīng)式數(shù)據(jù)中的某個屬性單獨交給外部使用）
shallowReactive(只給第一層數(shù)據(jù)添加響應(yīng)式)
?shallowRef(給基本類型添加響應(yīng)式，對于對象類型的替換也有響應(yīng)式谚殊，但是對象內(nèi)部屬性的修改丧鸯，沒有響應(yīng)式)?
?readonly(給我一個響應(yīng)式數(shù)據(jù)，我給他變成只讀的)
shallowreadonly(響應(yīng)式數(shù)據(jù)的第一層 是只讀的)
provide/inject（祖孫組件嫩絮，跨級組件之間的通信）
vue3里面父組件怎么調(diào)用子組件按灾？
vue3的生命周期鉤子函數(shù)有哪些剿干？
vue3里面沒有breforedestroyed和destroyed了蜂怎，改成了beforeunmount和unmount
vue3里面可以按照vue2的方式去書寫生命周期鉤子函數(shù)，
當(dāng)然vue3也提供了組合式api的生命周期鉤子函數(shù):
beforemount--->onbeforemount
mounted-->onMounted
beforeupdate-->onBeforeUpdate
updated-->onUpdated
beforeUnmount-->onbeforeUnmount
unmounted--onunmounted
筆試題：
1怨愤、寫一個函數(shù)派敷，遞歸實現(xiàn)從1累加到n
2、寫一個函數(shù)撰洗，遞歸實現(xiàn)數(shù)組求和 function(arr){ }
3篮愉、手寫一下數(shù)組去重
4、兩數(shù)之和
5差导、給你一個數(shù)字试躏，比如123，變成321设褐，比如100颠蕴，變成001但是要給0刪掉
27期程森面試遇到的問題：
1 面試官問你：大學(xué)都學(xué)了哪些專業(yè)捌病？ 建議這么回答回答：c語言犀被，數(shù)據(jù)結(jié)構(gòu)椅您，數(shù)據(jù)庫，linux等等寡键，因為前端現(xiàn)在比較火掀泳，自己對前端交互非常感興趣，對js也非常熱愛西轩，所以就自學(xué)了一些前端知識
2面試官問你:那你英語怎么樣啊员舵，4級過了沒啊藕畔？ 如果沒過马僻，建議這么回答：老師我四級沒過，但是在學(xué)前端的過程中注服，自己一直在背單詞韭邓，代碼報錯了我也一直積極的去翻譯錯誤，積累解決問題的方法
3程森說自己vue用得多溶弟，element UI用的多仍秤，面試官問你，原生html用過么可很，在什么情況下用過？這個問題主要是考察你凰浮，是不是只會用elementui我抠，自己有沒有畫過頁面。 這么回答：elementui是一套幫我們封裝好的ui組件庫袜茧，如果ui設(shè)計師給我的樣式菜拓，elementui無法滿足，當(dāng)然我自己也需要去手動畫一些樣式笛厦，封裝一些組件纳鼎，肯定要用到原生html
4面試官說 eacharts你用過么？用了哪些功能裳凸？ 這么回答：echart是一款基于canvas的制圖插件贱鄙，我用他來制作過折線圖，柱狀圖姨谷，地圖逗宁，等可視化面板。 面試又問：怎么做樣式的穿透懊蜗妗瞎颗？回答：echart配置項 options里面有專門的屬性來修改style樣式
5面試官說 你們項目有架構(gòu)師嗎件甥？回答：有，我們前端架構(gòu)師主要去進行技術(shù)的選型哼拔，項目的搭建引有，ui組件庫的封裝，模塊的劃分倦逐，路由的配置譬正，網(wǎng)絡(luò)請求axios的配置 等等，架構(gòu)師我們的組長也會對我們提交的代碼進行審核僻孝，審核后再合并入主分支
6 面試官問：你們做過大屏的適配么导帝？ 這么回答：做過，但是當(dāng)時搭建不是我自己搭建的穿铆，我們大屏的話主要是用rem布局實現(xiàn)的您单，然后在用echart渲染的時候，單位用的都是%和rem
7面試官問:vue2全家桶你都用過哪些功能败癯虐秦？他們是解決什么問題的啊凤优？ 這么回答：我用過vuerouter悦陋，他主要是用來實現(xiàn)單頁面應(yīng)用，根據(jù)路徑可以切換不同的組建筑辨，還可以用路由守衛(wèi)進行判斷攔截俺驶；vuex，用來做數(shù)據(jù)的集中處理棍辕，把公共的信息在前端做存儲暮现，組件之間的通信；elementui楚昭，一套ui組件庫栖袋，主要是用來快速生成頁面，提升開發(fā)效率
8面試官問你：請求有沒有做過封裝案塘幅？程森回答請求攔截器和響應(yīng)攔截器，面試官說尿贫，他們干了什么暗缦薄？ 請求攔截器我們可以配置一些請求頭帅霜，響應(yīng)攔截器我們對響應(yīng)做統(tǒng)一處理匆背，做一些彈框提示，退出登錄
9 面試官問：你這個導(dǎo)入怎么做的身冀？前端做的后端做的钝尸？（如果前端做括享，前端解析，用插件解析出來一個數(shù)組珍促，當(dāng)作參數(shù)傳給后端）（如果后端做铃辖，把整個excel文件傳給后端，后端自己解析猪叙，放進數(shù)據(jù)庫）
10面試官問：封裝了哪些組件敖空丁？
彈幕組件：
1我們設(shè)置一個div容器穴翩，寬是100%犬第，高度自己設(shè)置。我給容器分為三個部分芒帕，top歉嗓，center，bottom背蟆。
?2 每個彈幕其實是我自己利用createelement方法生成的span標(biāo)簽鉴分，他們的定位設(shè)置成absolute，他的高度是隨機的带膀。寫了一個getposition的方法 ,參數(shù)可以傳('top') bottom center 根據(jù)位置志珍，去設(shè)置彈幕的top屬性，left屬性默認設(shè)置為0px垛叨。
3 我給每個span標(biāo)簽伦糯，加上一個類barrage，然后通過類去添加animation動畫效果嗽元，持續(xù)時間是自定義的舔株，比如3s。
4 我生成彈幕標(biāo)簽还棱，并且通過append方法添加到容器中去，同時需要開啟一個定時器惭等，定時器的時間和動畫的時間要保持一致珍手，時間到了，利用remove方法去銷毀這個彈幕辞做。
