0%

[Vue] Vue 生命週期

發表於 更新於 分類於 Disqus：

在學 Vue 的初期不知道生命週期其實也沒什麼關係，不過隨著越學越進階，還是應該了解一下相關的知識比較好。

Vue 的生命週期

Vue 實例擁有一個完整的生命週期，過程中會執行一連串的工作，從開始「創建」、「初始化數據」、「Template 編譯模板」、「DOM 元素掛載」、「資料的渲染與更新」和「卸載」等過程，我們統稱為 Vue 實例的生命週期。
官方生命週期示意圖

在 HTML 寫好元件模板

在 HTML 中用 x-template 先寫好一個模板，並且用 id 與 Vue 元件模板做綁定。

1
2
3
4
5
<script type="text/x-template" id="childarea">
  <div>
    <h4> Hello! {{ text }} </h4>
  </div>
</script>

Vue: 元件與 hook

hook 是什麼

當 Vue 生命週期到特定的點的時候，就會觸發相對應的鉤子 (hook)。

較重要的 hook 有下列這些：

  • beforeCreate(): Vue 開始運行，但還沒讀到資料
  • created(): 建立數據觀測，要進行 AJAX 至少從這一個階段開始
  • beforeMount(): 準備開始編譯 Vue 的元件模板
  • mounted(): 模板建立完成，已掛載到 HTML DOM，要操作 DOM 元素要從這裡開始
  • updated(): 如果有用 v-model 的話，在網頁上更改資料就會連動到 Vue Model，此時這種更新資料的行為就會觸發這個 hook
  • activated(): 使用 <keepalive> 的元件在渲染時觸發，下次再渲染時就會直接跳到這個 hook
  • deactivated(): 使用 <keepalive> 的元件在取消渲染時觸發，有這個 hook 就不會觸發銷毀系列的 hook
  • beforeDestroy(): 取消渲染元件時觸發 (例如用 v-if 控制渲染與否)
  • destroyed(): 元件銷毀完畢，之後如果要再次渲染元件，就會從 creation 階段開始

在元件內設定 hook

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const Child = {
  template: '#childarea',
  data: function () {
    return {
      text: 'Vue data 資料狀態'
    }
  }
  beforeCreate () {
    console.log(`beforeCreate! ${this.text}`);
  },
  ... // 以下依序為各個 hook
}

new Vue = {
  el: '#app',
  ...
}

mounted() 之後才會正確顯示 DOM 與資料

在一開始的 x-template 模板裡面，我們寫了一個 <h4>，它的內容要到 mounted() 階段後才會正確顯示「Hello! Vue data 資料狀態」，因為此時元件 DOM 與資料才會完整掛載在 Vue 實例上。

保留元件的資料狀態

前面有提到，在一般情況下，取消渲染（銷毀）元件後如果要再次渲染，生命週期會從 beforeCreate() 重新開始。但在有些情況下，我們希望能在下次渲染時保留之前的資料狀態，此時我們可以用 <keepalive> 標籤包住元件，來維持它的生命週期。

參考資料

「Vue.js 學習筆記 Day14」- Vue生命週期
官方文件：生命周期图示