淺談vue 的生命週期

 vue 是一套用於構建用戶界面的是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計爲可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。vue 與傳統的mvvm 框架相比，有比較好的優勢。

vue 官網文檔：https://cn.vuejs.org/

vue 具有的良好的擴展性 

ivew  作爲vue  的一個強大 UI 組件庫 極大方便了 vue.js  的使用，目前已經更新到3.x

ivew 3.x 官網：https://www.iviewui.com/

ivew 2.x 官網： http://v2.iviewui.com/

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。

Vuex  官網： https://vuex.vuejs.org/zh/

有興趣的同學可以自己好好研究一下，vue 官網提供了包括中文在內的多種語言，非常的貼心啊

好了，廢話不多說，我們進入主題，來簡單看看vue 的生命週期

下圖vue 官網提供的生命週期圖，官網提供的是英文，爲此我在其他的博客中找到了，帶註釋的圖，再次爲提供本圖的作者表示感謝！

我們先來把生命週期鉤子都列出來，如下表

2.x	所有的生命週期鉤子自動綁定 this 上下文到實例中，因此你可以訪問數據，對屬性和方法進行運算。這意味着你不能使用箭頭函數來定義一個生命週期方法 (例如 created: () => this.fetchTodos())。這是因爲箭頭函數綁定了父上下文，因此 this 與你期待的 Vue 實例不同，this.fetchTodos 的行爲未定義。
beforeCreate	在實例初始化之後，數據觀測 (data observer) 和 event/watcher 事件配置之前被調用。
created	在實例創建完成後被立即調用。在這一步，實例已完成以下的配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。
beforeMount	在掛載開始之前被調用：相關的 render 函數首次被調用。 該鉤子在服務器端渲染期間不被調用。
mounted	el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用該鉤子。如果 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。 注意 mounted 不會承諾所有的子組件也都一起被掛載。如果你希望等到整個視圖都渲染完畢，可以用 vm.$nextTick 替換掉 mounted： mounted: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been rendered }) } 該鉤子在服務器端渲染期間不被調用。
beforeUpdate	數據更新時調用，發生在虛擬 DOM 打補丁之前。這裏適合在更新之前訪問現有的 DOM，比如手動移除已添加的事件監聽器。 該鉤子在服務器端渲染期間不被調用，因爲只有初次渲染會在服務端進行。
updated	由於數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之後會調用該鉤子。 當這個鉤子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。然而在大多數情況下，你應該避免在此期間更改狀態。如果要相應狀態改變，通常最好使用計算屬性或 watcher 取而代之。 注意 updated 不會承諾所有的子組件也都一起被重繪。如果你希望等到整個視圖都重繪完畢，可以用 vm.$nextTick 替換掉 updated： updated: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been re-rendered }) } 該鉤子在服務器端渲染期間不被調用。
activated	keep-alive 組件激活時調用。 該鉤子在服務器端渲染期間不被調用。
deactivated	keep-alive 組件停用時調用。 該鉤子在服務器端渲染期間不被調用。
beforeDestroy	實例銷燬之前調用。在這一步，實例仍然完全可用。 該鉤子在服務器端渲染期間不被調用。
destroyed	Vue 實例銷燬後調用。調用後，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷燬。 該鉤子在服務器端渲染期間不被調用。
新增一個errorCaptured  詳見vue.js  的API 文檔  （選擇/生命週期鉤子）

---

我們將通過下面這個例子來看這些鉤子函數的執行情況。

---

<template>
  <div id="app">
    <h1>{{message}}</h1>
  </div>
</template>

<script>
    export default {
        name: "page8",
      data(){
          return{
            message: 'Vue的生命週期'
          }
      },
      beforeCreate: function() {
        console.group('------beforeCreate創建前狀態------');
        console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
        console.log("%c%s", "color:red","data   : " + this.$data); //undefined
        console.log("%c%s", "color:red","message: " + this.message)
      },
      created: function() {
        console.group('------created創建完畢狀態------');
        console.log("%c%s", "color:red","el     : " + this.$el); //undefined
        console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
        console.log("%c%s", "color:red","message: " + this.message); //已被初始化
      },
      beforeMount: function() {
        console.group('------beforeMount掛載前狀態------');
        console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
        console.log(this.$el);
        console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
        console.log("%c%s", "color:red","message: " + this.message); //已被初始化
      },
      mounted: function() {
        console.group('------mounted 掛載結束狀態------');
        console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
        console.log(this.$el);
        console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
        console.log("%c%s", "color:red","message: " + this.message); //已被初始化
      },
      beforeUpdate: function () {
        console.group('beforeUpdate 更新前狀態===============》');
        console.log("%c%s", "color:red","el     : " + this.$el);
        console.log(this.$el);
        console.log("%c%s", "color:red","data   : " + this.$data);
        console.log("%c%s", "color:red","message: " + this.message);
      },
      updated: function () {
        console.group('updated 更新完成狀態===============》');
        console.log("%c%s", "color:red","el     : " + this.$el);
        console.log(this.$el);
        console.log("%c%s", "color:red","data   : " + this.$data);
        console.log("%c%s", "color:red","message: " + this.message);
      },
      beforeDestroy: function () {
        console.group('beforeDestroy 銷燬前狀態===============》');
        console.log("%c%s", "color:red","el     : " + this.$el);
        console.log(this.$el);
        console.log("%c%s", "color:red","data   : " + this.$data);
        console.log("%c%s", "color:red","message: " + this.message);
      },
      destroyed: function () {
        console.group('destroyed 銷燬完成狀態===============》');
        console.log("%c%s", "color:red","el     : " + this.$el);
        console.log(this.$el);
        console.log("%c%s", "color:red","data   : " + this.$data);
        console.log("%c%s", "color:red","message: " + this.message)
      }
    }


</script>

<style scoped>

</style>

就寫到這裏吧

這個博友寫的也不錯可以參考 這個 https://segmentfault.com/a/1190000011381906