2020前端面試總結

Vue是什麼:是一套用於構建用戶界面的漸進式框架

Vue的核心是什麼:數據驅動/組件化

for in 和 for of 的區別

for…in 循環:只能獲得對象的鍵名,不能獲得鍵值
for…of 循環:允許遍歷獲得鍵值

什麼是時候用Vue.nextTick()
vue實現響應式並不是數據發生變化後dom立即變化,而是按照一定的策略來進行dom更新。

$nextTick 是在下次 DOM 更新循環結束之後執行延遲迴調,在修改數據之後使用 $nextTick,則可以在回調中獲取更新後的 DOM

mvvm的理解
簡單的說,ViewModel就是View(視圖)與Model(處理業務邏輯)的連接器,View與Model通過ViewModel實現雙向綁定。

Vuex是什麼
答:狀態管理工具,俗稱數據倉庫

Vuex有什麼
State:要操作的數據
Getter:從倉庫中往外面取東西
Mutation 同步往倉庫中操作數據
this.$store.commit(傳遞參數)
Action異步往倉庫操作數據
Modules 理解爲倉庫中的一個一個小房間(即可分類管理)

vue組件交互行爲,調用dispath方法觸發action相關處理,若頁面狀態需要改變,則調用commit方法提交mutation修改state,通過getters獲取到state新值,重新渲染vue components

vuex中獲取的數據使用v-model綁定會出問題,不能直接對vuex裏面的數據進行更改,需要使用set方法,向vuex直接提交新值

Vuex能做什麼
答:做數據共享和傳遞(不同頁面之間的數據傳遞)
單一狀態樹管理,讓數據的修改脈絡更加清晰,便於定位問題,模塊化

vuex的優缺點
優點
解決了非父子組件的消息傳遞(將數據存放在state中)
減少了AJAX請求次數,有些情景可以直接從內存中的state獲取
缺點
刷新瀏覽器,vuex中的state會重新變爲初始狀態

ajax的底層原理

ajax利用XMLHttpRequest的異步請求完成,通過open設置相關的請求信息,綁定onreadyStateChange事件,根據服務器返回狀態的不同來做不同的處理

同步和異步

同步:按照任務的順序執行任務,前一個任務沒有執行結束,下一個任務不會執行,要等待上一個任務執行結束
異步:是同一時間內可以做多件事

axios中的攔截

axios.interceptors.request.use 請求攔截
axios.interceptors.reponse.use 響應攔截

promiss

promiss的狀態:pending,resolve,rejected,狀態不受外界影響,一旦改變就不會再變,主要用來異步操作
缺點:1.一旦建立就會立即執行中途無法取消
2.如果不設置回調函數promiss內部拋出錯誤,不會反應到外部

事件循環機制

當任務進入執行棧區分同步還是異步,同步會進入主線程,異步會進入event table註冊函數,當指定的事件完成時,event table會將函數移入event quene,當棧中的代碼執行完畢,執行棧中的任務爲空時,就會讀取任務隊列(Event quene)中的事件,去執行相應的回調,如此循環,形成js的事件循環機制

宏任務和微任務

宏任務就是每次執行棧執行的代碼就是一個宏任務(包括每次從事件隊列中獲取一個事件回調並放到執行棧中執行),每一個宏任務(task)會從頭到尾講這個任務執行完畢,不會執行其他,瀏覽器爲了能夠使得js內部task與DOM任務能夠有序的進行,會在下一個task執行結束後,在下一個task執行開始前,對頁面重新渲染

微任務:理解在當前宏任務(task)執行結束後立即執行的任務
也就是說,在當前task任務後,下一個task之前,在渲染之前

Vue雙向數據綁定原理
答:Vue.js是採用數據劫持結合發佈者-訂閱者模式的方式,通過object.defineProperty()來劫持各個屬性的setter,getter,在數據變動時發佈消息給訂閱者,觸發相應的監聽回調

Sass有什麼優點
答:可以使用變量 簡單的邏輯處理 函數等
缺點:文件體積和複雜度不可控,調試難度增加

定義組件的時候data爲什麼是函數而不是對象
答:因爲對象是引用類型,組件可能會被多個實例同時引用。如果data值爲對象,將導致多個實例共享一個對象,其中一個組件改變data屬性值,其它實例也會受到影響

Vue和jquery的區別是什麼?哪些場景適合?
答:一個model+view+viewModel框架,數據模型model,viewModel連接兩個
區別:vue數據驅動,通過數據來顯示視圖層而不是節點操作。
場景:數據操作比較多的場景,更加便捷

active-class是哪個組件的屬性?
答:vue-router模塊的router-link組件

keep-alive的作用是什麼,會觸發那些生命週期
答:對組件進行緩存,觸發activated deactivated

v-on可以監聽多個方法嗎 v-on的修飾符
可以,.stop阻止時間冒泡 .prevent阻止當前時間默認行爲 .once綁定對的事件只會觸發一次 .self當事件是從事件綁定的元素本身觸發時才觸發回調

v-for中key的作用
key的作用主要是爲了高效的更新虛擬DOM

什麼是RESTful API?怎麼使用?
答:是一個api的標準,無狀態請求。請求的路由地址是固定的,如果是tp5則先路由配置中把資源路由配置好。標準有:.post .put .delete

生命週期常用場景
beforecreate : 可以在這加個loading事件,在加載實例時觸發, 記錄進入時間
created : 初始化完成時的事件寫在這裏,如在這結束loading事件,發送網絡請求
mounted : 掛載元素,獲取到DOM節點
updated : 如果對數據統一處理,在這裏寫上相應函數
beforeDestroy : 離開頁面之前,銷燬定時器 記錄結束時間(統計用戶停留的時間)
nextTick : 更新數據後立即操作dom

導航鉤子
全局鉤子:router.BeforeEach(to,from,next)
組件內的鉤子:beforeRouteEnter(to,from,next) Update Leave
獨享路由的鉤子:beforeEnter(to,from,next)

組件傳值
父子傳值:Props
子父傳值:emitjsemit() 兄弟傳值:通過一個公共的js,emit() $on()
父孫傳值:provide (函數) inject(對象)

箭頭函數和普通函數的區別
箭頭函數是匿名函數,不能作爲構造函數,不能使用new
箭頭函數沒有原型屬性
箭頭函數不綁定arguments,取而代之用rest參數…解決
箭頭函數不綁定this,會捕獲其所在的上下文的this值,作爲自己的this值

閉包 閉包的優缺點
閉包就是內部函數可以訪問到外部函數裏的參數和變量
this的指向問題
內存泄露
引用的變量可能發生變化

原型鏈

在訪問對象的屬性和方法時,會在當前對象中查找,如果沒有找到,會一直沿着原型鏈上–proto–上查找,直到找到object.protopyte(原型的頂端)爲止,這就是原型鏈
什麼是Http協議
對客戶端和服務器端之間數據傳輸的格式規範格式簡稱爲“超文本傳輸協議”。

http協議由什麼組成

請求報文包括三部分:
(1).請求行:包含請求方法,URI,HTTP版本協議
(2).請求首部字段
(3).請求內容實體
響應報文包含三部分:
(1).狀態行:包含HTTP版本,狀態碼,狀態碼原因短語
(2).響應首部字段
(3).響應內容實體

前後端分離的好處

js可以做很大部分的數據處理工作,對服務器的壓力減小到最小
後臺錯誤不會直接反映到前臺
前後端職責不清

微信登錄的簡單流程

1.通過wx.login()獲取登錄憑證code
2.通過button組件的open-type=“getUserInfo”, 獲取用戶信息
3.將獲取到的登錄憑證和用戶信息傳遞到自己的服務器
4.在自己的服務器上將登錄憑證發送到微信的服務器上換取openid和session_key
5.利用用戶提交的信息在自己的服務器上註冊用戶賬號(等等…)
6.將註冊之後的信息返回給微信小程序
7.將註冊信息保存起來以便以後使用

小程序的雙向綁定和vue哪裏不一樣

小程序直接this.data的屬性是不可以同步到視圖的,必須調用:this.setData({nobind:true})

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章