什么是三次握手？

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

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

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

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

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

為什么要三次？

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

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

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

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

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

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

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

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

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

什么是VUEX？

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

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

        getter:類似于vue中的計算屬性。

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

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

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

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

CROE解決跨域，croe的書寫方法和axios一樣，通常不需要進行修改，常用。

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

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

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

什么是Promise？

是異步編程的一種解決方案，是一個容器，存放著未來結(jié)束的事件結(jié)果，語法上說是對象，可以獲取異步消息。

三個狀態(tài)：padding（等待）、fulfiled（成功）、reject（失敗）

三個方法：.then(resolve成功、reject失敗）

                  .catch(獲取異常信息）

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

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

什么是fexl布局？

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

定義子元素的排列方向：

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

軸線屬性：

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

主軸對齊：

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

交叉軸對齊：

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

多根軸線對齊：

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

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

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

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

在內(nèi)存棧存儲的是對象的變量標識符一級對象在堆內(nèi)存中儲存的存儲地址。

什么是深淺拷貝？

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

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

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

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

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

什么是懶加載？

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

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

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

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

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

路由懶加載：

        通過import()實現(xiàn)

        將路由對應(yīng)的組件加載成一個個對應(yīng)的js包，再路由被訪問時才將對應(yīng)的組件加載。

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

什么是守衛(wèi)？

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

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

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

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

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

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

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

DOM

        真實DOM渲染順序：

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

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

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

        4、布局

        5、顯示

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

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

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

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

        是一種對比算法，對比兩者誰是新舊虛擬DOM，對比哪個虛擬節(jié)點改變，并只更新這個虛擬節(jié)點所對應(yīng)的真實節(jié)點。

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

        使用真實DOM 損耗計算：總損 = 真實DOM完全增刪改+（可能多個節(jié)點）排版重繪

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

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

總結(jié)：

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

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

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

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

Vue2與Vue3的區(qū)別

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

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

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

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

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

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

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

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

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

Vue中data為什么是函數(shù)？Vue根實例為什么沒有這個限制？

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

Vue根實例全局只有一個。

Vue設(shè)計原理

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

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

Web時代的演變        

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

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

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

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

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

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

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

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

總結(jié)：

1、這三者都是框架模式，他們的目標都是為了解決Model和View的耦合問題。

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

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

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

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

        1、路由懶加載

        2、keep-alive緩存頁面

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

        4、v-for遍歷避免同時使用v-if

        5、vue組件銷毀時會自動解綁他的全部指令和時間監(jiān)聽，僅限組件本身事件

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

        7、按需導(dǎo)入

總結(jié)

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

最新評論