Vue生命週期鉤子簡介

時間 2019-12-07

標籤 vue 生命週期鉤子簡介简体版

原文原文鏈接

做者：Nwose Lotanna
翻譯：瘋狂的技術宅html

原文：https://blog.logrocket.com/in...前端

未經容許嚴禁轉載vue

在本文中，咱們來學習可用於 Vue JS 工做流程的全部hooks。node

Vue

Vue JS 是一個很是先進的 JavaScript 框架，由尤雨溪和 Vue 核心團隊建立，超過 230 個開源社區愛好者貢獻了代碼。 Vue 的用戶超過 870,000 人，而且已經在 GitHub 上獲得了140,000 個star 🌟。它由一個僅關注視圖層的核心庫和對其提供支持的生態系統組成，可幫助你解決大型單頁應用程序的複雜性問題。git

在本文中，你將瞭解 Vue 實例從建立到銷燬的整個生命週期。程序員

在開始以前的準備工做

本文適用於全部使用 Vue JS 的開發人員，包括初學者。在閱讀本文以前，你應該具有一些前提條件。github

你將須要如下環境：面試

安裝 Node.js v10.x 或更高版本。你能夠經過在終端中運行如下命令來驗證是否須要進行升級：

node -v

安裝 node package manager 6.7 或更高版本（NPM）
強烈建議使用代碼編輯器：Visual Studio Code
把 Vue 的最新版本全局安裝在你的計算機上
在你的計算機上安裝 Vue CLI 3.0。安裝前請先卸載舊的CLI版本：

npm uninstall -g vue-cli

而後安裝新的：vue-cli

npm install -g @vue/cli

下載 Vue Mixins 入門項目，在這裏
解壓縮下載的項目
切換到解壓縮的文件目錄並運行命令以使全部依賴項保持最新：

npm install

Vue 實例

Vue 程序由用 new Vue 建立的根 Vue 實例組成，並組織成嵌套的可重用組件樹。不管什麼時候建立新的 Vue 項目，默認都會經過如下代碼在 main.js 文件中激活Vue實例：npm

new Vue({
 render: h => h(App),
 }).$mount(‘#app’)

這段代碼表示包含應用程序組件的 Vue 實例，此語法與單文件應用等變體略有不一樣。

生命週期鉤子

每一個 Vue 實例都通過一系列初始化步驟。從建立時設置數據到編譯模板，將實例裝載到DOM，最後在數據更改期間更新 DOM。這個過程被稱爲 Vue 實例的生命週期，在默認狀況下，當它們經歷建立和更新 DOM 的過程當中，會在其中運行一些函數，在這些函數內部建立並聲明 Vue 組件，這些函數稱爲生命週期鉤子。

Vue 有八種生命週期方法：

Before create
Created
Before mount
Mounted
Before update
Updated
Before destroy
Destroyed

在本文中，你將瞭解全部的這些鉤子，並學習其每一個階段的案例。

本文將使用測試組件，它位於 src 文件夾內的 components 文件夾中。它應該看起來像這樣：

// src/components/Test.vue
<template>
 <div>
 </div>
</template>
<script>
export default {
 name: ‘Test’,
 props: {
  msg: String
 }
}
</script>
<! — Add 「scoped」 attribute to limit CSS to this component only →
<style scoped>

h3 {
 margin: 40px 0 0;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

在本教程中，腳本部分將單獨用於各類鉤子案例。

beforeCreate()

這是在 Vue.js 中調用的第一個生命週期鉤子，它在 Vue 實例初始化後當即被調用。

<script>
export default {
  name: 'Test',
  beforeCreate() {
    alert('beforCreate hook has been called');
    console.log('beforCreate hook has been called');
  }
}
</script>

你能夠在開發環境中運行程序來檢查界面。

npm run serve

將輸出如下界面：

注意，在加載組件以前，首先執行的是在生命週期鉤子中寫入的 alert 語句。這正是函數在 Vue 引擎建立應用程序組件以前調用的表現。此時正處在 beforeCreate 階段，還沒有設置計算屬性、觀察者、事件、數據屬性和操做等內容。

created()

正如你所猜想的那樣，這是在 beforeCreated 鉤子以後當即調用的第二個生命週期鉤子。在這個階段，Vue 實例已經初始化，而且已經激活了計算屬性、觀察者、事件、數據屬性和隨之而來的操做。

<script>
export default {
  name: 'Test',
  data() {
    return {
      books: 0
    }
    },
  created() {
    alert('Created hook has been called');
    console.log(`books is of type ${typeof this.books}`);
  }
}
</script>

若是你運行該程序，你將會發現如今能夠顯示數據類型。着在 beforeCreated 階段是不可能的，由於這時發生的激活尚未發生。可是 Vue 實例在此階段還沒有安裝，所以你沒法在此處操做 DOM，元素屬性尚不可用。

beforeMount()

這是在 DOM 上掛載實例以前的那一刻，模板和做用域樣式都在這裏編譯，可是你仍然沒法操做DOM、元素屬性仍然不可用。

<script>
export default {
  beforeMount() {
    alert('beforeMount is called')
  }
}
</script>

mounted()

這是在 beforeMounted 以後調用的下一個生命週期鉤子。在安裝實例後會當即調用它。如今 app 組件或項目中的其餘組件均可以使用了。如今能夠進行數據適合模板、DOM元素替換爲數據填充元素之類的操做了，元素屬性如今也可使用了。

<script>
export default {
  mounted() {
    alert('mounted has been called'); 
   }
}
</script>

這是使用 Vue CLI 建立的項目的默認位置，由於正如咱們在開頭看到的那樣，已經在 main.js 文件中完成了安裝。這就是你有可能沒法使用其餘掛鉤的緣由，由於默認狀況下已經爲你安裝了實例。

beforeUpdate()

在這裏對須要更新 DOM 的數據進行更改。在進行刪除事件偵聽器之類的更改以前，此階段適合任何邏輯。

<template>
 <div> {{hello}}
 </div>
</template>
<script>
 export default {
  name: 'Test',
  data() {
   return {
    books: 0,
    hello: 'welcome to Vue JS'
   }
 },
beforeUpdate(){
 alert('beforeUpdate hook has been called');
},
mounted(){
 this.$data.hello= 'lalalalallalalalalaalal';
 }
}
</script>

最初在 DOM 上有一個歡迎註釋，可是在掛載階段（能夠操做DOM的地方），數據會發生變化，所以beforeUpdate 的 alert 會在更改以前出現。

updated()

在對 DOM 更新以後當即調用今生命週期鉤子，它在調用 beforeUpdate 掛鉤以後執行。能夠在此處執行與 DOM 相關的操做，但不建議更改此鉤子內的狀態，由於 Vue 已經專門爲此提供了平臺。

<template>
 <div> {{hello}}
 </div>
</template>
<script>
 export default {
  name: 'Test',
  data() {
   return {
    books: 0,
    hello: 'welcome to Vue JS'
   }
  },
beforeUpdate(){
 alert('beforeUpdate hook has been called');
},
updated(){
 alert('Updated hook has been called');
},
mounted(){
 this.$data.hello= 'lalalalallalalalalaalal';
 }
}
</script>

beforeDestroy()

調用此 Vue 生命週期鉤子的時機是在 Vue 實例被銷燬以前，實例和全部函數仍然無缺無損並在此處工做。在這個階段你能夠執行資源管理、刪除變量和清理組件。

<script>
export default {
name: 'Test',
 data() {
    return {
      books: 0
    }
  },
  beforeDestroy() {
    this.books = null
    delete this.books
  }
}
</script>

destroyed()

這是 Vue 生命週期的最後階段，其中全部的子 Vue 實例都已被銷燬，事件監聽器和全部指令之類的東西在此階段已被解除綁定。在對象上運行 destroy 以後調用它。

<script>
export default {
  destroyed() {
    this.$destroy() 
    console.log(this)
  }
}
</script>

當你運行程序並查看控制檯時，將看不到任何內容。

結論

你已經瞭解了 Vue JS 中的八個生命週期鉤子以及在什麼時候怎樣使用它們。如今，你可使用生命週期鉤子在 Vue 實例生命週期的不一樣階段添加咱們的自定義邏輯，從而控制從建立到銷燬的流程。這將加深你對 Vue JS 中經常使用功能背後的原理的理解。

本文首發微信公衆號：前端先鋒

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

歡迎繼續閱讀本專欄其它高贊文章：

更多文章...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。