vue.js生命周期的了解

每個 Vue 執行個體在被建立之前都要經過一系列的初始化過程。例如，執行個體需要配置資料觀測(data observer)、編譯模版、挂載執行個體到 DOM ，然後在資料變化時更新 DOM 。在這個過程中，執行個體也會調用一些 生命周期鈎子

，這就給我們提供了執行自定義邏輯的機會。例如，created 這個鈎子在執行個體被建立之後被調用：

<script>
        var vm = new Vue({
          data: {
            a: 
          },
          created: function () {
            // `this` 指向 vm 執行個體
            console.log('a is: ' + this.a)
          }
        })
        // -> "a is: 1"
</script>
           

也有一些其它的鈎子，在執行個體生命周期的不同階段調用，如 mounted、updated、destroyed。鈎子的 this 指向調用它的 Vue 執行個體

下面展示的是執行個體的生命周期圖

1. beforeCreate

類型：Function

在執行個體初始化之後，資料觀測(data observer) 和 event/watcher 事件配置之前被調用。

1. created

類型：Function

執行個體已經建立完成之後被調用。在這一步，執行個體已完成以下的配置：資料觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，挂載階段還沒開始，$el 屬性目前不可見。

1. beforeMount

   類型：Function

   在挂載開始之前被調用：相關的 render 函數首次被調用。

   該鈎子在伺服器端渲染期間不被調用。

2. mounted

類型：Function

el 被新建立的 vm.el替換，并挂載到執行個體上去之後調用該鈎子。如果root執行個體挂載了一個文檔内元素，當mounted被調用時vm.el 也在文檔内。

該鈎子在伺服器端渲染期間不被調用。

1. beforeUpdate

   類型：Function

   資料更新時調用，發生在虛拟 DOM 重新渲染和打更新檔之前。

你可以在這個鈎子中進一步地更改狀态，這不會觸發附加的重渲染過程。

該鈎子在伺服器端渲染期間不被調用。

1. update

類型：Function

由于資料更改導緻的虛拟 DOM 重新渲染和打更新檔，在這之後會調用該鈎子。

當這個鈎子被調用時，元件 DOM 已經更新，是以你現在可以執行依賴于 DOM 的操作。然而在大多數情況下，你應該避免在此期間更改狀态。如果要相應狀态改變，通常最好使用計算屬性或 watcher 取而代之。

該鈎子在伺服器端渲染期間不被調用。

1. activated

   類型：Function

   keep-alive 元件激活時調用。

   該鈎子在伺服器端渲染期間不被調用。

2. deactivated

類型：Function

keep-alive 元件停用時調用。

該鈎子在伺服器端渲染期間不被調用。

1. beforeDestory

   類型：Function

   執行個體銷毀之前調用。在這一步，執行個體仍然完全可用。

   該鈎子在伺服器端渲染期間不被調用。

2. destoryed

類型：Function

Vue 執行個體銷毀後調用。調用後，Vue 執行個體訓示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子執行個體也會被銷毀。

該鈎子在伺服器端渲染期間不被調用。