Vue常見的面試題

一、Vue的雙向數據綁定原理是什麼？

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

具體步驟：

第一步：須要observe的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上setter和getter這樣的話，給這個對象的某個值賦值，就會觸發setter，那麼就能監聽到了數據變化；

第二步：compile解析模板指令，將模板中的變量替換成數據，而後初始化渲染頁面視圖，並將每一個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變更，收到通知，更新視圖；

第三步：Watcher訂閱者是Observer和Compile之間通訊的橋樑，主要作的事情是:

（1）、在自身實例化時往屬性訂閱器(dep)裏面添加本身

（2）、自身必須有一個update()方法

（3）、待屬性變更dep.notice()通知時，能調用自身的update()方法，並觸發Compile中綁定的回調，則功成身退。

第四步：MVVM做爲數據綁定的入口，整合Observer、Compile和Watcher三者，經過Observer來監聽本身的model數據變化，經過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通訊橋樑，達到數據變化->視圖更新；視圖交互變化(input) ->數據model變動的雙向綁定效果。

二、請詳細說下你對vue生命週期的理解？

答：Vue 實例從建立到銷燬的過程，就是生命週期。也就是從開始建立、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，咱們稱這是 Vue 的生命週期。

總共分爲8個階段建立前/後，載入前/後，更新前/後，銷燬前/後。

建立前/後：在beforeCreated階段，vue實例的掛載元素$el和數據對象data都爲undefined，還未初始化。在created階段，vue實例的數據對象data有了，$el尚未。

載入前/後：在beforeMount階段，vue實例的$el和data都初始化了，但仍是掛載以前爲虛的dom節點，data.message還未替換。在mounted階段，vue實例掛載完成，data.message成功渲染。

更新前/後：當data變化時，會觸發beforeUpdate和updated方法。

銷燬前/後：在執行destroy方法後，對data的改變不會再觸發周期函數，說明此時vue實例已經解除了事件監聽以及和dom的綁定，可是dom結構依然存在

生命週期一些鉤子的使用方法：

• beforecreate : 能夠在這加個loading事件，在加載實例時觸發
• created : 初始化完成時的事件寫在這裏，如在這結束loading事件，異步請求也適宜在這裏調用
• mounted : 掛載元素，獲取到DOM節點
• updated : 若是對數據統一處理，在這裏寫上相應函數
• beforeDestroy : 能夠作一個確認中止事件的確認框
• nextTick : 更新數據後當即操做dom

生命週期的做用：它的生命週期中有多個事件鉤子，讓咱們在控制整個Vue實例的過程時更容易造成好的邏輯。

列舉出3個Vue中經常使用的生命週期鉤子函數

• created: 實例已經建立完成以後調用,在這一步,實例已經完成數據觀測, 屬性和方法的運算, watch/event事件回調. 然而, 掛載階段尚未開始, $el屬性目前還不可見
• mounted: el被新建立的 vm.$el 替換，並掛載到實例上去以後調用該鉤子。若是 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。
• activated: keep-alive組件激活時調用

3.組件之間的傳值通訊？ 

 父組件向子組件傳值： 

 1）子組件在props中建立一個屬性，用來接收父組件傳過來的值； 

 2）在父組件中註冊子組件； 

 3）在子組件標籤中添加子組件props中建立的屬性； 

 4）把須要傳給子組件的值賦給該屬性 

 子組件向父組件傳值： 

 1）子組件中須要以某種方式（如點擊事件）的方法來觸發一個自定義的事件； 

 2）將須要傳的值做爲$emit的第二個參數，該值將做爲實參傳給響應事件的方法； 

 3）在父組件中註冊子組件並在子組件標籤上綁定自定義事件的監聽。

四、請說下封裝 vue 組件的過程？

答：首先，組件能夠提高整個項目的開發效率。可以把頁面抽象成多個相對獨立的模塊，解決了咱們傳統項目開發：效率低、難維護、複用性等問題。

使用Vue.extend方法建立一個組件，而後使用Vue.component方法註冊組件。子組件須要數據，能夠在props中接受定義。而子組件修改好數據後，想把數據傳遞給父組件。能夠採用emit方法

五、什麼是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 來統一管理。

六、你是怎麼認識vuex的？

答：vuex能夠理解爲一種開發模式或框架。好比PHP有thinkphp，java有spring等。
經過狀態（數據源）集中管理驅動組件的變化（比如spring的IOC容器對bean進行集中管理）。

應用級的狀態集中放在store中； 改變狀態的方式是提交mutations，這是個同步的事物； 異步邏輯應該封裝在action中。

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 能夠包含任意異步操做。

7.vue-loader是什麼？使用它的用途有哪些？

答：解析.vue文件的一個加載器，跟template/js/style轉換成js模塊。

用途：js能夠寫es六、style樣式能夠scss或less、template能夠加jade等

8.請說出vue.cli項目中src目錄每一個文件夾和文件的用法？

答：assets文件夾是放靜態資源；components是放組件；router是定義路由相關的配置;view視圖；app.vue是一個應用主組件；main.js是入口文件

九、vue-router是什麼？它有哪些組件？

答：vue用來寫路由一個插件。router-link、router-view

十、怎麼定義vue-router的動態路由？怎麼獲取傳過來的動態參數？
答：在router目錄下的index.js文件中，對path屬性加上/:id。 使用router對象的params.id

11.vue-router有哪幾種導航鉤子？

答：三種，一種是全局導航鉤子：router.beforeEach(to,from,next)，做用：跳轉前進行判斷攔截。第二種：組件內的鉤子；第三種：單獨路由獨享組件

十二、active-class是哪一個組件的屬性？嵌套路由怎麼定義？
答：vue-router模塊的router-link組件。

1三、scss是什麼？在vue.cli中的安裝使用步驟是？有哪幾大特性？

答：css的預編譯。

使用步驟：

第一步：用npm 下三個loader（sass-loader、css-loader、node-sass）

第二步：在build目錄找到webpack.base.config.js，在那個extends屬性中加一個拓展.scss

第三步：仍是在同一個文件，配置一個module屬性

第四步：而後在組件的style標籤加上lang屬性 ，例如：lang=」scss」

有哪幾大特性:

一、能夠用變量，例如（$變量名稱=值）；

二、能夠用混合器，例如（）

三、能夠嵌套

1四、vue.cli中怎樣使用自定義的組件？有遇到過哪些問題嗎？

第一步：在components目錄新建你的組件文件（indexPage.vue），script必定要export default {}

第二步：在須要用的頁面（組件）中導入：import indexPage from '@/components/indexPage.vue'

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

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

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

1五、v-show和v-if指令的共同點和不一樣點

• v-show指令是經過修改元素的display的CSS屬性讓其顯示或者隱藏
• v-if指令是直接銷燬和重建DOM達到讓元素顯示和隱藏的效果

1六、如何讓CSS只在當前組件中起做用

將當前組件的<style>修改成<style scoped>

1七、<keep-alive></keep-alive>的做用是什麼?

<keep-alive></keep-alive> 包裹動態組件時，會緩存不活動的組件實例，主要用於保留組件狀態或避免從新渲染。

1八、爲何使用key？

當有相同標籤名的元素切換時，須要經過 key 特性設置惟一的值來標記以讓 Vue 區分它們，不然 Vue 爲了效率只會替換相同標籤內部的內容。

1九、爲何避免 v-if 和 v-for 用在一塊兒

當 Vue 處理指令時，v-for 比 v-if 具備更高的優先級，經過v-if 移動到容器元素，不會再重複遍歷列表中的每一個值。取而代之的是，咱們只檢查它一次，且不會在 v-if 爲否的時候運算 v-for。

20、VNode是什麼？虛擬 DOM是什麼？

Vue在 頁面上渲染的節點，及其子節點稱爲「虛擬節點 (Virtual Node)」，簡寫爲「VNode」。「虛擬 DOM」是由 Vue 組件樹創建起來的整個 VNode 樹的稱呼

2一、在Vue中使用插件的步驟

1. 採用ES6的import ... from ...語法或CommonJSd的require()方法引入插件
2. 使用全局方法Vue.use( plugin )使用插件,能夠傳入一個選項對象Vue.use(MyPlugin, { someOption: true })