前端經典面試題vue面試題
1.什麼是MVVM？
MVVM是一種設計思想。
Model 層代表數據模型，也可以在Model中定義數據修改和操作的業務邏輯；
View 代表UI 組件，它負責將數據模型轉化成UI 展現出來，ViewModel 是一個
同步View 和 Model的對象。
2.mvvm和mvc區別？它和其它框架（jquery）的區別是什麼？哪些場景適合？
mvc和mvvm其實區別並不大。都是一種設計思想。主要就是mvc中Controller演變成mvvm中的
viewModel。mvvm主要解決了mvc中大量的DOM 操作使頁面渲染性能降低，加載速度變慢，影響用戶
體驗。
區別：vue數據驅動，通過數據來顯示視圖層而不是節點操作。
場景：數據操作比較多的場景，更加便捷
3.vue的優點是什麼？
低耦合:視圖（View）可以獨立於Model變化和修改，一個ViewModel可以綁定到不同的"View"上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
可重用性:你可以把一些視圖邏輯放在一個ViewModel裏面，讓很多view重用這段視圖邏輯。
獨立開發:開發人員可以專註於業務邏輯和數據的開發（ViewModel），設計人員可以專註於頁面設計。
可測試:界面素來是比較難於測試的，而現在測試可以針對ViewModel來寫。
4.vue組件之間傳值？
*父組件與子組件傳值
父組件通過標籤上面定義傳值
子組件通過props方法接受數據
*子組件向父組件傳遞數據
子組件通過$emit方法傳遞參數
*vuex
*eventbus
*pubsub.js
5.vue2和vue3區別？vue3比vue2優點？
我們可以概覽Vue3的新特性
速度更快、體積減少、更易維護、更接近原生、更易使用
vue3相比vue2、重寫了虛擬Dom實現、編譯模板的優化、
更高效的組件初始化、undate性能提高1.3~2倍、
SSR速度提高了2~3倍
6.vuex面試相關
vue框架中狀態管理。在main.js引入store，注入。新建一個目錄store，….. export 。場景有：單頁應用中，組件之間的狀態。
當觸發組件中的某一個事件或者方法得時候，會通過dispatch分發一個消息到actions當中，action會進行異步請求數據，當數據請求回來的時候，會通過commit提交到mutations當中，在mutations當中去改變state當中的狀態。狀態改變以後會映射組件也發生改變。
1、Vuex 是一個專為 Vue.js 設計的狀態管理模式
Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式
•1.vuex解決了組件之間同一狀態的共享問題 （解決了不同組件之間的數據共享）
•2.組件裏面數據的持久化。
7.v-show和v-if指令的共同點和不同點
v-show指令是通過修改元素的display的CSS屬性讓其顯示或者隱藏
v-if指令是直接銷毀和重建DOM達到讓元素顯示和隱藏的效果
8.keep-alive的作用是什麼?
<keep-alive></keep-alive> 包裹動態組件時，會緩存不活動的組件實例，
主要用於保留組件狀態或避免重新渲染。
9.Vue中引入組件的步驟?
1）採用ES6的import ... from ...語法或CommonJS的require()方法引入組件
2）對組件進行註冊,代碼如下
// 註冊
Vue.component('my-component', {
template: '<div>A custom component!</div>'})
3）使用組件<my-component></my-component>
10.vue-router有哪幾種導航鉤子？
三種，一種是全局導航鉤子：router.beforeEach(to,from,next)，作用：跳轉前進行判斷攔截。
第二種：組件內的鉤子；
第三種：單獨路由獨享組件
11.生命周期相關面試題
總共分為8個階段創建前/後，載入前/後，更新前/後，銷毀前/後。
1-beforeCreate 初始化之後
2-created 創建完成
3-beforeMount 掛載之前
4-mounted 被創建
5-beforeUpdate 數據更新前
6-updated 被更新後
7-activated
8-deactivated
9-beforeDestroy 銷毀之前
10-destroyed 銷毀之後
Vue 實例從創建到銷毀的過程，就是生命周期。也就是從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是 Vue 的生命周期。
12.第一次頁面加載會觸發哪幾個鉤子?DOM 渲染在 哪個周期中就已經完成?
*第一次頁面加載時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鉤子
*DOM 渲染在 mounted 中就已經完成了。
13.舉例說出幾種vue當中的指令和它的用法？
v-if：判斷是否隱藏；
v-for：數據循環；
v-bind:class：綁定一個屬性；
v-model：實現雙向綁定
v-html：更新元素的innerHTML；
v-show與v-if
14.vue-loader是什麼？使用它的用途有哪些？
解析.vue文件的一個加載器。
用途：js可以寫es6、style樣式可以scss或less、template可以加jade等
15.為什麼使用key？
當有相同標籤名的元素切換時，需要通過 key 特性設置唯一的值來標記以讓Vue 區分它們，否則 Vue 為了效率只會替換相同標籤內部的內容。
16.v-if 和 v-for 可以一起使用嗎？如果不可以，為什麼？
當 Vue 處理指令時，v-for 比 v-if 具有更高的優先級，通過v-if 移動到容器元素，不會再重複遍歷列表中的每個值。取而代之的是，我們只檢查它一次，且不會在 v-if 為否的時候運算 v-for。
17.VNode是什麼？虛擬 DOM是什麼？
Vue在 頁面上渲染的節點，及其子節點稱為「虛擬節點 (Virtual Node)」，簡寫為「VNode」。「虛擬 DOM」是由 Vue 組件樹建立起來的整個 VNode 樹的稱呼。
18.vue2.x與vue3.x雙向數據綁定的原理?
數據變化更新視圖，視圖變化更新數據。其中，View變化更新Data，可以通過事件監聽的方式來實現，所以 Vue數據雙向綁定的工作主要是如何根據Data變化更新View。
Vue 是利用的 Object.defineProperty()方法進行的數據劫持，利用 set、get 來檢測數據的讀寫。
Vue2.x採用的是Object.defineProperty()方法
Vue3.0實現數據的雙向綁定原理：採用的是Proxy方法,proxy是個對象
proxy比Object.defineProperty好在哪裡？
可以直接監聽數組的變化；可以直接監聽對象而非屬性；Proxy返回的是一個新對象，可以只操作新的對象達到目的，而Object.defineProperty只能遍歷對象屬性直接修改
Object.defineProperty的優勢：A.兼容性好，支持IE9，而Proxy的存在瀏覽器兼容性問題，而且無法用polyfill磨平。
19.Vue $nextTick作用是什麼？
在下次 DOM 更新循環結束之後執行延遲回調。在修改數據之後立即使用這個方法，獲取更新後的 DOM。簡單的說就是再DOM操作時，vue的更新是異步的，$nextTick 是用來知道什麼時候 DOM 更新完成的。
20.$route和$router的區別?
$route是「路由信息對象」，包括path，params，query，name等路由信息參數。而$router是「路由實例」對象包括了路由的跳轉方法，鉤子函數等
21.vue.js的兩個核心是什麼(數據驅動、組件系統。)
數據驅動：Object.defineProperty和存儲器屬性: getter和setter
ViewModel，保證數據和視圖的一致性。
組件系統：應用類UI可以看作全部是由組件樹構成的。
22.hash路由和history路由的區別?
hash路由在地址欄URL上有#，而history路由沒有會好看一點；
我們進行回車刷新操作，hash路由會加載到地址欄對應的頁面，而history路由一般就404報錯了（刷新是網絡請求，沒有後端準備時會報錯）。history運用了瀏覽器的歷史記錄棧
23.cookie，sessionStorage和localStorage的區別?
localStorage：存儲持久數據，瀏覽器關閉後數據不會丟失，除非主動刪除數據。
sessionStorage:數據在當前瀏覽器窗口關閉後自動刪除。
cookie：設置的cookie過期時間之前一直有效，即使窗口關閉或瀏覽器關閉。
cookie數據時鐘在同源的http請求中攜帶（即使不需要），即會在瀏覽器和服務器之間傳遞。
seeeionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
24.computed與watch的區別?
computed是計算屬性，會根據依賴的數據動態顯示新的計算結果，計算後的值會被緩存，當依賴的值改變的時候，才會更新新的計算後的值
watch 就相當於是一個 data 的數據監聽回調，當依賴的 data 的數據變化就會執行回調
25.頁面刷新後，vuex中的數據丟失
js代碼是運行在內存中的，代碼運行時的所有變量、函數也都是保存在內存中的。進行刷新頁面的操作，以前申請的內存被釋放
解決思路：這些數據要想存儲就必須存儲在外部，例如：Local Storage、Session Storage、Index DB等。這些都是瀏覽器提供的API，讓你可以將數據存儲在硬盤上，做持久化存儲。
26.圖片懶加載和路由懶加載？
圖片懶加載：可視區域加載，就是只加載用戶可以看到的區域，這個主要由監控滾動條來實現，在沒進入可視區域的時候，我們先不給這個標籤賦 src 屬性。
路由懶加載：1. vue異步組件
component: resolve => require(['@/pages/ShopCar'],resolve)
2. webpack的require.ensure()
component: r => require.ensure([], () => r(require('@/pages/GoodsDetailPage')), 'demot')
27.跨域問題如何解決？
通過jsonp跨域
nodejs中間件代理跨域： vue框架的跨域webpack.config.js部分配置
28.scss是什麼？在vue.cli中的安裝使用步驟是？有哪幾大特性？
css的預編譯。
使用步驟：
第一步：先裝css-loader、node-loader、sass-loader等加載器模塊
第二步：在build目錄找到webpack.base.config.js，在那個extends屬性中加一個拓展.scss
第三步：在同一個文件，配置一個module屬性
第四步：然後在組件的style標籤加上lang屬性 ，例如：lang=」scss」
特性:
•可以用變量，例如（$變量名稱=值）；
•可以用混合器，例如（）
•可以嵌套
