Vue元件的生命週期

語法標籤

沒有keep-alive標籤的元件，資料不保留

如果該Vue元件沒有加上<keep-alive></keep-alive>標籤，
當該元件不被顯示的時候，就會執行beforeDestroy 和 destroyed 這兩個解構式
連帶的會將此次的在該元件上的資料全部消滅掉。
等到你下次又要調用該元件的時候，資料會是全新的，不會保留上一次的輸入內容。

有keep-alive標籤的元件，資料會保留

如果在這個Vue元件的外圍，加上<keep-alive></keep-alive>標籤，
此時，你的元件的hook事件會多兩個分別是activated和deactivated。
在你不顯示該元件的時候，該元件不會觸發beforeDestroy 和 destroyed 這兩個解構式
而是改為觸發deactived，且該元件的資料會被保留下來。
當你下次再使用該元件的時候，
不會再次觸發beforeCreate, created, beforeMount, mounted這些hook，
而是直接觸發actived這個hook，並直接呈現上一次的資料內容。

可以運用在頁籤上

這種技巧常會用在頁籤中，你只是想要切換頁面的內容，但並不想要把上一頁的內容
刪除掉，就可以為頁籤元件加上<keep-alive></keep-alive>標籤。

在元件被創建的時候，各個hook的階段狀態
ex:

---HTML---
<div id="app" class="text-center">
  <h3>Let's check out the lifecycle of this hur' child.</h3>
  <h4>Check the console!</h4>
  <button @click="toggleShow" class="btn btn-primary">
    <span v-if="isShowing">Hide child</span>
    <span v-else>Show child</span>
  </button>
  <hr>
  <keep-alive>
    <app-child v-if="isShowing"></app-child>
  </keep-alive>
</div>

---JavaScript---
<script type="text/x-template" id="childarea">
  <div>
    <h4>Hello! {{ text }}</h4>
    <input type="text" class="form-control" v-model="text">
  </div>
</script>

const Child = {
  template: '#childarea',
  data: function () {
    return {
      text: 'Vue data 資料狀態'
    }
  },
  beforeCreate() {  // 此時，元件剛創建，資料是還沒匯入的
    console.log(`beforeCreate! ${this.text}`);
  }, 
  created() { // 若要對資料做操作，必須要在created之後才能操作。
    alert(`created! ${this.text}`);
  }, 
  
  // 此時，瀏覽器在使用render function或el的template去做模板
  
  beforeMount() { // 此時，模版被建立完成但是還沒被掛載到HTML的DOM元素上
    alert(`beforeMount! ${this.text}`);
  }, 
  mounted() { // 在mounted完成後，模板才是真正被完整的掛載到HTML上，這個時候，就可以對HTML做操作，
    alert(`mounted! ${this.text}`); // 由此可知，要用JQuery對HTML的dom元素做操作，得等到這一步之後才能做。
  },
  
  // 此時，元件被建立完成，那元件會因為資料變動的關係而觸發beforeUpdate
  
  updated () { // 接著，在畫面完成繪製後，會觸發update事件
    console.log(`updated! ${this.text}`);
  },
  activated () {
    alert(`activated! ${this.text}`);
  },
  deactivated () {
    alert(`deactivated! ${this.text}`);
  },
  
  // 最後，當該元件要被消滅時，才會有可能觸發到beforeDestroy和destroyed這兩個事件。
  beforeDestroy() {
    console.log(`beforeDestroy! ${this.text}`);
  }, 
  destroyed() {
    console.log(`destroyed! ${this.text}`);
  }
};

new Vue({
  el: '#app',
  data() {
    return {
      isShowing: false 
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  },
  components: {
    appChild: Child
  }
});

沒有keep-alive標籤的元件差異

你會發現在沒有被<keep-alive></keep-alive>標籤包起來的元件的hook中，
是不會出現activated和deactivated這兩個hook的，
若有被<keep-alive></keep-alive>標籤包圍的元件，就會有以上這兩個hook。

單元小總結

1. 若你要使用AJAX，就是要操作資料的話，至少要等到created階段之後，才能操作。
2. 若你想要維持元件資料狀態，不想要觸發destroyed事件的話，就要用<keep-alive>標籤將該元件包起來。