好程式設計師web前端培訓分享Vue面試題

　　好程式設計師web 前端培訓分享 Vue 面試題 ， 為了幫助大家順利 透過面試 今天 就 為準備 參加web 前端面試的 小夥伴們準備了這篇文章，讓我們一起來看一看吧!

　　 一、什麼是MVVM?

　　 MVVM 是 Model-View-ViewModel 的縮寫。 MVVM 是一種設計思想。 Model 層代表資料模型，也可以在 Model 中定義資料修改和操作的業務邏輯 ;View 代表 UI 元件，它負責將資料模型轉化成 UI 展現出來， ViewModel 是一個同步 View 和 Model 的物件。

　　 在MVVM 架構下， View 和 Model 之間並沒有直接的聯絡，而是透過 ViewModel 進行互動， Model 和 ViewModel 之間的互動是雙向的， 因此 View 資料的變化會同步到 Model 中，而 Model 資料的變化也會立即反應到 View 上。

　　 ViewModel 透過雙向資料繫結把 View 層和 Model 層連線了起來，而 View

　　 和 Model 之間的同步工作完全是自動的，無需人為干涉，因此開發者只需關注業務邏輯，不需要手動操作 DOM, 不需要關注資料狀態的同步問題，複雜的資料狀態維護完全由 MVVM 來統一管理。

　　 二、mvvm 和 mvc 區別 ? 它和其它框架 (jquery) 的區別是什麼 ? 哪些場景適合 ?

　　 mvc 和 mvvm 其實區別並不大。都是一種設計思想。主要就是 mvc 中 Controller 演變成 mvvm 中的 viewModel 。 mvvm 主要解決了 mvc 中大量的 DOM 操作使頁面渲染效能降低，載入速度變慢，影響使用者體驗。

　　 區別：vue 資料驅動，透過資料來顯示檢視層而不是節點操作。

　　 場景：資料操作比較多的場景，更加便捷

　　 三、vue 的優點是什麼 ?

　　 低耦合。檢視(View) 可以獨立於 Model 變化和修改，一個 ViewModel 可以繫結到不同的 "View" 上，當 View 變化的時候 Model 可以不變，當 Model 變化的時候 View 也可以不變。

　　 可重用性。你可以把一些檢視邏輯放在一個ViewModel 裡面，讓很多 view 重用這段檢視邏輯。

　　 獨立開發。開發人員可以專注於業務邏輯和資料的開發(ViewModel) ，設計人員可以專注於頁面設計。

　　 可測試。介面素來是比較難於測試的，而現在測試可以針對ViewModel 來寫。

　　 四、 元件之間的傳值?

　　 父元件與子元件傳值

　　 父元件透過標籤上面定義傳值

　　 子元件透過props 方法接受資料

　　 子元件向父元件傳遞資料

　　 子元件透過$emit 方法傳遞引數

　　 五、路由之間跳轉

　　 宣告式( 標籤跳轉 ) 程式設計式 ( js 跳轉 )

　　 六、vue.cli 中怎樣使用自定義的元件 ? 有遇到過哪些問題嗎 ?

　　 第一步：在components 目錄新建你的元件檔案 (indexPage.vue) ， script 一定要 export default {}

　　 第二步：在需要用的頁面( 元件 ) 中匯入： import indexPage from '@/components/indexPage.vue'

　　 第三步：注入到vue 的子元件的 components 屬性上面 ,components:{indexPage}

　　 第四步：在template 檢視 view 中使用，

　　 例如有indexPage 命名，使用的時候則 index-page

　　 七、vue 如何實現按需載入配合 Webpack 設定

　　 Webpack 中提供了 require.ensure() 來實現按需載入。以前引入路由是透過 import 這樣的方式引入，改為 const 定義的方式進行引入。

　　 不進行頁面按需載入引入方式：import home from '../../common/home.vue'

　　 進行頁面按需載入的引入方式：const home = r => require.ensure( [], () => r (require('../../common/home.vue')))

　　 八、vuex 面試相關

　　 (1)vuex 是什麼 ? 怎麼使用 ? 哪種功能場景使用它 ?

　　 vue 框架中狀態管理。在 main.js 引入 store ，注入。新建一個目錄 store ，… .. export 。場景有：單頁應用中，元件之間的狀態。音樂播放、登入狀態、加入購物車

　　 (2)vuex 有哪幾種屬性 ?

　　 有五種，分別是 State 、 Getter 、 Mutation 、 Action 、 Module

　　 vuex 的 State 特性

　　 A 、 Vuex 就是一個倉庫，倉庫裡面放了很多物件。其中 state 就是資料來源存放地，對應於一般 Vue 物件裡面的 data

　　 B 、 state 裡面存放的資料是響應式的， Vue 元件從 store 中讀取資料，若是 store 中的資料發生改變，依賴這個資料的元件也會發生更新

　　 C 、它透過 mapState 把全域性的 state 和 getters 對映到當前元件的 computed 計算屬性中

　　 vuex 的 Getter 特性

　　 A 、 getters 可以對 State 進行計算操作，它就是 Store 的計算屬性

　　 B 、 雖然在元件內也可以做計算屬性，但是 getters 可以在多元件之間複用

　　 C 、 如果一個狀態只在一個元件內使用，是可以不用 getters

　　 vuex 的 Mutation 特性

　　 Action 類似於 mutation ，不同在於： Action 提交的是 mutation ，而不是直接變更狀態 ;Action 可以包含任意非同步操作。

　　 (3) 不用 Vuex 會帶來什麼問題 ?

　　 可維護性會下降，想修改資料要維護三個地方;

　　 可讀性會下降，因為一個元件裡的資料，根本就看不出來是從哪來的;

　　 增加耦合，大量的上傳派發，會讓耦合性大大增加，本來Vue 用 Component 就是為了減少耦合，現在這麼用，和元件化的初衷相背。

　　 九、 v-show 和 v-if 指令的共同點和不同點

　　 v-show 指令是透過修改元素的 display 的 CSS 屬性讓其顯示或者隱藏 ;

　　 v-if 指令是直接銷燬和重建 DOM 達到讓元素顯示和隱藏的效果 ;

　　 使用v-show 會更加節省效能上的開銷 ; 當只需要一次顯示或隱藏時，使用 v-if 更加合理。

　　 十、 如何讓CSS 只在當前元件中起作用

　　 將當前元件的<style> 修改為 <style scoped>

　　 十一、<keep-alive> </keep-alive> 的作用是什麼 ?

　　 包裹動態元件時，會快取不活動的元件例項，主要用於保留元件狀態或避免重新渲染。

　　 十二、Vue 中引入元件的步驟 ?

　　 1) 採用 ES6 的 import ... from ... 語法或 CommonJS 的 require() 方法引入元件

　　 2) 對元件進行註冊 , 程式碼如下

　　 // 註冊 Vue.component('my-component', { template:'

　　 A custom component!

　　 '})

3)  使用元件<my-component> </my-component>