什么是三次握手？

是TCP連接時(shí)服務(wù)器和客戶端的相互發(fā)送報(bào)文，是為了確認(rèn)雙方接受、接受能力是否正常，指定自己的初始化序列號(hào)，為后面的可靠性傳遞做準(zhǔn)備。

剛開(kāi)始客戶端處于Closed（關(guān)閉）狀態(tài)，服務(wù)器處于Listen（監(jiān)聽(tīng)）狀態(tài)。

第一次：客戶端給服務(wù)器發(fā)送一個(gè)SYN報(bào)文（建立連接），并指明客戶端的初始化序列號(hào)ISN，此時(shí)客戶端處于SYN-END（請(qǐng)求連接）狀態(tài)，首部的同步位SYN=1，初始序列號(hào)seq=x，SYN的報(bào)文不能攜帶數(shù)據(jù)，但是會(huì)消耗一個(gè)序列號(hào)。

第二次：服務(wù)器收到后會(huì)返回一個(gè)SYN報(bào)文，指定自己的初始化序列號(hào)ISN，同時(shí)會(huì)把客戶端的ISN+1做為自己的ACK（確認(rèn)字符）值，表示已經(jīng)收到，此時(shí)處于SYN_RCVD（表示已接受到，半列隊(duì)）狀態(tài)。在確認(rèn)報(bào)文段中SYN=1，ACK=1，確認(rèn)號(hào)ack=x+1，seq=y。

第三次：客戶端收到SYN報(bào)文后，會(huì)發(fā)送ACK報(bào)文，將服務(wù)器的ISN+1作為ACK的值，此時(shí)客戶端處于ESTABLISHED（已連接）狀態(tài)。在確認(rèn)報(bào)文中ACK=1，ack=y+1，seq=x+1，ACK報(bào)文可以攜帶數(shù)據(jù)了，不攜帶不消耗序列號(hào)。

為什么要三次？

是要確定發(fā)送、接收發(fā)送、發(fā)送接收是否可靠。

什么是四次揮手？（close觸發(fā)）

是由TCP半關(guān)閉造成的，就是結(jié)束塔的發(fā)送后還能接受來(lái)自另一端數(shù)據(jù)的能力。剛開(kāi)始都處于ESTANLISHED狀態(tài)。

如果是客戶端發(fā)送：

第一次：發(fā)送FIN報(bào)文，報(bào)文中會(huì)指定序列號(hào)，客戶端處于FIN_WAIT1（終止等待1）狀態(tài)。

第二次：服務(wù)器收到后發(fā)送ACK報(bào)文，接受得序列號(hào)+1作為ACK的值，處于CLOSE_WAIT（半關(guān)閉）狀態(tài)。

第三次：服務(wù)器收到后發(fā)送FIN報(bào)文，指定序列號(hào)處于LAST_ACK（最后確認(rèn)）狀態(tài)，

第四次：客戶端收到后發(fā)送ACK報(bào)文進(jìn)入TIME_WAIT狀態(tài)，等一會(huì)進(jìn)入CLOSED（關(guān)閉連接）狀態(tài)，客戶端收到關(guān)閉連接。

在socket編程中，任何一方執(zhí)行close()操作就可以產(chǎn)生揮手操作。

什么是VUEX？

是一個(gè)為Vue設(shè)計(jì)的狀態(tài)管理庫(kù)，以利用Vue.js的細(xì)粒數(shù)據(jù)響應(yīng)機(jī)制進(jìn)行高效的狀態(tài)更新。

        state：存放公用數(shù)據(jù)/狀態(tài)的地方；

        getter:類似于vue中的計(jì)算屬性。

        mutation:修改state的地方，$store.commit([xxx,'name'])

        actions:是mutation的上一級(jí)，提交到mutation執(zhí)行，可調(diào)用異步方法。                                            $store.dispach([xxx,'name'])

什么是同源----跨域？

同源：是一種約定，DOM同源/XMLHTTP同源，要求域名、端口號(hào)、協(xié)議相同。

CROE解決跨域，croe的書(shū)寫(xiě)方法和axios一樣，通常不需要進(jìn)行修改，常用。

Jsonp：是一種利用動(dòng)態(tài) 創(chuàng)建script利用src進(jìn)行跨域，雖然無(wú)兼容性問(wèn)題，但是只能get請(qǐng)求，從別的域加載執(zhí)行可能會(huì)攜帶惡意代碼，不易確定失敗。

Nginx反向代理：在vue.confing中proxy

'/api':{
    target :'https://www.easy-mock.com',//設(shè)置代理
    target :'http://10.10.29.26:8882', //代理的接口域名以及端口號(hào)
    ws:true,//支持ws協(xié)議,websocket的縮寫(xiě)，
    changeOrigin: true,// 是否跨域,
    pathRewrite:{ //路徑替換
        '^/api':''
    }
}

什么是Promise？

是異步編程的一種解決方案，是一個(gè)容器，存放著未來(lái)結(jié)束的事件結(jié)果，語(yǔ)法上說(shuō)是對(duì)象，可以獲取異步消息。

三個(gè)狀態(tài)：padding（等待）、fulfiled（成功）、reject（失?。?/p>

三個(gè)方法：.then(resolve成功、reject失?。?/p>

                  .catch(獲取異常信息）

                  .funally()都會(huì)執(zhí)行

解決異步無(wú)法返回值，new時(shí)自身同步，調(diào)用方法的時(shí)候異步。

什么是fexl布局？

彈性布局由父容器、子容器構(gòu)成，通常設(shè)置主軸和交叉軸來(lái)控制子元素的排序方式。

定義子元素的排列方向：

felx-direction:row|row-reverse|column|column-reverse
    //row :默認(rèn)值，主軸水平方向 左往右對(duì)齊??
    //row-reverse:主軸水方向 右往左對(duì)齊??
    //column:主軸垂直方向 上往下對(duì)齊??
    //column-reverse:主軸垂直方向 下往上對(duì)齊??

軸線屬性：

flex-warp:nowrap|warp|warp-reverse
    //nowarp:(默認(rèn))不換行
    //warp:換行，在第一行上方
    //warp-reverse:換行，在第一行下方

主軸對(duì)齊：

justify-content:flex-start|felx-end|center|space-between|space-around
    //flex-start:(默認(rèn)值)左對(duì)齊
    //flex-end:右對(duì)齊
    //center:居中
    //space-between:兩端對(duì)齊，間隔相等
    //space-around:每個(gè)項(xiàng)兩側(cè)間隔相等

交叉軸對(duì)齊：

align-items:flex-start|flex-end|center|baseline|staretch
    //flex-start:交叉軸的起點(diǎn)對(duì)齊
    //flex-end:交叉軸的終點(diǎn)對(duì)齊
    //center:交叉軸的中點(diǎn)對(duì)齊
    //baseline:項(xiàng)目的第一行文字的基線對(duì)齊
    //stretch:默認(rèn)值，如果項(xiàng)未設(shè)置高度或設(shè)為auto，將沾滿整個(gè)容器的高度

多根軸線對(duì)齊：

align-content:flex-start|flex-end|center|space-between|space-around|strctch
    //flex-start:與交叉軸的起點(diǎn)對(duì)齊
    //flex-end:與交叉軸的終點(diǎn)對(duì)齊
    //center:與交叉軸的中點(diǎn)對(duì)齊
    //space-between:與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布
    //space-around:每根軸線兩側(cè)的間隔相等
    //stretch:默認(rèn)值 ，軸線沾滿整個(gè)交叉軸

數(shù)據(jù)類型

基本數(shù)據(jù)類型：undefined、null、Boolean、String、Number、Symbol等等類型在內(nèi)存中占據(jù)固定大小，保存在內(nèi)存棧中。

引用數(shù)據(jù)類型：Object、Array、Date、Function、RegExp等等。引用數(shù)據(jù)類型的值是對(duì)象，保存在堆內(nèi)存中。

在內(nèi)存棧存儲(chǔ)的是對(duì)象的變量標(biāo)識(shí)符一級(jí)對(duì)象在堆內(nèi)存中儲(chǔ)存的存儲(chǔ)地址。

什么是深淺拷貝？

淺拷貝：僅僅是復(fù)制了引用，彼此之間的操作相互影響。Array==》slice和concat方法

深拷貝：在堆中重新分配內(nèi)存，不同地址，相同的值，互不影響，復(fù)制實(shí)例。

JSON.parse();把JSON字符串反序列化為一個(gè)js對(duì)象

JSON.stringify()；把js對(duì)象序列化為一個(gè)JSON字符串

遞歸：對(duì)屬性中所有的應(yīng)用類型的值進(jìn)行遍歷，知道是基本類型為止

什么是懶加載？

懶加載也叫延遲加載，指在頁(yè)面中延遲加載頁(yè)面內(nèi)容，能夠提升用戶體驗(yàn)、減少無(wú)效的資源加載、防止并發(fā)加載的資源過(guò)多會(huì)阻塞js的加載。

圖片懶加載：將地址儲(chǔ)存在自定義屬性上，當(dāng)頁(yè)面滾動(dòng)時(shí)內(nèi)容馬上要在視口內(nèi)呈現(xiàn)將地址賦值給src。

1、document.documentElement.clientHeight//獲取屏幕可視窗口高度
2、element.offsetTop//獲取元素相對(duì)文檔頂部的距離
3、document.doceumentElement.scroliTop//獲取瀏覽器窗口頂部與文檔頂部之間的距離，也就是滾動(dòng)條的距離
可以通過(guò)這個(gè)三個(gè)方法判斷 3-2<1 ,從而判斷元素是否在可視范圍內(nèi)。

數(shù)據(jù)懶加載：將地址儲(chǔ)存在自定義屬性上，當(dāng)頁(yè)面滾動(dòng)時(shí)內(nèi)容馬上要在視口內(nèi)數(shù)據(jù)賦值。

1、scrollHeight//指元素的總高度
2、scrollTop//當(dāng)滾動(dòng)條滾動(dòng)時(shí)，向下拖動(dòng)滾動(dòng)條，內(nèi)容想上滾動(dòng)的距離。
3、clientHeight//元素可視區(qū)的大小，指的是元素內(nèi)容及其邊框所占的空間大小------可視區(qū)域的大小
通過(guò) 1-2-3==0？ 判斷滾動(dòng)條是否到達(dá)底部 

路由懶加載：

        通過(guò)import()實(shí)現(xiàn)

        將路由對(duì)應(yīng)的組件加載成一個(gè)個(gè)對(duì)應(yīng)的js包，再路由被訪問(wèn)時(shí)才將對(duì)應(yīng)的組件加載。

        原理：將路由組件改寫(xiě)成一部組件，只有當(dāng)函數(shù)被調(diào)用的時(shí)候采取加載對(duì)應(yīng)的組件內(nèi)容。

什么是守衛(wèi)？

        全局前置守衛(wèi)：路由即將改變前，一般項(xiàng)目中進(jìn)行判斷是否登錄、是否有路由權(quán)限。。。。

reouter.beforeEach((to,from,next)=>{...})
//to=========到哪個(gè)頁(yè)面去
//from=========從哪個(gè)頁(yè)面來(lái)
//next==========={回調(diào)函數(shù),如果是false，終端導(dǎo)航，如果瀏覽器URL改變，地址蛔蟲(chóng)知道from路由對(duì)
//應(yīng)的地址，如果next是路徑，會(huì)中斷當(dāng)前導(dǎo)航去新的導(dǎo)航，可以傳任意位置的對(duì)象，
//允許設(shè)置選項(xiàng) replace：true，name：'home'以及任何再router-link的to/prop/router.push}

        全局后置守衛(wèi)：reouter.afterEach(同上)

        組件路由守衛(wèi)：是寫(xiě)在每個(gè)單獨(dú)的Vue文件里面的路由守衛(wèi)

beforeRouteEnter(to,from,next)=>{...})
//在進(jìn)入路由之前調(diào)用，組件實(shí)例還沒(méi)有被渲染，無(wú)法獲取this實(shí)例，可以通過(guò)傳
//一個(gè)回調(diào)給next來(lái)訪問(wèn)，再確認(rèn)導(dǎo)航的時(shí)候執(zhí)行回調(diào)，把組件實(shí)例做為回調(diào)方法的參數(shù)
 
beforeRouteUpdate((to,from,next)=>{...})
//當(dāng)前路由發(fā)生改變，但是組件被復(fù)用時(shí)調(diào)用。
 
beforeRouteLeave((to,from,next)=>{...})
//離開(kāi)當(dāng)前路由頁(yè)面時(shí)調(diào)用

        路由獨(dú)享守衛(wèi)：是再路由配置頁(yè)面單獨(dú)給路由配置一個(gè)守衛(wèi)。

export default new VueRouter({routes:[
    {
        path:'/',
        name:'xxx',
        component:'Xxx',
        beforeEnter:(to,from,next)=>{...}
    }]})

DOM

        真實(shí)DOM渲染順序：

        1、解析HTML構(gòu)建DOM樹(shù)，并請(qǐng)求css/image/js

        2、CSS文件下載完成，開(kāi)始構(gòu)建css樹(shù)

        3、構(gòu)建完成后和DOM 一起生成渲染樹(shù)

        4、布局

        5、顯示

        虛擬DOM就是一個(gè)用來(lái)表示真實(shí)DOM的對(duì)象，最終會(huì)映射到真是環(huán)境上，并且它的不依賴真實(shí)平臺(tái)的能力。 頁(yè)面的更新可以先完全反映在虛擬DOM上，操作內(nèi)存中的js對(duì)象塊，將最終的js對(duì)象映射成真實(shí)DOM，交給瀏覽器去繪制，減少對(duì)真實(shí)DOM的操作。

所以說(shuō)虛擬DOM算法(虛擬DOM+diff算法)操作真實(shí)DOM性能高于直接操作真實(shí)DOM。

Diff算法（并非Vue專用但凡涉及到虛擬DOM都有）

        能精確比較新舊虛擬DOM中的key變化，提高更新效率。

        是一種對(duì)比算法，對(duì)比兩者誰(shuí)是新舊虛擬DOM，對(duì)比哪個(gè)虛擬節(jié)點(diǎn)改變，并只更新這個(gè)虛擬節(jié)點(diǎn)所對(duì)應(yīng)的真實(shí)節(jié)點(diǎn)。

        使用虛擬DOM損耗計(jì)算：總損耗 = 虛擬DOM增刪改 + 真實(shí)DOM差異增刪改 + 排版與重繪

        使用真實(shí)DOM 損耗計(jì)算：總損 = 真實(shí)DOM完全增刪改+（可能多個(gè)節(jié)點(diǎn)）排版重繪

原理：新舊虛擬DOM只會(huì)再同級(jí)對(duì)比，是深度優(yōu)先算法，在patchVnode發(fā)生。

對(duì)比流程：數(shù)據(jù)改變觸發(fā)setter，通過(guò)Dep.netify去通知所有訂閱者，訂閱者會(huì)調(diào)用patch方法（對(duì)比當(dāng)前同層的虛擬節(jié)點(diǎn)是否為同一類型標(biāo)簽），給真實(shí)DOM更新相應(yīng)試圖。

總結(jié)：

1、diff算法是虛擬DOM技術(shù)的必然產(chǎn)物：通過(guò)新舊虛擬DOM做對(duì)比，將變化的地方更新  在真實(shí)DOM上，另外也需要diff高效率執(zhí)行對(duì)比過(guò)程，從而降低時(shí)間復(fù)雜度O（n）---通過(guò)updateChildern()高效執(zhí)行。

2、Vue2中為了降低watcher粒度，每個(gè)組織只有一個(gè)watcher與之對(duì)應(yīng)，這樣才能精確找到發(fā)生變化的地方。

3、vue中的diff執(zhí)行的時(shí)候是組件實(shí)例執(zhí)行更新函數(shù)時(shí)，它會(huì)對(duì)比上一次渲染結(jié)果oldVnde和新的渲染結(jié)果，此過(guò)程稱為patch。

4、diff過(guò)程整體遵循深度優(yōu)先，同層級(jí)比較策略，會(huì)從頭部節(jié)點(diǎn)開(kāi)始對(duì)比嘗試，如果沒(méi)有找到相同節(jié)點(diǎn)才會(huì)遍歷查找，查找結(jié)束再處理剩下的節(jié)點(diǎn)，借助key可以精確找到相同節(jié)點(diǎn)，因此patch非常高效。

Vue2與Vue3的區(qū)別

        1、Vue3中webpack被隱藏，vue.config.js需要自己創(chuàng)建。

        2、setup函數(shù)時(shí)Vue3的屬性和方法的入口，它可以接受兩個(gè)參數(shù)：props：接收父組件傳值，context：上下文，有三個(gè)使用參數(shù)：attrs、emits、slots，他必須有返回值，async可以省略。

        3、響應(yīng)式原理區(qū)別：

        Vue2中使用Object.defineProperty，進(jìn)行數(shù)據(jù)劫持，用obsever進(jìn)行遞歸監(jiān)聽(tīng)，但是如果監(jiān)聽(tīng)的數(shù)組，對(duì)于數(shù)組的刪除、新增屬性、通過(guò)下標(biāo)修改不會(huì)更新視圖，需要調(diào)用 set/delete/splice方法。

        Vue3中用的時(shí)Proxy(原型對(duì)象、原型方法)方法，用proxy代理對(duì)象，而不是某個(gè)屬性。

4、v-fi和v-for的比較：

        Vue2: v-for優(yōu)先于v-if，每次渲染都先執(zhí)行循壞在執(zhí)行判斷，浪費(fèi)性能。

                在外層嵌套template，在這進(jìn)行判斷，再內(nèi)部循環(huán)。

        Vue3：v-if優(yōu)先于v-for

Vue中data為什么是函數(shù)？Vue根實(shí)例為什么沒(méi)有這個(gè)限制？

Vue是單頁(yè)面框架，可能會(huì)有很多組件實(shí)例，如果形象式定義data，會(huì)導(dǎo)致他們共用一個(gè)data，造成實(shí)例之間的數(shù)據(jù)污染。 

Vue根實(shí)例全局只有一個(gè)。

Vue設(shè)計(jì)原理

        官網(wǎng)上寫(xiě)了定義和特點(diǎn)：vue是一個(gè)漸進(jìn)式的javscript框架，易用，高效且靈活。

        漸進(jìn)式：根其他大型框架不同的是Vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用，核心只關(guān)注視圖圖層，不僅易于上手，還便于第三方庫(kù)的項(xiàng)目整合，vue完全能為復(fù)雜的單頁(yè)面應(yīng)用提供驅(qū)動(dòng)，核心就是一些聲明式渲染，組件系統(tǒng)只關(guān)注注釋圖層，可以作為庫(kù)再其他項(xiàng)目中取用，也能作為一個(gè)大型的框架去搭建項(xiàng)目，這就是漸進(jìn)式。

Web時(shí)代的演變        

web1.0的時(shí)代沒(méi)有前端概念，項(xiàng)目通常由多個(gè)單文件組成，每個(gè)文件都有HTML、CSS、JS或者java代碼，難以維護(hù)，于是便出現(xiàn)了MVC開(kāi)發(fā)模式和框架。在MVC模式中前端只完成后端中的view層，前端頁(yè)面開(kāi)發(fā)效率并不高、前后端職責(zé)不清晰。

web2.0時(shí)代，自從Ajax技術(shù)開(kāi)始出現(xiàn)，前后端職責(zé)分明，前端可以通過(guò)Ajax與后端進(jìn)行整體數(shù)據(jù)交互，前端只需要開(kāi)發(fā)頁(yè)面內(nèi)容，并且ajax技術(shù)可以實(shí)現(xiàn)部分刷新，減少服務(wù)器負(fù)載和流量消耗，比如 jQuery，但是缺乏可行的開(kāi)發(fā)模式 承載更復(fù)雜的業(yè)務(wù)需求，頁(yè)面都擠在一起難以維護(hù)。

前后端分離的架構(gòu)演變：MVC-->MVP-->MVVM

MVC：與后端的類似，Model負(fù)責(zé)應(yīng)用數(shù)據(jù)保存，與后端數(shù)據(jù)同步，Contoller負(fù)責(zé)業(yè)務(wù)邏輯，View負(fù)責(zé)視圖。

 理論上是可行，但是很不方便，然后演變成另一種結(jié)構(gòu)的MVC，加入了User，

這樣的模式也會(huì)造成數(shù)據(jù)流混亂的問(wèn)題

MVP：與MVC很接近，P指的是中間人，它負(fù)責(zé)view和model之間的數(shù)據(jù)流，防止直接交互，但是這樣view變成了被動(dòng)試圖，而且本身變得很小，但是應(yīng)用變得很大，導(dǎo)致P體積增大，難以維護(hù)。

MVVM： Angular早就把MVVM模式帶入前端，跳過(guò)了MVP。核心是中間VM層，ViewModel通過(guò)數(shù)據(jù)響應(yīng)式機(jī)制自動(dòng)響應(yīng)Model中的數(shù)據(jù)變化，同時(shí)VM會(huì)實(shí)現(xiàn)更新自動(dòng)將數(shù)據(jù)轉(zhuǎn)化試圖更新，通過(guò)監(jiān)聽(tīng)V中用戶交互更改M中的數(shù)據(jù)，減少大量操作DOM代碼，兼顧開(kāi)發(fā)效率和可維護(hù)性。

總結(jié)：

1、這三者都是框架模式，他們的目標(biāo)都是為了解決Model和View的耦合問(wèn)題。

2、MVC模式出現(xiàn)較早主要應(yīng)用在后端，分層清晰但是數(shù)據(jù)流混亂。

3、MVP式MVC的進(jìn)化，中間人負(fù)責(zé)MV通訊解決兩者耦合問(wèn)題，但是會(huì)臃腫，可維護(hù)性不高。

4、 MVVM在前端廣泛應(yīng)用，不僅解決MV耦合問(wèn)題，還解決了維護(hù)兩者映射關(guān)系的大量代碼和DOM操作，提高了開(kāi)發(fā)效率和可讀性，同時(shí)保持了優(yōu)越的性能表現(xiàn)。

Vue優(yōu)化性能方法

        1、路由懶加載

        2、keep-alive緩存頁(yè)面

        3、區(qū)分v-show、v-if使用場(chǎng)景

        4、v-for遍歷避免同時(shí)使用v-if

        5、vue組件銷毀時(shí)會(huì)自動(dòng)解綁他的全部指令和時(shí)間監(jiān)聽(tīng)，僅限組件本身事件

        6、圖片懶加載、數(shù)據(jù)懶加載

        7、按需導(dǎo)入

總結(jié)

到此這篇關(guān)于高頻率Vue面試題匯總以及答案的文章就介紹到這了,更多相關(guān)高頻率Vue面試題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！