1 計(jì)算屬性computed和watch和methods的區(qū)別

計(jì)算屬性和方法確實(shí)能達(dá)到相同的結(jié)果，但是計(jì)算屬性是基于響應(yīng)式依賴進(jìn)行緩存的。只要相關(guān)響應(yīng)式依賴發(fā)生變化時(shí)他們才重新求值。這就意味著只要依賴沒有發(fā)生變化，多次訪問計(jì)算屬性會(huì)立即返回之前的結(jié)果，而不必再次執(zhí)行函數(shù)。相反的每次重新渲染的時(shí)候，調(diào)用方法總會(huì)再次執(zhí)行

計(jì)算屬性和watch的區(qū)別

計(jì)算屬性默認(rèn)首次會(huì)觸發(fā)，計(jì)算屬性性能較高，因?yàn)橛?jì)算屬性是根據(jù)依賴進(jìn)行改變的，依賴沒有變化計(jì)算屬性就會(huì)用上一次計(jì)算后的緩存立即返回結(jié)果。必須在模板渲染的時(shí)候調(diào)用才生效，一般適合做篩選。watch數(shù)據(jù)觀測(cè)默認(rèn)首次不觸發(fā)，只有數(shù)據(jù)發(fā)生變化時(shí)才會(huì)觸發(fā)。可以不在模板渲染時(shí)生效，只是單純的觀測(cè)data選項(xiàng)中的一個(gè)數(shù)據(jù)名。一般適合需要在數(shù)據(jù)變化時(shí)執(zhí)行異步操作或開銷過大的操作。

2 生命周期

Vue生命周期分為8個(gè)階段，創(chuàng)建前后，掛載前后，更新前后，銷毀前后

beforecreate：Vue的實(shí)例VM中$el和data都未初始化，都是undefined。

created：完成了data的初始化，但el還未初始化。

beforemount：完成了data和$el的初始化，進(jìn)行相關(guān)的render函數(shù)的首次調(diào)用。實(shí)例已經(jīng)完成編譯模板，把data里面的數(shù)據(jù)和模板生成HTML，但沒有掛載到真實(shí)dom,只是掛在虛擬dom上。

mouted:用上面編譯好的HTML內(nèi)容替換el屬性指向的dom對(duì)象。完成模板中HTML渲染到HTML頁面中。

beforeupdate：在數(shù)據(jù)更新之前調(diào)用，發(fā)生在虛擬dom重新渲染和打補(bǔ)丁之前，可以在這個(gè)鉤子函數(shù)里面進(jìn)一步更改狀態(tài)，不會(huì)觸發(fā)附加的重新渲染過程。

updatad:在數(shù)據(jù)更改導(dǎo)致虛擬dom重新渲染和打補(bǔ)丁之后調(diào)用。調(diào)用的時(shí)候組件dom已經(jīng)更新，所以可以執(zhí)行依賴于dom的操作。但是應(yīng)該避免在此狀態(tài)下更新狀態(tài)，因?yàn)榭赡茉斐筛聼o線循環(huán)。

beforedestory:實(shí)例銷毀之前，實(shí)例仍然可用

destoryed:在實(shí)例銷毀之后調(diào)用。調(diào)用后，所有的事件監(jiān)聽和子實(shí)例也會(huì)被銷毀。

3 組件通訊

父到子

子組件通過props接收父組件的傳值

子組件向父組件通訊

父組件向子組件傳遞事件方法，子組件通過$emit觸發(fā)事件，回調(diào)給父組件

兄弟組件通訊：

可以實(shí)例一個(gè)bus作為媒介，要相互通訊的兄弟組件之中，都引入bus，然后通過分別調(diào)用bus事件觸發(fā)和監(jiān)聽來實(shí)現(xiàn)通訊和參數(shù)傳遞

4 vuex

vuex就是一個(gè)倉庫，倉庫存放了很多對(duì)象，其中state就是數(shù)據(jù)源存放地，對(duì)應(yīng)一般Vue中的data數(shù)據(jù)。state里面存放的數(shù)據(jù)是響應(yīng)式的，Vue組件從store讀取數(shù)據(jù)，如果store中的數(shù)據(jù)發(fā)生變化，則依賴這些數(shù)據(jù)的組件也會(huì)發(fā)生更新。

vuex有5個(gè)屬性，state，action，mutation,,getter,modual

state:vuex使用單一的狀態(tài)樹，即每個(gè)應(yīng)用僅僅包含一個(gè)store。存放的數(shù)據(jù)狀態(tài)，不可以直接修改里面的數(shù)據(jù)。

action：主要是業(yè)務(wù)處理，異步操作數(shù)據(jù)。用this.$store.dispatch將函數(shù)類型和負(fù)載傳給mutation

mutation:是同步的，主要是拿到公共數(shù)據(jù)和負(fù)載進(jìn)行突變

getters:類似Vue中計(jì)算屬性，主要過濾一些數(shù)據(jù)

module：由于單一的狀態(tài)樹，應(yīng)用的所有狀態(tài)都會(huì)集中到一個(gè)比較大的對(duì)象中。當(dāng)應(yīng)用變的比較復(fù)雜時(shí)，store對(duì)象就有可能變得十分臃腫。所以vuex允許將store分割成模塊，每個(gè)模塊都有自己的action，mutation，state，getter

5 雙向綁定的原理

主要是采用數(shù)據(jù)劫持和訂閱發(fā)布的模式實(shí)現(xiàn)的。通過object.defineProperty來劫持各個(gè)屬性的getter,setter,在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)響應(yīng)的監(jiān)聽回調(diào)。

6 Vue-router的原理

vue-router通過hash與History interface兩種方式實(shí)現(xiàn)前端路由，更新視圖但不重新請(qǐng)求頁面”。選擇mode類型之后，程序會(huì)根據(jù)你選擇的mode 類型創(chuàng)建不同的history對(duì)象(HashHistory或HTML5History或AbstractHistory)。

HashHistory可以通過push和replace來跳轉(zhuǎn)頁面，push是向history添加一條記錄，瀏覽器可以前進(jìn)后退，replace是替換當(dāng)前路由，并沒有向history添加新紀(jì)錄，所以沒有前進(jìn)和后退。

History interface是瀏覽器歷史記錄棧提供的接口，通過back(), forward(), go()等方法，我們可以讀取瀏覽器歷史記錄棧的信息，進(jìn)行各種跳轉(zhuǎn)操作。