vue常見面試題附答案

一、Vue的生命周期的理解

beforeCreate（創(chuàng)建前）在數(shù)據(jù)觀測和初始化大事還未開頭。

created（創(chuàng)建后）完成數(shù)據(jù)觀測，屬性和方法的運算，初始化大事，$el屬性還沒有顯示出來。

beforeMount（載入前）在掛載開頭之前被調(diào)用，相關(guān)的render函數(shù)首次被調(diào)用。實例已完成以下的配置：編譯模板，把data里面的數(shù)據(jù)和模板生成html。留意此時還沒有掛載html到頁面上。

mounted（載入后）在el被新創(chuàng)建的vm.$el替換，并掛載到實例上去之后調(diào)用。實例已完成以下的配置：用上面編譯好的html內(nèi)容替換el屬性指向的DOM對象。完成模板中的html渲染到html頁面中。此過程中進行ajax交互。

beforeUpdate（更新前）在數(shù)據(jù)更新之前調(diào)用，發(fā)生在虛擬DOM重新渲染和打補丁之前?？梢栽谠撱^子中進一步地更改狀態(tài)，不會觸發(fā)附加的重渲染過程。

d（更新后）在由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補丁之后調(diào)用。調(diào)用時，組件DOM已經(jīng)更新，所以可以執(zhí)行依靠于DOM的操作。然而在大多數(shù)狀況下，應(yīng)當(dāng)避開在此期間更改狀態(tài)，由于這可能會導(dǎo)致更新無限循環(huán)。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

beforeDestroy（銷毀前）在實例銷毀之前調(diào)用。實例仍舊完全可用。

destroyed（銷毀后）在實例銷毀之后調(diào)用。調(diào)用后，全部的大事監(jiān)聽器會被移除，全部的子實例也會被銷毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

a、第一次頁面加載會觸發(fā)哪幾個鉤子？

會先后觸發(fā)beforeCreate，created，beforeMount，mounted。

b、DOM渲染在哪個周期中就已經(jīng)完成

DOM渲染在mounted中就已經(jīng)完成了。

二、Vue實現(xiàn)數(shù)據(jù)雙向綁定的原理

vue實現(xiàn)數(shù)據(jù)雙向綁定主要是：采納數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty（）來劫持各個屬性的setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)監(jiān)聽回調(diào)。

當(dāng)把一個一般Javascript對象傳給Vue實例來作為它的data選項時，Vue將遍歷它的屬性，用Object.defineProperty將它們轉(zhuǎn)為getter/setter。用戶看不到getter/setter，但是在內(nèi)部它們讓Vue追蹤依靠，在屬性被訪問和修改時通知變化。

vue的數(shù)據(jù)雙向綁定將MVVM作為數(shù)據(jù)綁定的入口，整合Observer，Compile和Watcher三者，通過Observer來監(jiān)聽自己的model的數(shù)據(jù)變化，通過Compile來解析編譯模板指令（vue中是用來解析{{}}），最終利用watcher搭起observer和Compile之間的通信橋梁，達(dá)到數(shù)據(jù)變化—視圖更新；視圖交互變化（input）—數(shù)據(jù)model變更雙向綁定效果。

三、Vue組件間的參數(shù)傳遞

常見傳參方式

父組件向子組件傳值：

1）子組件在props中創(chuàng)建一個屬性，用來接收父組件傳過來的值；

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

3）在子組件標(biāo)簽中添加子組件props中創(chuàng)建的屬性；

4）把需要傳給子組件的值賦給該屬性；子組件傳給父組件：

$emit方法傳遞參數(shù)。

四、vue中keep-alive的作用。

是Vue內(nèi)置的一個組件，可以使被包含的組件保留狀態(tài)，或避開重新渲染。

五、vue的指令有哪些？

v-text，v-html，v-once，v-show，v-if，v-for，v-bind，v-model，自定義指令。

六、v-for中為什么使用key？

使用v-for更新已渲染的元素列表時，默認(rèn)用就地復(fù)用策略；列表數(shù)據(jù)修改的時候，他會依據(jù)key值去推斷某個值是否修改，假如修改，則重新渲染這一項，否則復(fù)用之前的元素；（由于VirtualDOM使用Diff算法實現(xiàn)的緣由）。

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

v-show指令是通過修改元素的display的CSS屬性讓其顯示或者隱蔽。

v-if令是直接銷毀和重建DOM達(dá)到讓元素顯示和隱蔽的效果。

八、如何讓CSS只在當(dāng)前組件中起作用

將當(dāng)前組件的style修改為stylescoped

九、封裝組件步驟

1.建立組件的模板，先把架子搭起來，寫寫樣式，考慮好組件的基本規(guī)律。

2.預(yù)備好組件的數(shù)據(jù)輸入。即分析好規(guī)律，定好props里面的數(shù)據(jù)、類型。

3.預(yù)備好組件的數(shù)據(jù)輸出。即依據(jù)組件規(guī)律，做好要暴露出來的方法。

4.封裝完畢了，直接調(diào)用即可。

十、引入組件的步驟

1.采納ES6的import...from...語法或CommonJS的require（）方法引入組件

2.對組件進行注冊

3.使用組件my-ponent/my-ponent

十一、vuex有哪幾種屬性？

State、Getter、Mutation、Action、Module

state=基本數(shù)據(jù)（數(shù)據(jù)源存放地）。

getters=從基本數(shù)據(jù)派生出來的數(shù)據(jù)。

mutations=提交更改數(shù)據(jù)的方法，同步。

actions=像一個裝飾器，包裹mutations，使之可以異步。

modules=模塊化Vuex。

Mutations的更改是同步更改，用于用戶執(zhí)行直接數(shù)據(jù)更改，this.$store.mit（‘名’）觸發(fā)

Actions的更改是異步操作，用于需要與后端交互的數(shù)據(jù)更改，this.$store.dispath（“名”）觸發(fā)

留意：