點擊“卓躍教育”，選擇“星標?”

在看|星標|留言,? 真愛

今天跟大家分享下Vue常見面試題的知識。

1.vue優點？

答：輕量級框架：只關注視圖層，是一個構建數據的視圖集合，大小只有幾十kb；

簡單易學：國人開發，中文文檔，不存在語言障礙 ，易于理解和學習；
雙向數據綁定：保留了angular的特點，在數據操作方面更為簡單；
組件化：保留了react的優點，實現了html的封裝和重用，在構建單頁面應用方面有著獨特的優勢；
視圖，數據，結構分離：使數據的更改更為簡單，不需要進行邏輯代碼的修改，只需要操作數據就能完成相關操作；
虛擬DOM：dom操作是非常耗費性能的， 不再使用原生的dom操作節點，極大解放dom操作，但具體操作的還是dom不過是換了另一種方式；
運行速度更快:相比較與react而言，同樣是操作虛擬dom，就性能而言，vue存在很大的優勢。

2.vue父組件向子組件傳遞數據？

答：通過props。

3.子組件像父組件傳遞事件？答：$emit方法。4.v-show和v-if指令的共同點和不同點？答: 共同點：都能控制元素的顯示和隱藏；

不同點：實現本質方法不同，v-show本質就是通過控制css中的display設置為none，控制隱藏，只會編譯一次；v-if是動態的向DOM樹內添加或者刪除DOM元素，若初始值為false，就不會編譯了。而且v-if不停的銷毀和創建比較消耗性能。
總結：如果要頻繁切換某節點，使用v-show(切換開銷比較小，初始開銷較大)。如果不需要頻繁切換某節點使用v-if(初始渲染開銷較小，切換開銷比較大)。5.如何讓CSS只在當前組件中起作用？
答：在組件中的style前面加上scoped6.的作用是什么?
答:keep-alive 是 Vue 內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染。7.如何獲取dom?
答：ref="domName" 用法：this.$refs.domName8.說出幾種vue當中的指令和它的用法？
答：v-model雙向數據綁定；
v-for循環；
v-if v-show 顯示與隱藏；
v-on事件；v-once: 只綁定一次。9. vue-loader是什么？使用它的用途有哪些？
答：vue文件的一個加載器，將template/js/style轉換成js模塊。
用途：js可以寫es6、style樣式可以scss或less、template可以加jade等10.為什么使用key?答：需要使用key來給每個節點做一個唯一標識，Diff算法就可以正確的識別此節點。作用主要是為了高效的更新虛擬DOM。11.axios及安裝?答：請求后臺資源的模塊。npm install axios --save裝好，js中使用import進來，然后.get或.post。返回在.then函數中如果成功，失敗則是在.catch函數中。12.v-model的使用。答：v-model用于表單數據的雙向綁定，其實它就是一個語法糖，這個背后就做了兩個操作：v-bind綁定一個value屬性；v-on指令給當前元素綁定input事件。13.請說出vue.cli項目中src目錄每個文件夾和文件的用法？答：assets文件夾是放靜態資源；components是放組件；router是定義路由相關的配置; app.vue是一個應用主組件；main.js是入口文件。14.分別簡述computed和watch的使用場景答：computed:當一個屬性受多個屬性影響的時候就需要用到computed最典型的栗子：購物車商品結算的時候watch:當一條數據影響多條數據的時候就需要用watch栗子：搜索數據15.v-on可以監聽多個方法嗎？答：可以，栗子：。16.$nextTick的使用答：當你修改了data的值然后馬上獲取這個dom元素的值，是不能獲取到更新后的值，你需要使用$nextTick這個回調，讓修改后的data值渲染更新到dom元素之后在獲取，才能成功。17.vue組件中data為什么必須是一個函數？答：因為JavaScript的特性所導致，在component中，data必須以函數的形式存在，不可以是對象。組建中的data寫成一個函數，數據以函數返回值的形式定義，這樣每次復用組件的時候，都會返回一份新的data，相當于每個組件實例都有自己私有的數據空間，它們只負責各自維護的數據，不會造成混亂。而單純的寫成對象形式，就是所有的組件實例共用了一個data，這樣改一個全都改了。18.漸進式框架的理解答：主張最少；可以根據不同的需求選擇不同的層級；19.Vue中雙向數據綁定是如何實現的？答：vue 雙向數據綁定是通過 數據劫持 結合 發布訂閱模式的方式來實現的， 也就是說數據和視圖同步，數據發生變化，視圖跟著變化，視圖變化，數據也隨之發生改變；核心：關于VUE雙向數據綁定，其核心是 Object.defineProperty()方法。20.單頁面應用和多頁面應用區別及優缺點答：單頁面應用(SPA)，通俗一點說就是指只有一個主頁面的應用，瀏覽器一開始要加載所有必須的 html, js, css。所有的頁面內容都包含在這個所謂的主頁面中。但在寫的時候，還是會分開寫(頁面片段)，然后在交互的時候由路由程序動態載入，單頁面的頁面跳轉，僅刷新局部資源。多應用于pc端。多頁面(MPA)，就是指一個應用中有多個頁面，頁面跳轉時是整頁刷新單頁面的優點：用戶體驗好，快，內容的改變不需要重新加載整個頁面，基于這一點spa對服務器壓力較小；前后端分離；頁面效果會比較炫酷(比如切換頁面內容時的專場動畫)。單頁面缺點：不利于seo；導航不可用，如果一定要導航需要自行實現前進、后退。(由于是單頁面不能用瀏覽器的前進后退功能，所以需要自己建立堆棧管理)；初次加載時耗時多；頁面復雜度提高很多。21.v-if和v-for的優先級答：當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級，這意味著 v-if 將分別重復運行于每個 v-for 循環中。所以，不推薦v-if和v-for同時使用。如果v-if和v-for一起用的話，vue中的的會自動提示v-if應該放到外層去。22.assets和static的區別答：相同點：assets和static兩個都是存放靜態資源文件。項目中所需要的資源文件圖片，字體圖標，樣式文件等都可以放在這兩個文件下，這是相同點?不相同點：assets中存放的靜態資源文件在項目打包時，也就是運行npm run build時會將assets中放置的靜態資源文件進行打包上傳，所謂打包簡單點可以理解為壓縮體積，代碼格式化。而壓縮后的靜態資源文件最終也都會放置在static文件中跟著index.html一同上傳至服務器。static中放置的靜態資源文件就不會要走打包壓縮格式化等流程，而是直接進入打包好的目錄，直接上傳至服務器。因為避免了壓縮直接進行上傳，在打包時會提高一定的效率，但是static中的資源文件由于沒有進行壓縮等操作，所以文件的體積也就相對于assets中打包后的文件提交較大點。在服務器中就會占據更大的空間。建議：將項目中template需要的樣式文件js文件等都可以放置在assets中，走打包這一流程。減少體積。而項目中引入的第三方的資源文件如iconfoont.css等文件可以放置在static中，因為這些引入的第三方文件已經經過處理，我們不再需要處理，直接上傳。23.vue常用的修飾符答：.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡；.prevent：等同于JavaScript中的event.preventDefault()，防止執行預設的行為(如果事件可取消，則取消該事件，而不停止事件的進一步傳播)；.capture：與事件冒泡的方向相反，事件捕獲由外到內；.self：只會觸發自己范圍內的事件，不包含子元素；.once：只會觸發一次。24.vue的兩個核心點答：數據驅動、組件系統數據驅動：ViewModel，保證數據和視圖的一致性。組件系統：應用類UI可以看作全部是由組件樹構成的。25.vue和jQuery的區別答：jQuery是使用選擇器($)選取DOM對象，對其進行賦值、取值、事件綁定等操作，其實和原生的HTML的區別只在于可以更方便的選取和操作DOM對象，而數據和界面是在一起的。比如需要獲取label標簽的內容：$("lable").val();,它還是依賴DOM元素的值。?Vue則是通過Vue對象將數據和View完全分離開來了。對數據進行操作不再需要引用相應的DOM對象，可以說數據和View是分離的，他們通過Vue對象這個vm實現相互的綁定。這就是傳說中的MVVM。26. 引進組件的步驟答: 在template中引入組件；在script的第一行用import引入路徑；用component中寫上組件名稱。27.delete和Vue.delete刪除數組的區別答：delete只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。Vue.delete 直接刪除了數組 改變了數組的鍵值。28.SPA首屏加載慢如何解決答：安裝動態懶加載所需插件；使用CDN資源。29.Vue-router跳轉和location.href有什么區別答：使用location.href='/url'來跳轉，簡單方便，但是刷新了頁面；使用history.pushState('/url')，無刷新頁面，靜態跳轉；引進router，然后使用router.push('/url')來跳轉，使用了diff算法，實現了按需加載，減少了dom的消耗。其實使用router跳轉和使用history.pushState()沒什么差別的，因為vue-router就是用了history.pushState()，尤其是在history模式下。30. vue slot答：簡單來說，假如父組件需要在子組件內放一些DOM，那么這些DOM是顯示、不顯示、在哪個地方顯示、如何顯示，就是slot分發負責的活。31.你們vue項目是打包了一個js文件，一個css文件，還是有多個文件？答：根據vue-cli腳手架規范，一個js文件，一個CSS文件。32.Vue里面router-link在電腦上有用，在安卓上沒反應怎么解決？答：Vue路由在Android機上有問題，babel問題，安裝babel polypill插件解決。33.Vue2中注冊在router-link上事件無效解決方法答：使用@click.native。原因：router-link會阻止click事件，.native指直接監聽一個原生事件。34.RouterLink在IE和Firefox中不起作用(路由不跳轉)的問題答: 方法一：只用a標簽，不適用button標簽；方法二：使用button標簽和Router.navigate方法35.axios的特點有哪些？

答：從瀏覽器中創建XMLHttpRequests；node.js創建http請求；支持Promise API；攔截請求和響應；轉換請求數據和響應數據；取消請求；自動換成json。axios中的發送字段的參數是data跟params兩個，兩者的區別在于params是跟請求地址一起發送的，data的作為一個請求體進行發送params一般適用于get請求，data一般適用于post put 請求。36.請說下封裝 vue 組件的過程？答：1. 建立組件的模板，先把架子搭起來，寫寫樣式，考慮好組件的基本邏輯。(os：思考1小時，碼碼10分鐘，程序猿的準則。)2. 準備好組件的數據輸入。即分析好邏輯，定好 props 里面的數據、類型。3. 準備好組件的數據輸出。即根據組件邏輯，做好要暴露出來的方法。4. 封裝完畢了，直接調用即可37.params和query的區別答：用法：query要用path來引入，params要用name來引入，接收參數都是類似的，分別是this.$route.query.name和this.$route.params.name。url地址顯示：query更加類似于我們ajax中get傳參，params則類似于post，說的再簡單一點，前者在瀏覽器地址欄中顯示參數，后者則不顯示注意點：query刷新不會丟失query里面的數據params刷新 會 丟失 params里面的數據。38.vue初始化頁面閃動問題答：使用vue開發時，在vue初始化之前，由于div是不歸vue管的，所以我們寫的代碼在還沒有解析的情況下會容易出現花屏現象，看到類似于{{message}}的字樣，雖然一般情況下這個時間很短暫，但是我們還是有必要讓解決這個問題的。首先：在css里加上[v-cloak] {display: none;}。如果沒有徹底解決問題，則在根元素加上style="display: none;" :style="{display: 'block'}"39.vue更新數組時觸發視圖更新的方法答:push()；pop()；shift()；unshift()；splice()；sort()；reverse()40.vue常用的UI組件庫答：Mint UI，element，VUX41.vue修改打包后靜態資源路徑的修改答：cli2版本：將 config/index.js 里的 assetsPublicPath 的值改為 './' 。build: {...assetsPublicPath: './',...?}cli3版本：在根目錄下新建vue.config.js 文件，然后加上以下內容：(如果已經有此文件就直接修改)module.exports = {publicPath: '', // 相對于 HTML 頁面(目錄相同) }

總結

以上是生活随笔為你收集整理的for vue 一行2列_vue常见面试题汇总的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。