Vue面試題
- node你瞭解嗎？
Node 是一個讓 JavaScript 運行在服務端的開發平臺，它讓 JavaScript 成爲與PHP、Python、Perl、Ruby 等服務端語言平起平坐的腳本語言。實質是對Chrome V8引擎進行了封裝，用於方便地搭建響應速度快、易於擴展的網絡應用。Node 使用事件驅動， 非阻塞I/O 模型而得以輕量和高效，非常適合在分佈式設備上運行數據密集型的實時應用。
Node的優點
1. 它是一個Javascript運行環境
2. 依賴於Chrome V8引擎進行代碼解釋
3. 事件驅動
4. 非阻塞I/O
5. 輕量、可伸縮，適於實時數據交互應用
6. 單進程，單線程
缺點：
1. 不適合CPU密集型應用；CPU密集型應用給Node帶來的挑戰主要是：由於JavaScript單線程的原因，如果有長時間運行的計算（比如大循環），將會導致CPU時間片不能釋放，使得後續I/O無法發起；
2. 只支持單核CPU，不能充分利用CPU
3. 可靠性低，一旦代碼某個環節崩潰，整個系統都崩潰
4. 開源組件庫質量參差不齊，更新快，向下不兼容
5. Debug不方便，錯誤沒有stack trace
- React你瞭解嗎
React得到了Facebook社區的支持，使得構建交互式UI非常容易。 React主要用於構建UI。你可以在React裏傳遞多種類型的參數，如聲明代碼，幫助你渲染出UI、也可以是靜態的HTML DOM元素、也可以傳遞動態變量、甚至是可交互的應用組件。
優點：
1. 速度快：在UI渲染過程中，React通過在虛擬DOM中的微操作來實現對實際DOM的局部更新。
2. 跨瀏覽器兼容：虛擬DOM幫助我們解決了跨瀏覽器問題，它爲我們提供了標準化的API，甚至在IE8中都是沒問題的。
3. 模塊化：爲你程序編寫獨立的模塊化UI組件，這樣當某個或某些組件出現問題是，可以方便地進行隔離。
4. 單向數據流：Flux是一個用於在JavaScript應用中創建單向數據層的架構，它隨着React視圖庫的開發而被Facebook概念化。
5. 同構、純粹的javascript：因爲搜索引擎的爬蟲程序依賴的是服務端響應而不是JavaScript的執行，預渲染你的應用有助於搜索引擎優化。
6. 兼容性好：比如使用RequireJS來加載和打包，而Browserify和Webpack適用於構建大型應用。它們使得那些艱難的任務不再讓人望而生畏。
缺點： 1. React本身只是一個V而已，並不是一個完整的框架，所以如果是大型項目想要一套完整的框架的話，基本都需要加上ReactRouter和Flux才能寫大型應用。
- vue瞭解嗎？
Vue.js是一個開源JavaScrip漸進式框架，能夠開發單頁面應用程序。它還可以用作Web應用程序框架，旨在簡化Web開發。
優點： 1. 簡單：官方文檔很清晰，比 Angular 簡單易學。
2. 快速：異步批處理方式更新 DOM。
3. 組合：用解耦的、可複用的組件組合你的應用程序。
4. 緊湊：~18kb min+gzip，且無依賴。
5. 強大：表達式 & 無需聲明依賴的可推導屬性 (computed properties)。
6. 對模塊友好：可以通過 NPM、Bower 或 Duo 安裝，不強迫你所有的代碼都遵循 Angular 的各種規定，使用場景更加靈活。
缺點： 1. 新生兒：Vue.js是一個新的項目，沒有angular那麼成熟。
2. 影響度不是很大：google了一下，有關於Vue.js多樣性或者說豐富性少於其他一些有名的庫。
3. 不支持IE8：
- angular瞭解嗎？
angularJS是一款優秀的前端JS框架，已經被用於Google的多款產品當中。
angularJS的特性如下：1.良好的應用程序結構 2.雙向數據綁定 3.指令 4.HTML模板 5.可嵌入、注入和測試
優點： 1.模板功能強大豐富，自帶了極其豐富的angular指令。
2.是一個比較完善的前端框架，包含服務，模板，數據雙向綁定，模塊化，路由，過濾器，依賴注入等所有功能；
3.自定義指令，自定義指令後可以在項目中多次使用。
4.ng模塊化比較大膽的引入了Java的一些東西（依賴注入），能夠很容易的寫出可複用的代碼，對於敏捷開發的團隊來說非常有幫助。
5.angularjs是互聯網巨人谷歌開發，這也意味着他有一個堅實的基礎和社區支持。
缺點： 1. angular 入門很容易 但深入後概念很多, 學習中較難理解.
2. 文檔例子非常少, 官方的文檔基本只寫了api, 一個例子都沒有, 很多時候具體怎麼用都是google來的, 或直接問misko,angular的作者.
3. 對IE6/7 兼容不算特別好, 就是可以用jQuery自己手寫代碼解決一些.
4. 指令的應用的最佳實踐教程少, angular其實很靈活, 如果不看一些作者的使用原則,很容易寫出 四不像的代碼, 例如js中還是像jQuery的思想有很多dom操作.
5. DI 依賴注入 如果代碼壓縮需要顯示聲明.
5.mvc模式和mvvm模式
1.MVC模式
mvc即model-view-controller（模型-視圖-控制器）
2.mvvm模式
mvvm即Model-View-ViewModel
Model代表數據模型，也可以在Model中定義數據修改和操作的業務邏輯。
View 代表UI 組件，它負責將數據模型轉化成UI 展現出來。
ViewModel 監聽模型數據的改變和控制視圖行爲、處理用戶交互，簡單理解就是一個同步View 和 Model的對象，連接Model和View。
在MVVM架構下，View 和 Model 之間並沒有直接的聯繫，而是通過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的， 因此View 數據的變化會同步到Model中，而Model 數據的變化也會立即反應到View 上。
6.vue生命週期的作用是什麼？
答：它的生命週期中有多個事件鉤子，讓我們在控制整個Vue實例的過程時更容易形成好的邏輯。
7.vue生命週期總共有幾個階段？
答：它可以總共分爲8個階段：創建前/後, 載入前/後,更新前/後,銷燬前/銷燬後。
8.第一次頁面加載會觸發哪幾個鉤子？
答：會觸發 下面這幾個beforeCreate, created, beforeMount, mounted 。
9.DOM 渲染在 哪個週期中就已經完成？
答：DOM 渲染在 mounted 中就已經完成了。
10.什麼是vue生命週期？
答： Vue 實例從創建到銷燬的過程，就是生命週期。從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、銷燬等一系列過程，稱之爲 Vue 的生命週期。
beforecreate : 完成實例初始化，初始化非響應式變量，this指向創建的實例；可以在這加個loading事件；data computed watch methods上的方法和數據均不能訪問
created：實例創建完成，完成數據(data props computed)的初始化 導入依賴項。可訪問data computed watch methods上的方法和數據未掛載DOM,不能訪問$el,$ref爲空數組，可在這結束loading，還做一些初始化，實現函數自執行,可以對data數據進行操作，可進行一些請求，請求不易過多，避免白屏時間太長。若在此階段進行的 DOM 操作一定要放在 Vue.nextTick() 的回調函數中
berofeMount：有了el,編譯了template|/outerHTML能找到對應的template,並編譯成render函數
mounted：完成創建vm.$el，和雙向綁定，完成掛載DOM 和渲染;可在mounted鉤子對掛載的dom進行操作即有了DOM 且完成了雙向綁定 可訪問DOM節點,$ref可在這發起後端請求，拿回數據，配合路由鉤子做一些事情；可對DOM 進行操作
beforeUpdate：數據更新之前可在更新前訪問現有的DOM,如手動移除添加的事件監聽器；
updated :完成虛擬DOM的重新渲染和打補丁；組件DOM 已完成更新；可執行依賴的dom 操作注意：不要在此函數中操作數據，會陷入死循環的。
activated:在使用vue-router時有時需要使用<keep-alive></keep-alive>來緩存組件狀態，這個時候created鉤子就不會被重複調用了，如果我們的子組件需要在每次加載的時候進行某些操作，可以使用
Activated：鉤子觸發
deactivated ：for keep-alive 組件被移除時使用
beforeDestroy： 在執行app.$destroy()之前可做一些刪除提示，如：你確認刪除XX嗎？可用於銷燬定時器，解綁全局時間 銷燬插件對象
destroyed ：當前組件已被刪除，銷燬監聽事件 組件 事件 子實例也被銷燬，這時組件已經沒有了，你無法操作裏面的任何東西了。
11Vue實現數據雙向綁定的原理？
vue實現數據雙向綁定主要是：採用數據劫持結合發佈者-訂閱者模式的方式，通過Object.defineProperty（）來劫持各個屬性的setter，getter，在數據變動時發佈消息給訂閱者，觸發相應監聽回調。當把一個普通 Javascript 對象傳給 Vue 實例來作爲它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉爲 getter/setter。用戶看不到 getter/setter，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。
12.父組件與子組件傳值
父組件傳給子組件：子組件通過props方法接受數據;
子組件傳給父組件：$emit方法傳遞參數
13.非父子組件間的數據傳遞，兄弟組件傳值
eventBus，就是創建一個事件中心，相當於中轉站，可以用它來傳遞事件和接收事件。項目比較小時，用這個比較合適。
14.Vue的路由實現
hash模式：在瀏覽器中符號“#”，#後面的字符稱之爲hash，用window.location.hash讀取；
特點：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動作，對服務端安全無用，hash不會重加載頁面。
hash 模式下，僅 hash 符號之前的內容會被包含在請求中，如 http://www.xxx.com，因此對於後端來說，即使沒有做到對路由的全覆蓋，也不會返回 404 錯誤。
history模式：history採用HTML5的新特性；且提供了兩個新方法：pushState，replaceState可以對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變更。
history 模式下，前端的 URL 必須和實際向後端發起請求的URL一致，如 http://www.xxx.com/items/id。後端如果缺少對 /items/id 的路由處理，將返回 404 錯誤。
- vue路由的鉤子函數
首頁可以控制導航跳轉，beforeEach，afterEach等，一般用於頁面title的修改。一些需要登錄才能調整頁面的重定向功能。
beforeEach主要有3個參數to，from，next：
to：route即將進入的目標路由對象，
from：route當前導航正要離開的路由
next：function一定要調用該方法resolve這個鉤子。執行效果依賴next方法的調用參數。可以控制網頁的跳轉。
16.vuex是什麼？怎麼使用？哪種功能場景使用它？
只用來讀取的狀態集中放在store中； 改變狀態的方式是提交mutations，這是個同步的事物； 異步邏輯應該封裝在action中。
在main.js引入store，注入。新建了一個目錄store，….. export 。
場景有：單頁應用中，組件之間的狀態、音樂播放、登錄狀態、加入購物車
State：Vuex 使用單一狀態樹,即每個應用將僅僅包含一個store 實例，但單一狀態樹和模塊化並不衝突。存放的數據狀態，不可以直接修改裏面的數據。
mutations：mutations定義的方法動態修改Vuex 的 store 中的狀態或數據。
getters：類似vue的計算屬性，主要用來過濾一些數據。
action ：actions可以理解爲通過將mutations裏面處裏數據的方法變成可異步的處理數據的方法，簡單的說就是異步操作數據。view 層通過 store.dispath 來分發 action。
Modules：項目特別複雜的時候，可以讓每一個模塊擁有自己的state、mutation、action、getters,使得結構非常清晰，方便管理。
17.vue如何自定義一個過濾器？
<div id="app">
<input type="text" v-model="msg" />
{{msg| capitalize }}</div>
var vm=new Vue({
el:"#app",
data:{
msg:''
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
18.對keep-alive 的瞭解？
keep-alive是 Vue 內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染。
在vue 2.1.0 版本之後，keep-alive新加入了兩個屬性: include(包含的組件緩存) 與 exclude(排除的組件不緩存，優先級大於include) 。
參數解釋
include - 字符串或正則表達式，只有名稱匹配的組件會被緩存
exclude - 字符串或正則表達式，任何名稱匹配的組件都不會被緩存
include 和 exclude 的屬性允許組件有條件地緩存。二者都可以用“，”分隔字符串、正則表達式、數組。當使用正則或者是數組時，要記得使用v-bind 。
19.css只在當前組件起作用
答：在style標籤中寫入scoped變成當前頁面可以得css 例如：<style scoped></style>
20.v-if 和 v-show 區別
答：v-if按照條件是否渲染,在頁面上標籤不存在了，v-show是display的block或none；
21.$route和$router的區別
答：$route是“路由信息對象”，包括path，params，hash，query，fullPath，matched，name等路由信息參數。而$router是“路由實例”對象包括了路由的跳轉方法，鉤子函數等。
22.vue.js的兩個核心是什麼？
答：數據驅動、組件系統
23.vue幾種常用的指令
答：v-for循環 、 v-if v-else判斷、v-bind綁定、v-on事件、v-show顯示、v-model雙向綁定
24.vue常用的修飾符？
答：.lazy在“change”時更新數據；.number輸入值轉爲數值類型；.trim自動過濾用戶輸入的首尾空白字符.prevent: 提交事件不再重載頁面；.stop: 阻止單擊事件冒泡；.self: 當事件發生在該元素本身而不是子元素的時候會觸發；.capture: 事件偵聽，事件發生的時候會調用
25.v-on 可以綁定多個方法嗎？
答：可以
26.vue中 key 值的作用？
答：當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用“就地複用”策略。如果數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序， 而是簡單複用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。key的作用主要是爲了高效的更新虛擬DOM。
27.什麼是vue的計算屬性？
答：在模板中放入太多的邏輯會讓模板過重且難以維護，在需要對數據進行復雜處理，且可能多次使用的情況下，儘量採取計算屬性的方式。好處：①使得數據處理結構清晰；②依賴於數據，數據更新，處理結果自動更新；③計算屬性內部this指向vm實例；④在template調用時，直接寫計算屬性名即可；⑤常用的是getter方法，獲取數據，也可以使用set方法改變數據；⑥相較於methods，不管依賴的數據變不變，methods都會重新計算，但是依賴數據不變的時候computed從緩存中獲取，不會重新計算。
10.vue等單頁面應用及其優缺點
答：優點：Vue 的目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件，核心是一個響應的數據綁定系統。MVVM、數據驅動、組件化、輕量、簡潔、高效、快速、模塊友好。
缺點：不支持低版本的瀏覽器，最低只支持到IE9；不利於SEO的優化（如果要支持SEO，建議通過服務端來進行渲染組件）；第一次加載首頁耗時相對長一些；不可以使用瀏覽器的導航按鈕需要自行實現前進、後退。
28.構建的 vue-cli 工程都到了哪些技術，它們的作用分別是什麼？
ue-cli依賴的 Node.js 環境安裝
WebPack：模塊打包機，它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包爲合適的格式以供瀏覽器使用。
29vue-cli 工程常用的 npm 命令有哪些？
node -v 查詢版本號
npm install -g vue-cli 安裝腳手架
vue init webpack 項目名 通過腳手架創建項目
npm start 運行項目
- 請說出vue-cli工程中每個文件夾和文件的用處
- vue中 key 值的作用
當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用“就地複用”策略。如果數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序， 而是簡單複用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。
- vue如何監聽鍵盤事件中的按鍵？
<input v-on:keyup.13="fun">指定鍵盤值進行調用
- vue中對象更改檢測的注意事項
Vue無法檢測到對象屬性的添加和刪除。對於已經創建的實例，Vue 不能動態添加根級別的響應式屬性，可以使用 Vue.set(object, key, value) 方法向嵌套對象添加響應式屬性。
Vue 不能動態添加根級別的響應式屬性：
var vm = new Vue({
data: { a: 1}
})
vm.b = 2;// vm.a現在是響應式的，vm.b不是響應式的
向嵌套對象添加響應式屬性：
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})// 問題
vm.userProfile.age = 27;// 非響應// 解決方案
Vue.set(vm.userProfile, 'age', 27);// 方案一
vm.$set(vm.userProfile, 'age', 27);// 等同方案一
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
});// 方案二//方案二是用兩個對象的屬性創建一個新的對象，注意不要使用以下方式，因爲此種方式是與vm.userProfile.age = 27的本質是一樣的，均是非響應屬性。Object.assign(vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
- vue等單頁面應用及其優缺點
優點：
1、具有桌面應用的即時性、網站的可移植性和可訪問性。
2、用戶體驗好、快，內容的改變不需要重新加載整個頁面。
3、基於上面一點，SPA相對對服務器壓力小。
4、良好的前後端分離。SPA和RESTful架構一起使用，後端不再負責模板渲染、輸出頁面工作，web前端和各種移動終端地位對等，後端API通用化。
5、同一套後端程序代碼，不用修改就可以用於Web界面、手機、平板等多種客戶端；
缺點：
1、不利於SEO。（如果你看中SEO，那就不應該在頁面上使用JavaScript，你應該使用網站而不是Web應用）
2、初次加載耗時相對增多。
3、導航不可用，如果一定要導航需要自行實現前進、後退。
36.完整的 vue-router 導航解析流程
導航解析流程:
導航被觸發,在失活的組件裏調用離開守衛;調用全局的 beforeEach 守衛;在重用的組件裏調用 beforeRouteUpdate 守衛;在路由配置裏調用 beforeEnter;解析異步路由組件;在被激活的組件裏調用 beforeRouteEnter;調用全局的 beforeResolve 守衛 (2.5+);導航被確認;調用全局的 afterEach 鉤子;觸發 DOM 更新;用創建好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。
35.談談node Event Loop（事件循環）機制
同步任務都在主線程上執行，形成一個執行棧
主線程之外，還存在一個任務隊列。只要異步任務有了運行結果，就在任務隊列之中放置一個事件。
一旦執行棧中的所有同步任務執行完畢，系統就會讀取任務隊列,將隊列中的事件放到執行棧中依次執行
主線程從任務隊列中讀取事件，這個過程是循環不斷的
整個的這種運行機制又稱爲 Event Loop (事件循環)
36.前後端分離的思想
在前後端分離的模式中，後端看不到項目裏的頁面，後端給前端提供接口，前端通過後端提供的接口進行也米娜的展示。核心思想是前端html頁面通過ajax調用後端的restuful api接口並使用json數據進行交互。在前後端分離的應用模式中 ，前端與後端的耦合度相對較低。在前後端分離的應用模式中，我們通常將後端開發的每個視圖都稱爲一個接口，或者API，前端通過訪問接口來對數據進行增刪改查。
前後段分離的優點
（1）：最大的好處就是前端JS可以做很大部分的數據處理工作，對服務器的壓力減小到最小；
（2）：後臺錯誤不會直接反映到前臺，錯誤接秒較爲友好；
（3）：由於後臺是很難去探知前臺頁面的分佈情況，而這又是JS的強項，而JS又是無法獨立和服務器進行通訊的。所以單單用後臺去控制整體頁面，又或者只靠JS完成效果，都會難度加大，前後臺各盡其職可以最大程度的減少開發難度。
