vue面試題總結

什麼是MVVM？

MVVM 是 Model-View-ViewModel 的縮寫。mvvm 是一種設計思想。

• Model 層表明數據模型，也能夠在 Model 中定義數據修改和操做的業務邏輯；
• View 表明 UI 組件，它負責將數據模型轉化成 UI 展示出來;
• ViewModel 是一個同步 View 和 Model 的對象。

MVVM和MVC的區別？

主要就是 mvc 中 Controller 演變成 mvvm 中的 viewModel。
mvvm 主要解決了 mvc 中大量的 DOM操做使頁面渲染性能下降,加載速度變慢，影響用戶體驗。和當 Model 頻繁發生變化，開發者須要主動更新到 View 。

Vue實現數據雙向綁定的原理？

採用數據劫持結合發佈者-訂閱者模式的方式，經過 Object.defineProperty() 來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應監聽回調。

VUE的優勢?

低耦合、可重用性、獨立開發、可測試

生命週期的做用?

便於在控制整個Vue實例的過程時更容易造成好的邏輯。

生命週期的渲染過程？

beforeCreate(建立前):在數據觀測和初始化事件還未開始
created(建立後):完成數據觀測，屬性和方法的計算，初始化事件，$el屬性還沒顯示出來
beforeMount():編譯模板，把data裏面的數據和模板生成html，可是html還沒掛載到頁面
mounted():編譯好的html內容替換el屬性指向的DOM對象，完成html渲染到頁面。此過程當中執行ajax交互
beforeUpdate():數據更新前調用，發生在虛擬DOM從新渲染和打補丁以前，可在該鉤子函數中進一步的更改狀態，不會觸發附加的重複渲染過程
updated():在猶豫數據更改致使的虛擬DOM從新渲染和打補丁以後調用
beforeDestory():在實例銷燬以前調用，此時實例仍然徹底可用
destoryed():實例銷燬後調用，全部事件監聽器會被移除，全部的自實例也會被銷燬。服務器端渲染期間不被調用

vue-router是什麼？有哪些組件？有哪些導航鉤子函數？

定義：寫路由的一個組件
組件：router-link、router-view
鉤子函數：全局導航鉤子、組件內導航鉤子、單獨路由獨享組件

參數傳遞方式？

• 父組件傳遞給子組件：

子組件經過props接受數據

• 子組件傳遞給父組件：

$emit方法傳遞參數

• 兄弟組件傳值：

eventBus，建立一個事件中心，至關於中轉站, 用它來接收和傳遞事件。

父子兄弟組件調用對方組件的方法

• 子組件調用父組件的方法：

一、子組件調用父組件可使用this.$parent.方法名

二、子組件裏面用$emit向父組件觸發一個事件，父組件監聽這個事件就好了。

三、父組件把方法傳入子組件中，在子組件裏像接受數據同樣接收，直接調用這個方法

• 父組件調用子組件的方法:

經過ref直接調用子組件的方法：eg:this.$refs.refName.子組件的方法名。

• 兄弟組件相互調用他們的方法：

藉助父組件，先調用父組件的方法，用父組件去調用另外一個子組件的方法。

VUE和其餘框架的區別

• 和REACT的區別：

• 相同點：

react採用特殊的jsx的語法，而vue也推崇寫.vue的特殊文件格式。
對文件內容都有必定的約定，二者都須要編譯後使用，
中心思想都是一切都是組件，組件實例之間能夠嵌套，
都提供合理的鉤子函數，讓開發者定製化的處理需求，
都不內置AJAX，Route等功能到核心包，而是以插件的加載，
在組件開發中都支持mixins的特性

• 不一樣點：

react採用的虛擬DOM會對渲染出來的結果作贓檢查；
vue在模板中提供了指令、過濾器等，能夠快捷方便的操做虛擬DOM

• 和ANGULAR的區別：

• 相同點：

都支持指令，包括內置指令和自定義指令；
都支持過濾器，包括內置過濾器和自定義過濾器；
都支持數據的雙向綁定，都不支持低端瀏覽器；

• 不一樣點：

angular的學習成本比較高，而vue的API比較簡單直觀；
angular對數據作贓檢查，因此watch越多越慢；
vue使用基於依賴追蹤的觀察而且使用異步隊列更新，全部數據都是獨立觸發的。

• 和JQuery的區別：

• jQuery是使用選擇器（$）選取DOM對象，對其進行賦值、取值、事件綁定等操做，其實和原生的HTML的區別只在於能夠更方便的選取和操做DOM對象，而數據和界面是在一塊兒的。
• Vue則是經過Vue對象將數據和View徹底分離開來了。對數據進行操做再也不須要引用相應的DOM對象，能夠說數據和View是分離的，他們經過Vue對象這個vm實現相互的綁定。

怎麼定義vue-router的動態路由？怎麼獲取傳過來的動態參數？

在router目錄下的index.js文件中，對path屬性加上/:id。 使用router對象的params能夠獲取ID

vue.cli怎麼使用自定義的組件？有遇到過哪些問題嗎？

一、建立.vue文件
二、import引入，component裏面定義
三、template使用。

封裝vue組件的過程？

一、創建組件的模板；
二、準備好組件的數據輸入；
三、準備好組件的數據輸出；
四、調用。

router有什麼區別？

$route是「路由信息對象」，包括path，params，hash，query，fullPath，matched，name等路由信息參數。

$router是「路由實例」對象包括了路由的跳轉方法，鉤子函數等。

watch和computer有什麼區別?

computer: 當頁面中有某些數據依賴其餘數據進行變更的時候使用;

watch: watch和computed很類似，watch用於觀察和監聽頁面上的vue實例，固然在大部分狀況下咱們都會使用computed，但若是要在數據變化的同時進行異步操做或者是比較大的開銷，那麼watch爲最佳選擇

Vuex的幾種屬性？

state、getter、mutation、action、module

• state:頁面狀態管理容器對象
• getter:state的計算屬性
• mutation:狀態改變操做方法
• action:操做行爲處理模塊
• module:store能夠切分紅模塊，每一個模塊都擁有本身的state,getter,mutation,action

嵌套路由怎麼定義？

VueRouter 的參數中使用 children 配置

active-class 是哪一個組件的屬性？

vue-router 模塊的 router-link 組件。