您好,登錄后才能下訂單哦!
這篇文章主要介紹“高頻率Vue面試題及答案有哪些”,在日常操作中,相信很多人在高頻率Vue面試題及答案有哪些問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”高頻率Vue面試題及答案有哪些”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!
是TCP連接時服務器和客戶端的相互發(fā)送報文,是為了確認雙方接受、接受能力是否正常,指定自己的初始化序列號,為后面的可靠性傳遞做準備。
剛開始客戶端處于Closed(關閉)狀態(tài),服務器處于Listen(監(jiān)聽)狀態(tài)。
第一次:客戶端給服務器發(fā)送一個SYN報文(建立連接),并指明客戶端的初始化序列號ISN,此時客戶端處于SYN-END(請求連接)狀態(tài),首部的同步位SYN=1,初始序列號seq=x,SYN的報文不能攜帶數(shù)據(jù),但是會消耗一個序列號。
第二次:服務器收到后會返回一個SYN報文,指定自己的初始化序列號ISN,同時會把客戶端的ISN+1做為自己的ACK(確認字符)值,表示已經(jīng)收到,此時處于SYN_RCVD(表示已接受到,半列隊)狀態(tài)。在確認報文段中SYN=1,ACK=1,確認號ack=x+1,seq=y。
第三次:客戶端收到SYN報文后,會發(fā)送ACK報文,將服務器的ISN+1作為ACK的值,此時客戶端處于ESTABLISHED(已連接)狀態(tài)。在確認報文中ACK=1,ack=y+1,seq=x+1,ACK報文可以攜帶數(shù)據(jù)了,不攜帶不消耗序列號。
為什么要三次?
是要確定發(fā)送、接收發(fā)送、發(fā)送接收是否可靠。
是由TCP半關閉造成的,就是結束塔的發(fā)送后還能接受來自另一端數(shù)據(jù)的能力。剛開始都處于ESTANLISHED狀態(tài)。
如果是客戶端發(fā)送:
第一次:發(fā)送FIN報文,報文中會指定序列號,客戶端處于FIN_WAIT1(終止等待1)狀態(tài)。
第二次:服務器收到后發(fā)送ACK報文,接受得序列號+1作為ACK的值,處于CLOSE_WAIT(半關閉)狀態(tài)。
第三次:服務器收到后發(fā)送FIN報文,指定序列號處于LAST_ACK(最后確認)狀態(tài),
第四次:客戶端收到后發(fā)送ACK報文進入TIME_WAIT狀態(tài),等一會進入CLOSED(關閉連接)狀態(tài),客戶端收到關閉連接。
在socket編程中,任何一方執(zhí)行close()操作就可以產(chǎn)生揮手操作。
是一個為Vue設計的狀態(tài)管理庫,以利用Vue.js的細粒數(shù)據(jù)響應機制進行高效的狀態(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',//設置代理 target :'http://10.10.29.26:8882', //代理的接口域名以及端口號 ws:true,//支持ws協(xié)議,websocket的縮寫, changeOrigin: true,// 是否跨域, pathRewrite:{ //路徑替換 '^/api':'' } }
是異步編程的一種解決方案,是一個容器,存放著未來結束的事件結果,語法上說是對象,可以獲取異步消息。
三個狀態(tài):padding(等待)、fulfiled(成功)、reject(失敗)
三個方法:.then(resolve成功、reject失?。?/p>
.catch(獲取異常信息)
.funally()都會執(zhí)行
解決異步無法返回值,new時自身同步,調(diào)用方法的時候異步。
彈性布局由父容器、子容器構成,通常設置主軸和交叉軸來控制子元素的排序方式。
定義子元素的排列方向:
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:每個項兩側間隔相等
交叉軸對齊:
align-items:flex-start|flex-end|center|baseline|staretch //flex-start:交叉軸的起點對齊 //flex-end:交叉軸的終點對齊 //center:交叉軸的中點對齊 //baseline:項目的第一行文字的基線對齊 //stretch:默認值,如果項未設置高度或設為auto,將沾滿整個容器的高度
多根軸線對齊:
align-content:flex-start|flex-end|center|space-between|space-around|strctch //flex-start:與交叉軸的起點對齊 //flex-end:與交叉軸的終點對齊 //center:與交叉軸的中點對齊 //space-between:與交叉軸兩端對齊,軸線之間的間隔平均分布 //space-around:每根軸線兩側的間隔相等 //stretch:默認值 ,軸線沾滿整個交叉軸
基本數(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)存中儲存的存儲地址。
淺拷貝:僅僅是復制了引用,彼此之間的操作相互影響。Array==》slice和concat方法
深拷貝:在堆中重新分配內(nèi)存,不同地址,相同的值,互不影響,復制實例。
JSON.parse();把JSON字符串反序列化為一個js對象
JSON.stringify();把js對象序列化為一個JSON字符串
遞歸:對屬性中所有的應用類型的值進行遍歷,知道是基本類型為止
懶加載也叫延遲加載,指在頁面中延遲加載頁面內(nèi)容,能夠提升用戶體驗、減少無效的資源加載、防止并發(fā)加載的資源過多會阻塞js的加載。
圖片懶加載:將地址儲存在自定義屬性上,當頁面滾動時內(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ù)懶加載:將地址儲存在自定義屬性上,當頁面滾動時內(nèi)容馬上要在視口內(nèi)數(shù)據(jù)賦值。
1、scrollHeight//指元素的總高度 2、scrollTop//當滾動條滾動時,向下拖動滾動條,內(nèi)容想上滾動的距離。 3、clientHeight//元素可視區(qū)的大小,指的是元素內(nèi)容及其邊框所占的空間大小------可視區(qū)域的大小 通過 1-2-3==0? 判斷滾動條是否到達底部
路由懶加載:
通過import()實現(xiàn)
將路由對應的組件加載成一個個對應的js包,再路由被訪問時才將對應的組件加載。
原理:將路由組件改寫成一部組件,只有當函數(shù)被調(diào)用的時候采取加載對應的組件內(nèi)容。
全局前置守衛(wèi):路由即將改變前,一般項目中進行判斷是否登錄、是否有路由權限。。。。
reouter.beforeEach((to,from,next)=>{...}) //to=========到哪個頁面去 //from=========從哪個頁面來 //next==========={回調(diào)函數(shù),如果是false,終端導航,如果瀏覽器URL改變,地址蛔蟲知道from路由對 //應的地址,如果next是路徑,會中斷當前導航去新的導航,可以傳任意位置的對象, //允許設置選項 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來訪問,再確認導航的時候執(zhí)行回調(diào),把組件實例做為回調(diào)方法的參數(shù) beforeRouteUpdate((to,from,next)=>{...}) //當前路由發(fā)生改變,但是組件被復用時調(diào)用。 beforeRouteLeave((to,from,next)=>{...}) //離開當前路由頁面時調(diào)用
路由獨享守衛(wèi):是再路由配置頁面單獨給路由配置一個守衛(wèi)。
export default new VueRouter({routes:[ { path:'/', name:'xxx', component:'Xxx', beforeEnter:(to,from,next)=>{...} }]})
真實DOM渲染順序:
1、解析HTML構建DOM樹,并請求css/image/js
2、CSS文件下載完成,開始構建css樹
3、構建完成后和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é)點所對應的真實節(jié)點。
使用虛擬DOM損耗計算:總損耗 = 虛擬DOM增刪改 + 真實DOM差異增刪改 + 排版與重繪
使用真實DOM 損耗計算:總損 = 真實DOM完全增刪改+(可能多個節(jié)點)排版重繪
原理:新舊虛擬DOM只會再同級對比,是深度優(yōu)先算法,在patchVnode發(fā)生。
對比流程:數(shù)據(jù)改變觸發(fā)setter,通過Dep.netify去通知所有訂閱者,訂閱者會調(diào)用patch方法(對比當前同層的虛擬節(jié)點是否為同一類型標簽),給真實DOM更新相應試圖。
總結:
1、diff算法是虛擬DOM技術的必然產(chǎn)物:通過新舊虛擬DOM做對比,將變化的地方更新 在真實DOM上,另外也需要diff高效率執(zhí)行對比過程,從而降低時間復雜度O(n)---通過updateChildern()高效執(zhí)行。
2、Vue2中為了降低watcher粒度,每個組織只有一個watcher與之對應,這樣才能精確找到發(fā)生變化的地方。
3、vue中的diff執(zhí)行的時候是組件實例執(zhí)行更新函數(shù)時,它會對比上一次渲染結果oldVnde和新的渲染結果,此過程稱為patch。
4、diff過程整體遵循深度優(yōu)先,同層級比較策略,會從頭部節(jié)點開始對比嘗試,如果沒有找到相同節(jié)點才會遍歷查找,查找結束再處理剩下的節(jié)點,借助key可以精確找到相同節(jié)點,因此patch非常高效。
1、Vue3中webpack被隱藏,vue.config.js需要自己創(chuàng)建。
2、setup函數(shù)時Vue3的屬性和方法的入口,它可以接受兩個參數(shù):props:接收父組件傳值,context:上下文,有三個使用參數(shù):attrs、emits、slots,他必須有返回值,async可以省略。
3、響應式原理區(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,會導致他們共用一個data,造成實例之間的數(shù)據(jù)污染。
Vue根實例全局只有一個。
官網(wǎng)上寫了定義和特點:vue是一個漸進式的javscript框架,易用,高效且靈活。
漸進式:根其他大型框架不同的是Vue被設計為可以自底向上逐層應用,核心只關注視圖圖層,不僅易于上手,還便于第三方庫的項目整合,vue完全能為復雜的單頁面應用提供驅(qū)動,核心就是一些聲明式渲染,組件系統(tǒng)只關注注釋圖層,可以作為庫再其他項目中取用,也能作為一個大型的框架去搭建項目,這就是漸進式。
web1.0的時代沒有前端概念,項目通常由多個單文件組成,每個文件都有HTML、CSS、JS或者java代碼,難以維護,于是便出現(xiàn)了MVC開發(fā)模式和框架。在MVC模式中前端只完成后端中的view層,前端頁面開發(fā)效率并不高、前后端職責不清晰。
web2.0時代,自從Ajax技術開始出現(xiàn),前后端職責分明,前端可以通過Ajax與后端進行整體數(shù)據(jù)交互,前端只需要開發(fā)頁面內(nèi)容,并且ajax技術可以實現(xiàn)部分刷新,減少服務器負載和流量消耗,比如 jQuery,但是缺乏可行的開發(fā)模式 承載更復雜的業(yè)務需求,頁面都擠在一起難以維護。
前后端分離的架構演變:MVC-->MVP-->MVVM
MVC:與后端的類似,Model負責應用數(shù)據(jù)保存,與后端數(shù)據(jù)同步,Contoller負責業(yè)務邏輯,View負責視圖。
理論上是可行,但是很不方便,然后演變成另一種結構的MVC,加入了User,
這樣的模式也會造成數(shù)據(jù)流混亂的問題
MVP:與MVC很接近,P指的是中間人,它負責view和model之間的數(shù)據(jù)流,防止直接交互,但是這樣view變成了被動試圖,而且本身變得很小,但是應用變得很大,導致P體積增大,難以維護。
MVVM: Angular早就把MVVM模式帶入前端,跳過了MVP。核心是中間VM層,ViewModel通過數(shù)據(jù)響應式機制自動響應Model中的數(shù)據(jù)變化,同時VM會實現(xiàn)更新自動將數(shù)據(jù)轉化試圖更新,通過監(jiān)聽V中用戶交互更改M中的數(shù)據(jù),減少大量操作DOM代碼,兼顧開發(fā)效率和可維護性。
總結:
1、這三者都是框架模式,他們的目標都是為了解決Model和View的耦合問題。
2、MVC模式出現(xiàn)較早主要應用在后端,分層清晰但是數(shù)據(jù)流混亂。
3、MVP式MVC的進化,中間人負責MV通訊解決兩者耦合問題,但是會臃腫,可維護性不高。
4、 MVVM在前端廣泛應用,不僅解決MV耦合問題,還解決了維護兩者映射關系的大量代碼和DOM操作,提高了開發(fā)效率和可讀性,同時保持了優(yōu)越的性能表現(xiàn)。
1、路由懶加載
2、keep-alive緩存頁面
3、區(qū)分v-show、v-if使用場景
4、v-for遍歷避免同時使用v-if
5、vue組件銷毀時會自動解綁他的全部指令和時間監(jiān)聽,僅限組件本身事件
6、圖片懶加載、數(shù)據(jù)懶加載
7、按需導入
到此,關于“高頻率Vue面試題及答案有哪些”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續(xù)學習更多相關知識,請繼續(xù)關注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。