1、beforeCreate

實(shí)例創(chuàng)建之前

  <div id="app">{{name}}</div>
  <script>
    let app = new Vue({
      el:"#app",
        data:{
         name:"vue"
      },
      beforeCreate(){
         console.log('即將創(chuàng)建');
         console.log(this.$data);
         console.log(this.$el);
      }
    });
 </script>

結(jié)果

實(shí)例中‘$data’和‘$el’是不可用的。

2、created

 created(){
    console.log('創(chuàng)建完畢');
    console.log(this.$data);
    console.log(this.$el);
 }
 

結(jié)果

實(shí)例已完成以下的配置：數(shù)據(jù)觀測 (data observer)，屬性和方法的運(yùn)算，watch/event 事件回調(diào)。然而，掛載階段還沒開始，$el 屬性目前不可見。

3、beforeMount

 beforeMount(){
    console.log('即將掛載');
    console.log(this.$el);
 }

結(jié)果

在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用。

4、mounted

mounted也就是掛載完畢階段，到了這個(gè)階段，數(shù)據(jù)就會(huì)被成功渲染出來

 mounted(){
    console.log('掛載完畢');
    console.log(this.$el);
 }
 

el 被新創(chuàng)建的 vm.$el 替換，并掛載到實(shí)例上去之后調(diào)用該鉤子。如果 root 實(shí)例掛載了一個(gè)文檔內(nèi)元素，當(dāng) mounted 被調(diào)用時(shí) vm.$el 也在文檔內(nèi)。

注意 mounted 不會(huì)承諾所有的子組件也都一起被掛載。如果你希望等到整個(gè)視圖都渲染完畢，可以用 vm.$nextTick 替換掉 mounted：

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

5、beforeUpdate

數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬 DOM 打補(bǔ)丁之前。這里適合在更新之前訪問現(xiàn)有的 DOM，比如手動(dòng)移除已添加的事件監(jiān)聽器。當(dāng)修改vue實(shí)例的data時(shí)，vue就會(huì)自動(dòng)幫我們更新渲染視圖，在這個(gè)過程中，vue提供了beforeUpdate的鉤子給我們，在檢測到我們要修改數(shù)據(jù)的時(shí)候，更新渲染視圖之前就會(huì)觸發(fā)鉤子beforeUpdate。

<div ref="app" id="app">
    {{name}}
 </div>

 beforeUpdate(){
  console.log('=即將更新渲染=');
  let name = this.$refs.app.innerHTML;
  console.log('name:'+name);
 },

改變name的值，在更新渲染之前，我們打印視圖中文本innerHTML的內(nèi)容會(huì)是vue

6. updated

此階段為更新渲染視圖之后，此時(shí)再讀取視圖上的內(nèi)容，已經(jīng)是最新的內(nèi)容，接著上面的案例，我們添加鉤子updated的代碼，如下：

 updated(){
  console.log('==更新成功==');
  let name = this.$refs.app.innerHTML;
  console.log('name:'+name);
 }
 

當(dāng)這個(gè)鉤子被調(diào)用時(shí)，組件 DOM 已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。然而在大多數(shù)情況下，你應(yīng)該避免在此期間更改狀態(tài)。如果要相應(yīng)狀態(tài)改變，通常最好使用計(jì)算屬性或 watcher 取而代之。
注意 updated 不會(huì)承諾所有的子組件也都一起被重繪。如果你希望等到整個(gè)視圖都重繪完畢，可以用 vm.$nextTick 替換掉 updated：

updated: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been re-rendered
  })
}

7、 activated

keep-alive 組件激活時(shí)調(diào)用。

8、deactivated

keep-alive 組件停用時(shí)調(diào)用。

9、 beforeDestroy

銷毀當(dāng)前的組件，在銷毀前，會(huì)觸發(fā)beforeDestroy鉤子。

10、 destroyed

Vue 實(shí)例銷毀后調(diào)用。調(diào)用后，Vue 實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀。

vue生命周期可以參考下圖

lifecycle