核心提示[點擊打開視頻講解面試技巧+面試全過程]一、HTML1、語義話的目的是什么？語義化的主要目的可以概括為用正確的標簽做正確的事HTMl語義化可以讓頁面的內容結構化，以便于瀏覽器解析和搜索引擎解析，并且提高了代碼的可讀性便于代碼維護，2、HTM [點擊打開視頻講解面試技巧+面試全過程]一、HTML1、語義話的目的是什么？語義化的主要目的可以概括為用正確的標簽做正確的事HTMl語義化可以讓頁面的內容結構化，以便于瀏覽器解析和搜索引擎解析，并且提高了代碼的可讀性便于代碼維護，2、HTML5新增元素Canvas繪圖以及SVG繪圖。拖放API語義化標簽音頻、視頻API地理定位本地離線存儲,長期存儲數據，關閉瀏覽器后不丟失。會話儲存,數據在關閉瀏覽器后自動刪除。表單控件3、cookie與sessionStorage和localStorage的區別保存方式cookie存放在客戶的瀏覽器上。session都在客戶端中保存，不參與服務器通訊。生命周期cookie可設置失效時間localStorage除非手動清除否則永久保存sessionStorage關閉當前頁面或瀏覽器后失效存儲的大小cookie 4kb左右session 5M易用性cookie需自己封裝session可以接受原生接口因為cookie每次請求都會攜帶在http請求中,所以它的主要用來識別用戶登錄,localStorage可以用來跨頁面傳參,sessionStorage可以用來保留一些臨時數據。[點擊打開視頻講解更加詳細][點擊打開文章詳解]二、CSS1、CSS有哪些基本的選擇器，執行先后順序？id選擇器 => #myId {}類選擇器 => .myClass {}標簽選擇器 => p,h1 {}后代選擇器 => p h1 {}子選擇器 => p>h1 {}兄弟選擇器 => ul~h1 {}相鄰兄弟選擇器 => ul+h1 {}屬性選擇器 => li[name=’sss’] {}偽類選擇器 => h1:hover {}偽元素選擇器 => h1::before{}通配符選擇器* => * {}!important>內聯樣式>ID選擇器>類選擇器>標簽選擇器>通配符選擇器2、垂直水平居中方式有哪些？[CSS 中幾種最常用的水平垂直居中的方法]3、常用布局方式有哪些？什么是盒模型？[點擊打開視頻詳解][點擊打開文章詳解]4、常用的塊元素與行內元素有哪些？有什么特征塊元素：p、h1~h6、ul、li、table、p、br、form。特征：獨占一行，換行顯示，可以設置寬高，可以嵌套塊和行行內元素：span、a、img、textarea、select、option、input。特征：只有在行內顯示，內容撐開寬、高，不可以設置寬、高。5、清除浮動父級p定義overflow:hidden給浮動元素父級增加標簽偽元素清除浮動：給浮動元素父級增加 .clearfix::after6、CSS3新特征圓角陰影文字特效線性漸變變換更多的CSS選擇器更多背景設置色彩模式偽元素媒體查詢多欄布局圖片邊框7、CSS中有哪些長度單位？絕對長度單位：px百分比: %相對父元素字體大小單位: em相對于根元素字體大小的單位: rem相對于視口*寬度的百分比: vw相對于視口*高度的百分比: vh8、px、em、rem的區別[點擊打開文章詳解]9、display:none和visibility:hidden的區別display:none：隱藏元素，在文檔布局中不在給它分配空間，會引起回流visibility:hidden: 隱藏元素，但是在文檔布局中仍保留原來的空間，不會引起回流10、用CSS 實現三角形[點擊打開視頻講解][點擊打開文章講解]11、偽類和偽元素的區別[點擊打開文章講解]12、什么是重繪，重排？如何解決？重繪某個dom節點的顏色，背景顏色變了，字體大小，只影響自己，不影響其他元素。注意：table及其內部元素可能需要多次計算才能確定好其在渲染樹中節點的屬性，比同等元素要多花兩倍時間，這就是我們盡量避免使用table布局頁面的原因之一。重排某個dom節點的寬高，布局，隱藏等發生改變，不僅自身發生了改變，而且其他元素也會受到影響隨之發生改變。每個頁面最少一次回流，就是頁面第一次加載的時候。觸發重排的原因頁面初始化渲染添加或刪除可見的DOM元素元素尺寸的改變——大小，外邊距；邊框瀏覽器窗口尺寸的變化填充內容的改變，比如文本的改變或圖片大小改變而引起的計算值寬度和高度的改變讀取某些元素屬性：[點擊打開文章詳解]3、原型與原型鏈[點擊打開視頻講解更加詳細][點擊打開文章詳解]4、JS基本數據類型[點擊打開視頻講解更加詳細][點擊打開文章詳解]5、export和export default的區別[點擊打開文章詳解]6、箭頭函數和普通函數的區別- 語法更加簡潔、清晰，=>- 箭頭函數是匿名函數，不能作為構造函數，不能使用new- 箭頭函數不能使用arguments，而用reat參數…解決- 箭頭函數沒有自己的this,會捕獲其所在的上下文的this值,并且不能通過call和apply來改變其this- 箭頭函數沒有原型7、GET和POST的區別[點擊打開文章詳解]8、forEach和map的區別[點擊打開視頻講解更加詳細] 和 .map的使用及區別是什么？_嗶哩嗶哩_bilibili)[點擊打開文章詳解] 和 .map的使用及區別是什么？)9、對象的繼承常見的：原型鏈繼承借用構造函數繼承原型鏈+借用構造函數的組合繼承ES6中class 的繼承10、簡述一下你理解的面向對象面向對象是基于萬物皆對象這個哲學觀點. 把一個對象抽象成類，具體上就是把一個對象的靜態特征和動態特征抽象成屬性和方法，也就是把一類事物的算法和數據結構封裝在一個類之中,程序就是多個對象和互相之間的通信組成的。面向對象具有封裝性,繼承性,多態性。封裝：隱蔽了對象內部不需要暴露的細節,使得內部細節的變動跟外界脫離,只依靠接口進行通信.封裝性降低了編程的復雜性。繼承：使得新建一個類變得容易,一個類從派生類那里獲得其非私有的方法和公用屬性的繁瑣工作交給了編譯器。多態：繼承和實現接口和運行時的類型綁定機制所產生的多態，使得不同的類所產生的對象能夠對相同的消息作出不同的反應,極大地提高了代碼的通用性.。11、 == 和 ===的區別[點擊打開文章詳解]12、數組有哪些方法？[點擊打開文章詳解]13、 數組去重[點擊打開文章詳解]14、JS中new操作符有什么用？- 創建臨時對象，并將this指向臨時對象- 將構造函數的原型屬性和方法掛載到新對象的__proto__上- return 臨時對象15、JS獲取HTML DOM元素的方法- 通過ID獲取- 通過name屬性- 通過標簽名- 通過類名- 獲取html的方法- 獲取body的方法- 通過選擇器獲取一個元素- 通過選擇器獲取一組元素16、事件捕獲和事件冒泡- 事件捕獲和事件冒泡主要解決了頁面事件流的問題。頁面的事件流經過了三個階段，分別是事件捕獲、目標階段和事件冒泡階段。- 事件捕獲是由外向內；而事件冒泡則是由內向外。- event.stopPropagation 可以阻止事件流的進一步傳播。- 采用事件代理的方式，能夠節省內存消耗，對于動態改變子元素的時候，也非常有利，避免了很多麻煩的步驟，比如重新綁定事件。17、虛擬dom定義： 虛擬DOM就是普通的js對象。用來描述真實dom結構的js對象，因為它不是真實的dom，所以才叫做虛擬dom。作用： 虛擬dom可以很好地跟蹤當前dom狀態，因為它會根據當前數據生成一個描述當前dom結構的虛擬dom，然后數據發生變化時，有生成一個新的虛擬dom，而兩個虛擬dom恰好保存了變化前后的狀態。然后通過diff算法，計算出當前兩個虛擬dom之間的差異，得出一個更好的替換方案。18、排序方式冒泡排序：比較所有相鄰元素,如果第一個比第二個大，則交換它們。選擇排序：找到數組中的最小值，選中它并將其放置在第一位。插入排序：從第二個數開始往前比，比它大就往后排。歸并排序：把數組劈成兩半，再遞歸地對數組進行“分”操作，直到分成一個個單獨的數。快速排序：從數組中任意選擇一個基準，所有比基準小的元素放到基準前面，比基準大的元素放到基準的后面。19、數組操作方法會改變原數組會改變：push，pop,shift,unshift ,splice,sort,reverse。不變：concat,split,slice。js中substr、substring、slice、splice、split的區別與作用[點擊打開文章詳解]20、JS有幾種方法判斷變量的類型？typeof：判斷基本數據類型，對于引用數據類型除了function返回’function‘，其余全部返回’object’。instanceof：區分引用數據類型，檢測方法是檢測的類型在當前實例的原型鏈上，用其檢測出來的結果都是true，不太適合用于簡單數據類型的檢測，檢測過程繁瑣且對于簡單數據類型中的undefined, null, symbol檢測不出來。constructor：檢測引用數據類型，檢測方法是獲取實例的構造函數判斷和某個類是否相同，如果相同就說明該數據是符合那個數據類型的，這種方法不會把原型鏈上的其他類也加入進來，避免了原型鏈的干擾。Object.prototype.toString.call：適用于所有類型的判斷檢測，檢測方法是Object.prototype.toString.call 返回的是該數據類型的字符串。instanceof的實現原理：驗證當前類的原型prototype是否會出現在實例的原型鏈__proto__上，只要在它的原型鏈上，則結果都為true。因此，instanceof 在查找的過程中會遍歷左邊變量的原型鏈，直到找到右邊變量的 prototype，找到返回true，未找到返回false。Object.prototype.toString.call原理：Object.prototype.toString 表示一個返回對象類型的字符串，call方法可以改變this的指向，那么把Object.prototype.toString方法指向不同的數據類型上面，返回不同的結果21、null和undefined的區別？null和undefined 區別為：undefined是表示變量聲明過但并未賦過值，它是所有未賦值變量默認值；null表示一個變量將來可能指向一個對象，一般用于主動釋放指向對象的引用。、null與undefined的異同點是什么呢？共同點： 都是原始類型，保存在棧中變量本地不同點：undefined——表示變量聲明過但并未賦過值。它是所有未賦值變量默認值。例如：var a; //a自動被賦值為undefinednull——表示一個變量將來可能指向一個對象。一般用于主動釋放指向對象的引用。2、何時使用null 當使用完一個比較大的對象時，需要對其進行釋放內存時，設置為null3、定義undefined：是所有沒有賦值變量的默認值，自動賦值null：主動釋放一個變量引用的對象，表示一個變量不再指向任何對象地址22、什么是跨域？及跨域解決方法[點擊打開視頻講解更加詳細][點擊打開文章詳解]23、防抖和節流的使用及區別[點擊打開視頻講解更加詳細][點擊打開文章詳解]24、棧內存和堆內存的區別與原理[點擊打開視頻講解更加詳細][點擊打開文章詳解]25、深拷貝和淺拷貝的區別和與原理[點擊打開視頻講解更加詳細][點擊打開文章詳解]四、ES6新特性新增塊級作用域let定義變量和const定義常量變量的解構賦值模板字符串 默認參數箭頭函數擴展運算符模塊類PromiseProxySymbol[點擊賓果即時打開視頻講解更加詳細][點擊打開文章詳解]Promise含義： 異步編程的一種解決方案，用來解決回調地獄。三種狀態： pending、fulfilled和rejected resolved函數作用： 將Promise對象的狀態從“未完成”變為“成功”。reject函數的作用： 將Promise對象的狀態從“未完成”變為“失敗”。Promise實例生成以后，可以用then方法分別指定resolved狀態和rejected狀態的回調函數。then: Promise 實例添加狀態改變時的回調函數。可以接受兩個回調函數作為參數。第一個回調函數是Promise對象的狀態變為resolved時調用，第二個回調函數是Promise對象的狀態變為rejected時調用。缺點： 無法取消Promise，一旦新建它就會立即執行，無法中途取消。如果不設置回調函數，Promise內部拋出的錯誤，不會反應到外部。五、計算機網絡知識1、HTTP與HTTPSHTTP：客戶端與服務器之間數據傳輸的格式規范，表示“超文本傳輸協議”。HTTPS：在HTTP與TCP之間添加的安全協議層。默認端口號：HTTP：80，HTTPS：443。傳輸方式：http是明文傳輸，https則是具有安全性的ssl加密傳輸協議。連接方式：http的是無狀態的；HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網絡協議，比http協議安全。2、TCP與UDP的區別TCP面向連接;UDP是無連接的，即發送數據之前不需要建立連接。TCP面向字節流，實際上是TCP把數據看成一連串無結構的字節流;UDP是面向報文的每一條TCP連接只能是點到點的;UDP支持一對一，一對多，多對一和多對多的交互通信TCP首部開銷20字節;UDP的首部開銷小，只有8個字節。TCP提供可靠的服務。UDP適用于一次只傳少量數據、對可靠要求不高的環境。3、HTTP常見的狀態碼1開頭的狀態碼100，接受的請求正在處理，信息類狀態碼2開頭的狀態碼2xx表示成功處理了請求的狀態碼200服務器已成功處理了請求。3開頭的狀態碼3xx表示要完成請求，需要進一步操作。通常這些狀態代碼用來重定向。301，永久性重定向，表示資源已被分配了新的 URL302，臨時性重定向，表示資源臨時被分配了新的 URL303，表示資源存在另一個URL，用GET方法獲取資源304，自從上次請求后，請求網頁未修改過。服務器返回此響應時，不會返回網頁內容4開頭的狀態碼4xx這些狀態碼表示請求可能出錯，妨礙了服務器的處理400服務器不理解請求的語法401表示發送的請求需要有通過HTTP認證的認證信息403服務器拒絕請求404服務器找不到請求網頁5開頭的狀態碼5xx這些狀態碼表示服務器在嘗試處理請求時發生內部錯誤。這些錯誤可能是服務器本身的錯誤，而不是請求的錯誤500，服務器遇到錯誤，無法完成請求503，表示服務器處于停機維護或超負載，無法處理請求4、瀏覽器從輸入url到頁面加載發生了什么1、瀏覽器的地址欄輸入URL并按下回車。2、瀏覽器查找當前URL是否存在緩存，并比較緩存是否過期。3、DNS解析URL對應的IP。4、根據IP建立TCP連接。5、HTTP發起請求。6、服務器處理請求，瀏覽器接收HTTP響應。7、渲染頁面，構建DOM樹。8、關閉TCP連接。5、HTTP 傳輸過程含義：從建立連接到斷開連接一共七個步驟，就是三次招手四次揮手TCP 建立連接瀏覽器發送請求命令瀏覽器發送請求頭服務器應答服務器回應信息服務器發送數據斷開TCP連接6、瀏覽器如何渲染頁面的？瀏覽器解析html源碼，將HTML轉換成dom樹，將CSS樣式轉換成stylesheet，瀏覽器會將CSS規則樹附著在DOM樹上，并結合兩者生成渲染樹生成布局，瀏覽器通過解析計算出每一個渲染樹節點的位置和大小，在屏幕上畫出渲染樹的所有節點合成繪制生成頁面。7、性能優化減少http請求次數減少DNS查找避免重定向使用Ajax緩存少用全局變量、減少DOM操作的使用優化圖片大小，通過CSS Sprites優化圖片，將css放在頂部，將js放在底部8、webpack是怎么打包的，babel又是什么Webpack：把所有依賴打包成一個 bundle.js文件，通過代碼分割成單元片段并按需加載。Webpack是以公共JS的形式來書寫腳本的，但對AMD/CMD的支持也很全面，方便舊項目進行代碼遷移。把項目當做一個整體，通過一個給定的主文件，Webpack將從這個文件開始找到項目的所有依賴文件，使用loaders處理它們，最后打包為一個瀏覽器可識別的Javascript文件。babel將es6、es7、es8等語法轉換成瀏覽器可識別的es5或es3語法。9、git 和 svn的區別SVN是集中式版本控制系統，版本庫是集中放在中央服務器的，首先要從中央服務器哪里得到最新的版本，干完活后，需要把自己做完的活推送到中央服務器。集中式版本控制系統是必須聯網才能工作Git是分布式版本控制系統，沒有中央服務器的，每個人的電腦就是一個完整的版本庫，這樣，工作的時候就不需要聯網了，因為版本都是在自己的電腦上。自己在電腦上改了文件A，其他人也在電腦上改了文件A，這時，只需把各自的修改推送給對方，就可以互相看到對方的修改了。10、webSocketwebSocket： 可以讓服務器主動向客戶端發送消息，適合開發聊天室，多人游戲等協作應用。WebSocket協議是基于TCP的一種新的網絡協議。在 WebSocket API 中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，并進行雙向數據傳輸。11、require和import區別- 調用時間require運行時調用，理論上可以運用在代碼任何地，甚至不需要賦值給某個變量之后再使用。lmport是編譯時候調用，必須放在文件開頭，而且使用格式也是確定的。- 遵循規范require 是 AMD規范引入方式import是es6的一個語法標準，如果要兼容瀏覽器的話必須轉化成es5的語法- 本質require是賦值過程，其實require 的結果就是對象、數字、字符串、函數等，再把require的結果賦值給某個變量。import是解構過程。通過require 引入基礎數據類型時，屬于復制該變量。通過require 引入復雜數據類型時，數據淺拷貝該對象。出現模塊之間的循環引用時,會輸出已經執行的模塊,而未執行的模塊不輸出。// CommonJS 的寫法const moduleA = require;const func1 = moduleA.func1;const func2 = moduleA.func2;// ES6 的寫法import { func1, func2 } from ‘moduleA’;使用export取代module.exports。// commonJS 的寫法var React = require;var Breadcrumbs = React.crea12月20日teClass { return ; }});module.exports = Breadcrumbs;// ES6 的寫法import React from ‘react’;class Breadcrumbs extends React.Component { render { return ; }};export default Breadcrumbs;12、事件循環原因：Javascript是單線程，所有任務需要排隊，前一個任務結束，才會執行后一個任務。所有任務可以分成兩種，一種是同步任務，另一種是異步任務。同步任務：在主線程上排隊執行的任務，只有前一個任務執行完畢，才能執行后一個任務；異步任務：不進入主線程、而進入”任務隊列”的任務，只有”任務隊列”通知主線程，某個異步任務可以執行了，該任務才會進入主線程執行。同步和異步任務分別進入不同的執行環境， 先執行同步任務，把異步任務放入循環隊列當中掛起，等待同步任務執行完，再執行隊列中的異步任務。異步任務先執行微觀任務，再執行宏觀任務。一直這樣循環，反復執行。微任務：Promise.then、catch、finally、async/await。宏任務：整體代碼 script、UI 渲染、setTimeout、setInterval、Dom事件、ajax事件。宏任務、微任務是怎么執行的？執行順序：先執行同步代碼，遇到異步宏任務則將異步宏任務放入宏任務隊列中，遇到異步微任務則將異步微任務放入微任務隊列中，當所有同步代碼執行完畢后，再將異步微任務從隊列中調入主線程執行，微任務執行完畢后再將異步宏任務從隊列中調入主線程執行，一直循環直至所有任務執行完畢。13、什么是單頁面應用一個系統只加載一次資源，之后的操作交互、數據交互是通過路由、ajax來進行，頁面并沒有刷新。在一個頁面上集成多種功能，甚至整個系統就只有一個頁面，所有的業務功能都是它的子模塊，通過特定的方式掛接到主界面上。優點：- 前后端分離- 良好的交互體驗——用戶不用刷新頁面，頁面顯示流暢- 減輕服務器壓力——服務器只出數據- 共用一套后端代碼——多個客戶端可共用一套后端代碼- 加載速度快,內容的改變不需要重新加載整個頁面,對服務器壓力小缺點：- SEO難度高——數據渲染在前端進行- 頁面初次加載比較慢,頁面復雜提高很多多頁面： 一個應用多個頁面,頁面跳轉時整個頁面都刷新,每次都請求一個新的頁面有點:SEO效果好缺點： 頁面切換慢,每次切換頁面需要選擇性的重新加載公共資源14、什么叫優雅降級和漸進增強？**漸進增強：** 一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，然后再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。**優雅降級：** 一開始就構建站點的完整功能，然后針對瀏覽器測試和修復。在傳統軟件開發中，經常會提到向上兼容和向下兼容的概念。漸進增強相當于向上兼容，而優雅降級相當于向下兼容。向下兼容指的是高版本支持低版本的或者說后期開發的版本支持和兼容早期開發的版本，向上兼容的很少。大多數軟件都是向下兼容的。二者區別：1、優雅降級和漸進增強只是看待同種事物的兩種觀點。2、優雅降級觀點認為應該針對那些最高級、最完善的瀏覽器來設計網站。3、漸進增強觀點則認為應關注于內容本身。六、VUE1、MVC和MVVM的理解M:model，V：view，C：controller，VM：MVC:單向通信。必須通過controller來承上啟下。MVVM：數據雙向綁定，數據改變視圖，視圖改變數據。2、數據雙向綁定20 30 40原理答：通過數據劫持結合發布—訂閱模式，通過Object.defineProperty為各個屬性定義get、set方法，在數據發生改變時給訂閱者發布消息，觸發相應的事件回調。3、vue生命周期Vue 實例有一個完整的生命周期，也就是從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是 Vue 的生命周期。通俗說就是 Vue 實例從創建到銷毀的過程，就是生命周期。- beforeCreate：創建前。此時，組件實例剛剛創建，還未進行數據觀測和事件配置，拿不到任何數據。- created：創建完成。vue 實例已經完成了數據觀測，屬性和方法的計算，未掛載到DOM，不能訪問到el屬性，el屬性，ref屬性內容為空數組常用于簡單的ajax請求，頁面的初始化。- beforeMount：掛載前。掛在開始之前被調用，相關的render函數首次被調用。編譯模板，把data里面的數據和模板生成html，完成了el和data 初始化，注意此時還沒有掛在html到頁面上。- mounted：掛載完成。也就是模板中的HTML渲染到HTML頁面中，此時可以通過DOM API獲取到DOM節點，$ref屬性可以訪問常用于獲取VNode信息和操作，ajax請求，mounted只會執行一次。- beforeUpdate：在數據更新之前被調用，發生在虛擬DOM重新渲染和打補丁之前，不會觸發附加地重渲染過程。- updated：更新后。在由于數據更改導致地虛擬DOM重新渲染和打補丁之后調用，beforeDestroy;銷毀前。在實例銷毀之前調用，實例仍然完全可用。- destroyed：銷毀后。在實例銷毀之后調用，調用后，vue實列指示的所有東西都會解綁，所有的事件監聽器會被移除。其他：activated：在keep-alive組件激活時調用deactivated：在keep-alive組件停用時調用4、為什么使用虛擬DOM- 創建真實DOM的代價高：真實的 DOM 節點 node 實現的屬性很多，而 vnode 僅僅實現一些必要的屬性，相比起來，創建一個 vnode 的成本比較低。- 觸發多次瀏覽器重繪及回流：使用 vnode ，相當于加了一個緩沖，讓一次數據變動所帶來的所有 node 變化，先在 vnode 中進行修改，然后 diff 之后對所有產生差異的節點集中一次對 DOM tree 進行修改，以減少瀏覽器的重繪及回流。- 虛擬dom由于本質是一個js對象，因此天生具備跨平臺的能力，可以實現在不同平臺的準確顯示。- Virtual DOM 在性能上的收益并不是最主要的，更重要的是它使得 Vue 具備了現代框架應有的高級特性。5、v-if 和 v-show的作用和區別無論v-show的值為true或者false,元素都會存在于html頁面中; 而v-if的值為true時,元素才會存在于html頁面中。v-show指令是通過修改元素的display屬性來實現的。v-if是動態地向DOM樹內添加或者刪除DOM元素,v-show是通過設置DOM元素的display樣式屬性控制顯隱的。v-if是”真正的”條件渲染,因為它會確保在奇幻過程中條件快內的事件監聽器和子組件適當的銷毀和重建。v-if也是惰性的,如果在初始渲染時條件為假,則什么也不做,直到條件第一次變為真時,才開始渲染條件塊。v-show不管初始條件是什么,元素總會背渲染,并且只是簡單地基于css進行切換。一般來說,v-if有更高的切換開銷,而v-show則有更高的初始渲染開銷因此,如果需要非常頻繁地切換,使用v-show比較好,如果在運行時條件不會改變時,用v-if比較好切換時生命周期函數的執行v-if初始渲染初始值為false時,不會渲染,生命周期函數不會執行初始值為true時,組件開始渲染,依次執行beforCreate,created,beforeMount,mounted等生命周期切換時從false到true:依次執行beforeCreate,created,beforeMount,moynted從true到false:依次執行beforeDestroy,destroyedv-show初始渲染無論初始狀態為true還是false,組件都會渲染,依次執行beforeCreate,created,beforeMount,mounted切換基于css進行切換,對生命周期函數無影響.5、用過vue的哪些組件？1、vue-route2、axios3、vuex4、Element UI5、swiper6、vue-echarts7、vue-video-player8、vue-photo-preview等等6、vue-router 的模式有？1、hash模式，用URL hash值來做路由，支持所有瀏覽器；該模式實現的路由，在通過鏈接后面添加““#”+路由名字”。2、history模式，由h5提供的history對象實現，依賴H5 History API和服務器配置。3、abstract模式，支持所有JS運行環境，如Node服務器端，如果發現沒有瀏覽器的API，路由會自動強制進入該模式。7、組件之間如何傳值Vue父子 組件之間傳值子組件通過props來接受數據和通過$emit來觸發父組件的自定義事件兄弟組件之間的傳值建一個公共組件bus.js.。傳遞方通過事件觸發bus.$emit。接收方通過在mounted{}生命周期里觸發bus.$on。可以通過VUEX 來跨組件傳參父孫傳值 `$attrs“$listeners`祖先和子孫傳值provide/inject獲取父組件實例this.$parent8、路由之間如何傳參- 通過router-link路由導航跳轉傳遞routerlink傳參- 跳轉時使用push方法拼接攜帶參數。 this.$router.push- 通過路由屬性中的name來確定匹配的路由，通過params來傳遞參數this.$router.push- 使用path來匹配路由，然后通過query來傳遞參數。this.$router.push注意：query有點像ajax中的get請求，而params像post請求。params在地址欄中不顯示參數，刷新頁面，參數丟失,其余方法在地址欄中顯示傳遞的參數，刷新頁面，參數不丟失。9、VUEX原理：Vuex是專門為vue.js應用程序設計的狀態管理工具。1、state 保存vuex中的數據源，通過this.$store.state獲取2、getters用于監聽state中的值的變化，返回計算后的結果。getter的返回值會根據它的依賴被緩存起來3、mutations 是修改store中的值得唯一方式//this.$store.commit4、action 官方建議提交一個actions，在actions中提交mutations再去修改狀態值。this.$store.dispatch5、modules 模塊化10、如何解決vuex頁面刷新數據丟失問題？原因：因為vuex里的數據是保存在運行內存中的，當頁面刷新時，頁面會重新加載vue實例，vuex里面的數據就會被清空。解決方法：將vuex中的數據直接保存到瀏覽器緩存中。11、computed和watch的區別？computed值有緩存、觸發條件是依賴值發生更改、 watch無緩存支持異步、監聽數據變化computed： 是計算屬性，依賴其它屬性值，并且 computed 的值有緩存，只有它依賴的屬性值發生改變，下一次獲取 computed 的值時才會重新計算 computed 的值；watch： 更多的是觀察的作用，支持異步，類似于某些數據的監聽回調 ，每當監聽的數據變化時都會執行回調進行后續操作；computed應用場景：需要進行數值計算，并且依賴于其它數據時，應該使用 computed，因為可以利用 computed 的緩存特性，避免每次獲取值時，都要重新計算；watch應用場景：需要在數據變化時執行異步或開銷較大的操作時，應該使用 watch，使用 watch選項允許我們執行異步操作 ，限制我們執行該操作的頻率，并在我們得到最終結果前，設置中間狀態。這些都是計算屬性無法做到的。[點擊打開視頻講解更加詳細][點擊打開文章詳解]12、route和router的區別- route:是路由信息對象，包括“path,parms,hash,name“等路由信息參數。- router:是路由實例對象，包括了路由跳轉方法，鉤子函數等。13、vue中數據變了但是視圖不跟新怎么解決？vue不能檢測以下變動的數組：1、當你利用索引直接設置一個項時，vm.items[indexOfItem] = newValue2、當你修改數組的長度時，例如： vm.items.length = newLength對象屬性的添加或刪除由于 Vue 會在初始化實例時對屬性執行 getter/setter 轉化過程，所以屬性必須在 data 對象上存在才能讓 Vue 轉換它，這樣才能讓它是響應的。解決辦法：使用 Vue.set 方法將響應屬性添加到嵌套的對象上Vue.set 或者 this.$set 異步更新隊列在最新的項目中遇到了這種情況，數據第一次獲取到了，也渲染了，但是第二次之后數據只有在再一次渲染頁面的時候更新，并不能實時更新。Vue 異步執行 DOM 更新。只要觀察到數據變化，Vue 將開啟一個隊列，并緩沖在同一事件循環中發生的所有數據改變。如果同一個 watcher 被多次觸發，只會被推入到隊列中一次。解決辦法：可在數據變化之后立即使用 Vue.nextTick。這樣回調函數在 DOM 更新完成后就會調用[點擊打開視頻講解更加詳細][點擊打開文章詳解]14、vue中data為什么是函數而不是對象？vue組件是可復用的vue實例，一個組件被創建好之后，就可能被用在各個地方，而組件不管被復用了多少次，組件中的data數據都應該是相互隔離，互不影響的.基于這一理念，組件每復用一次，data數據就會被復制一次，之后，當某一處復用的地方組件內data數據被改變時，其他復用地方組件的data數據不受影響。如果data是對象的話，每當被復用是，復用的對象和源對象都會指向同一個內存地址，互相之間相互影響，所以要是函數15、vue中父子組件傳值，父組件異步請求，子組件不能實時更新怎么解決？首先了解父子組件生命周期執行順序加載渲染數據過程父組件 beforeCreate父組件 created父組件 beforeMount子組件 beforeCreate子組件 created子組件 beforeMount子組件 mounted父組件 mounted原因：因為生命周期只會執行一次，數據是要等到異步請求以后才能拿到，那么子組件的mounted鉤子執行的時候，還沒有拿到父組件傳遞過來的數據，但是又必須要打印出來結果，那這樣的話，就只能去打印props中的默認值空字符串了，所以打印的結果是一個空字符串。解決辦法：1、使用v-if控制組件渲染的時機初始還沒拿到后端接口的異步數據的時候，不讓組件渲染，等拿到的時候再去渲染組件。使用v-if=”變量台灣 天天 樂”去控制，初始讓這個變量為false，這樣的話，子組件就不會去渲染，等拿到數據的時候，再讓這個變量變成true，舉例：data { return { isTrue:false // 初始為false }; }, monted{ this.$post.a.b.c.getData{ this.isTrue = true } }) }2、使用watch監聽數據的變化舉例： props: { tabledata: { type: Array, default: [], }, }, watch: { tableData{ console.log } },3、使用VueXVue 路由跳轉方式router-link 標簽跳轉this.$router.pushthis.$router.replacethis.$router.go：17、Vue 中 for循環為什么加 key？為了性能優化， 因為vue是虛擬DOM，更新DOM時用diff算法對節點進行一一比對，比如有很多li元素，要在某個位置插入一個li元素，但沒有給li上加key，那么在進行運算的時候，就會將所有li元素重新渲染一遍，但是如果有key，那么它就會按照key一一比對li元素，只需要創建新的li元素，插入即可，不需要對其他元素進行修改和重新渲染。key也不能是li元素的index，因為假設我們給數組前插入一個新元素，它的下標是0，那么和原來的第一個元素重復了，整個數組的key都發生了改變，這樣就跟沒有key的情況一樣了。18、vue路由守衛有哪些？路由守衛分為三種 ——分別是：全局路由守衛、組件路由守衛、獨享路由守衛。全局守衛全局守衛又分為全局前置守衛、和后置守衛1. router.beforeEach=>{})回調函數中的參數，to：進入到哪個路由去，from：從哪個路由離開，next：函數，決定是否展示你要看到的路由頁面。從名字全局前置守衛不難理解，它是全局的，即對 整個單頁應用 中的所有路由都生效，所以當定義了全局的前置守衛，在進入每一個路由之前都會調用這個回調，那么如果你在回調中對路由的跳轉條件判斷出錯，簡單點就是死循環…因為你遺漏了某種路由跳轉的情況，守衛會一直執行。所以在使用全局前置守衛的時候一定要判斷清楚可能會出現的路由跳轉的情況。2.router.afterEach => {}）只有兩個參數，to：進入到哪個路由去，from：從哪個路由離。理解了全局前置守衛，那么全局后置守衛也就那么一回事。全局后置守衛是整個單頁應用中每一次路由跳轉后都會執行其中的回調。所以多用于路由跳轉后的相應頁面操作，并不像全局前置守衛那樣會在回調中進行頁面的重定向或跳轉。組件內的守衛組件路由守衛分為到達這個組件時，離開這個組件時1. beforeRouteEnter:=>{}——到達to，from參數與上面使用方法一致。next回調函數略有不同。2.beforeRouteUpdate:=>{}——更新3. beforeRouteLeave:=>{}——離開點擊其他組件時，判斷是否確認離開。確認執行next；取消執行next，留在當前頁面。路由獨享的守衛1. beforeEnter:=>{}與全局路由守衛用法一致，但是只能針對一個頁面使用19、vue常的修飾符.stop:等統Javascript中的event.stopPropagation,防事件冒泡.prevent:等同于Javascript中的event。preventDefault,防執預設的為；.capture:與事件冒泡的向相反，事件捕獲由外到內.self:只會觸發范圍內的事件，不包含元素；.once:只會觸發次。20、vue的兩個核點數據驅動：ViewModel，保證數據和視圖的致性組件系統：應類UI可以看做全部是由組件樹構成的21、delete和Vue.delete刪除數組的區別delete只是被刪除的元素變成了empty/undefined其他的元素的鍵值還是不變。Vue.delete直接刪除了數組 改變了數組的鍵值22、vue常的UI組件庫Mint UI，element，VUX23、Vue首頁白屏是什么問題引起的？如何解決呢？[點擊打開視頻講解更加詳細][點擊打開文章詳解]24、性能優化篇[點擊打開文章詳解]七、React1、react的生命周期生命周期是什么？react 實例的生命周期，就是react實例從初始化，更新，到銷毀的過程react實例生命周期經歷三個階段初始化階段：完成從react組件創建到首次渲染的過程更新階段：當調用setState函數時，會引起組件的重新渲染銷毀階段：完成組件的銷毀三個階段分別對應的構造函數有初始化階段：constructor構造函數里，可以做狀態的初始化，接收props的傳值componentWillMount： 在渲染前調用，相當于vue中的beforeMountrender渲染函數，不要在這里修改數據。 vue中也有render函數。componentDidMount渲染完畢，在第一次渲染后調用。運行中階段當組件的 props 或 state 發生變化時會觸發更新或者改變了props時）。組件更新的生命周期調用順序如下：shouldComponentUpdate是否更新？ 需要返回true或者false。如果是false，那么組件就不會繼續更新了。componentWillUpdate即將更新。componentWillReceiveProps： 在組件接收到一個新的 prop 時被調用。這個方法在初始化render時不會被調用。nextProps 是props的新值，而 this.props是舊值。render不要在這里修改數據componentDidUpdate在組件完成更新后立即調用。在初始化時不會被調用。 相當于vue中的updated銷毀階段componentWillUnmount即將卸載，可以做一些組件相關的清理工作，例如取消計時器、網絡請求等2、為什么虛擬DOM 會提高性能首先， 虛擬DOM就是一個Javascript對象。通過這個Javascript對象來描述真實DOM如：{ tagName:”p”, style:”width:200px;height: 100px;”, innerHTML:”我是p”},其次，操作虛擬DOM，就是在操作javascript對象，所以，并不會引起頁面的重繪和重排。而操作真實DOM是會引起頁面的重繪和重排的。3、React的diff原理傳統diff算法需要遍歷整棵樹的節點然后進行比較，是一個深度遞歸的過程，運算復雜度常常是Oreact diff的優化策略DOM節點跨層級的操作不做優化，因為很少這么做，這是針對的tree層級的策略；對于同一個類的組件，會生成相似的樹形結構，對于不同類的組件，生成不同的樹形結構，這是針對conponent層級的策略；對于同一級的子節點，擁有同層唯一的key值，來做刪除、插入、移動的操作，這是針對element層級的策略；4、調用setState之后，發生了什么？合并state把傳入setState里的參數對象和當前的state進行合并。 觸發調和過程重新渲染組件React 會以相對高效的方式根據新的狀態構建 React 元素樹并且著手重新渲染ㄅㄧㄣ整個 UI 界面React 會自動計算出新的樹與老樹的節點差異，然后根據差異對界面進行最小化重渲染5、state和props的區別state是組件的狀態，也叫組件內部的數據props是組件的屬性，也可以認為是外部給組件傳入的數據6、React中的setState是同步執行還是異步執行？如果是異步的？怎么拿到執行后的state？setState是異步的。如果要拿到修改后的狀態，需要使用回調函數的方式，如下：//改變狀態后想做一些事情：this.setState => { //一般是用于在setState台灣彩券賓果開獎之后做一些操作 //this.state == 修改之后的state})7、為什么不能直接用以下辦法更新statethis.state.msg = “hello”;因為，這樣不會引起組件的重新渲染，所以，數據修改后沒法 呈現在頁面上。而調用setState函數，會引起組件的重新渲染，這樣更新的數據就會呈現在頁面上。[點擊打開視頻講解面試技巧+面試全過程，記得一鍵三連哦！感謝支持！！！]
Posted in賓果賓果 bingo bingo相關討論區
「全網最全」2022最新版前端——面試題_69 號
