一、VUE有哪些生命週期的鉤子，分別能起什麼作用？

   Vue算起來總共有八個生命週期的鉤子，分別是：

   1.beforeCreate：在例項初始化之後，資料觀測 (data observer) 和 event/watcher 事件配置之前被呼叫。什麼意思呢？就是在這個階段，Vue例項被建立，但是還沒有在Vue例項物件裡新增像data，methods等一些物件屬性，就是這些還沒被初始化。也還沒有被掛載到DOM物件上。

     通常在這個鉤子裡會做一些loading事件

  2.created：資料繫結和事件監聽初始化完成，但還沒有完成掛載。就是說現在頁面上還沒有內容，Vue例項物件已經建立完成，屬性和方法什麼的都有了。

     通常會在這個階段去向後臺請求渲染頁面需要的資源。

另外在第2步和第3步中間，Vue會執行compile函式，去編譯模板。說白了就是根據<template>標籤的HTML結構來建立虛擬DOM。

  3.beforeMount，在掛載開始之前被呼叫。在這個階段，Vue已經將虛擬DOM繪製在頁面上，但是資料的渲染還沒做。就是說，現在已經可以訪問到$el了，但是訪問到的會是像這樣

<p>{{message}}</p>

   而且還要注意，在這個階段裡，最好不要去操作$el或$refs繫結的DOM物件。因為這個階段是Vue去標記這些DOM節點的時候，去操作的話可能會發生意想不到的錯誤。

   4.mounted:掛載完成。就是頁面已經渲染好了。但是要注意的是，不能保證子元件也已經掛載完成，因此官方文件中推薦，如果希望整個頁面包括子元件都渲染完成，可以使用$nextTick鉤子。

     另外，如果想要在js中去操作DOM元素，也可以在這個階段去做。

  5.beforeUpdata：資料更新時呼叫，發生在虛擬 DOM 打補丁之前。這裡適合在更新之前訪問現有的 DOM，      比如手動移除已新增的事件監聽器。

  6.updataed：當這個鉤子被呼叫時，元件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。就是說如果更改繫結的資料，重新渲染DOM，那麼這個鉤子中的函式會在DOM渲染完成後去執行。

    跟mounted一樣，Vue不保證子元件也能夠滿足上述條件，因此使用$nextTick會更安全一些。

  7.beforeDestroy：例項銷燬之前呼叫。在這一步，例項仍然完全可用。

  8.destroyed：Vue 例項銷燬後呼叫。呼叫後，Vue 例項指示的所有東西都會解繫結，所有的事件監聽器會被移     除，所有的子例項也會被銷燬。

  除了以上八個生命週期的鉤子函式，Vue還提供了三個用於元件和錯誤相關的鉤子

    1.activated：keep-alive 元件啟用時呼叫。

    2.deactivated：keep-alive 元件停用時呼叫。

    3.errorCaptured：當捕獲一個來自子孫元件的錯誤時被呼叫。此鉤子會收到三個引數：錯誤物件、發生錯誤的元件例項以及一個包含錯誤來源資訊的字串。此鉤子可以返回 false 以阻止該錯誤繼續向上傳播。

二、Vue 如何實現元件通訊

   這個可以分為三種方法：

   1.父子元件間通訊：一般父元件向子元件傳遞資料會使用props。比如像這樣

父元件：
<V-child :someData="propsData"></V-child>
propsData是定義在父元件data中的一個物件

然後在子元件的props屬性中應該這樣寫
props:{
  someData:{
     type:Object,
     default:{
       ....
     }
   }
}

需要注意的是，例子中的子元件接收的someData物件中的type屬性是指 指定的物件，如果不是指定的Object物件，就不會接收，而是使用default中定義的預設值。

另外，使用props傳遞資料是單向的。子元件如果要向父元件傳遞資料，要使用$emit和$on。舉個例子

在父元件中，
不管在模板裡或是JS程式碼裡，
比如在模板的標籤裡，用v-on來監聽一個事件
<Vchild @on-change="doSomething($event)"></Vchild>
doSomething($event)是定義在父元件methods裡的一個函式，引數$event用來接收子元件傳上的引數。

在子元件中
比如mothods中任意一個方法裡去呼叫
this.$emit('on-change',向上傳遞的資料)

   2.非父子元件間通訊

     非父子元件比如兄弟元件或是其他不同層級的元件間要實現通訊，同理也是使用$on和$emit.

首先要先定義一個事件巴士，
var bass = new Vue()
然後在A元件中監聽相關事件
bass.$on('doSomething',function(){
    ....
})

在B元件中去執行該事件
bass.$emit('doSomething',傳遞的引數)

   3.使用Vuex作為資料中心。

三、Vue的雙向資料繫結實現原理

VUE主要是使用資料劫持和釋出-訂閱模式來實現雙向資料繫結的。

主要做了下面三個工作：

1、實現一個數據監聽器Observer，能夠對資料物件的所有屬性進行監聽，如有變動可拿到最新值並通知訂閱者
2、實現一個指令解析器Compile，對每個元素節點的指令進行掃描和解析，根據指令模板替換資料，以及繫結相應的更新函式
3、實現一個Watcher，作為連線Observer和Compile的橋樑，能夠訂閱並收到每個屬性變動的通知，執行指令繫結的相應回撥函式

四、computed和watch的區別

1.computed不能監聽data中定義的屬性。一般使用來監聽一個模板中的變數，該變數依賴於data中的屬性，當data屬性有變化，能響應式的執行回撥。

2.computed有快取。計算屬性是基於他們的依賴進行快取的。可以看成是一個getter，又有區別。就是當依賴沒有變化而去訪問了計算屬性時，不會執行回撥，而是返回之前的計算結果。

而watch每次都會重新計算。

3.watch通常用來執行比較大開銷的操作。