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

計算屬性和方法確實能達到相同的結果捎迫，但是計算屬性是基于響應式依賴進行緩存的统刮。只要相關響應式依賴發(fā)生變化時他們才重新求值。這就意味著只要依賴沒有發(fā)生變化污抬，多次訪問計算屬性會立即返回之前的結果汞贸，而不必再次執(zhí)行函數(shù)绳军。相反的每次重新渲染的時候，調用方法總會再次執(zhí)行

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

計算屬性默認首次會觸發(fā)矢腻，計算屬性性能較高门驾，因為計算屬性是根據(jù)依賴進行改變的，依賴沒有變化計算屬性就會用上一次計算后的緩存立即返回結果多柑。必須在模板渲染的時候調用才生效奶是，一般適合做篩選。watch數(shù)據(jù)觀測默認首次不觸發(fā)竣灌，只有數(shù)據(jù)發(fā)生變化時才會觸發(fā)聂沙。可以不在模板渲染時生效初嘹，只是單純的觀測data選項中的一個數(shù)據(jù)名及汉。一般適合需要在數(shù)據(jù)變化時執(zhí)行異步操作或開銷過大的操作。

2 生命周期

Vue生命周期分為8個階段屯烦，創(chuàng)建前后坷随，掛載前后，更新前后驻龟，銷毀前后

beforecreate：Vue的實例VM中$el和data都未初始化温眉，都是undefined。

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

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

mouted:用上面編譯好的HTML內容替換el屬性指向的dom對象窃躲。完成模板中HTML渲染到HTML頁面中。

beforeupdate：在數(shù)據(jù)更新之前調用钦睡，發(fā)生在虛擬dom重新渲染和打補丁之前蒂窒，可以在這個鉤子函數(shù)里面進一步更改狀態(tài)，不會觸發(fā)附加的重新渲染過程荞怒。

updatad:在數(shù)據(jù)更改導致虛擬dom重新渲染和打補丁之后調用洒琢。調用的時候組件dom已經(jīng)更新，所以可以執(zhí)行依賴于dom的操作褐桌。但是應該避免在此狀態(tài)下更新狀態(tài)衰抑，因為可能造成更新無線循環(huán)。

beforedestory:實例銷毀之前荧嵌，實例仍然可用

destoryed:在實例銷毀之后調用呛踊。調用后砾淌，所有的事件監(jiān)聽和子實例也會被銷毀。

3 組件通訊

父到子

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

子組件向父組件通訊

父組件向子組件傳遞事件方法谭网，子組件通過$emit觸發(fā)事件汪厨，回調給父組件

兄弟組件通訊：

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

4 vuex

vuex就是一個倉庫，倉庫存放了很多對象锥涕，其中state就是數(shù)據(jù)源存放地要拂，對應一般Vue中的data數(shù)據(jù)。state里面存放的數(shù)據(jù)是響應式的站楚，Vue組件從store讀取數(shù)據(jù)脱惰，如果store中的數(shù)據(jù)發(fā)生變化，則依賴這些數(shù)據(jù)的組件也會發(fā)生更新窿春。

vuex有5個屬性拉一，state，action旧乞，mutation,,getter,modual

state:vuex使用單一的狀態(tài)樹蔚润，即每個應用僅僅包含一個store。存放的數(shù)據(jù)狀態(tài)尺栖，不可以直接修改里面的數(shù)據(jù)嫡纠。

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

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

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

module：由于單一的狀態(tài)樹挫以，應用的所有狀態(tài)都會集中到一個比較大的對象中者蠕。當應用變的比較復雜時，store對象就有可能變得十分臃腫掐松。所以vuex允許將store分割成模塊踱侣，每個模塊都有自己的action，mutation大磺，state抡句，getter

5 雙向綁定的原理

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

6 Vue-router的原理

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

HashHistory可以通過push和replace來跳轉頁面袭灯，push是向history添加一條記錄刺下，瀏覽器可以前進后退，replace是替換當前路由稽荧，并沒有向history添加新紀錄橘茉，所以沒有前進和后退。

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