亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

此間少年_ · 更新于 2020-12-07

1. 前言

在之前的小節中我們介紹了 Vue 實例，本小節我們一起來了解一下 Vue 實例的生命周期。包括生命周期的幾個階段，以及各個階段觸發時機和作用。深入理解 Vue 的生命周期是本小節的難點，同學們不僅需要知道生命周期的執行順序，還要理解各生命周期的作用。

2. 慕課解釋

每個 Vue 實例在被創建時都要經過一系列的初始化過程 —— 例如，需要設置數據監聽、編譯模板、將實例掛載到 DOM 并在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數，這給了用戶在不同階段添加自己的代碼的機會。 — 官方定義

Vue 生命周期是指 Vue 實例對象從創建之初到銷毀的整個過程。在生命周期的不同階段 Vue 提供了不同的鉤子函數，讓用戶可以在不同的階段執行自己的代碼。

3. 生命周期流程

我們來看一下官網給的 Vue 生命周期的圖：
圖片描述

從上面這幅圖中，我們可以看到 vue 生命周期可以分為八個階段，分別是：

  • beforeCreate（創建前）
  • created（創建后）
  • beforeMount (載入前)
  • mounted（載入后）
  • beforeUpdate（更新前）
  • updated（更新后）
  • beforeDestroy（銷毀前）
  • destroyed（銷毀后）

3.1 創建前（beforeCreate）

在實例初始化之后，此時的數據觀察和事件機制都未形成，不能獲得 DOM 節點。

3.2 創建后（created）

實例已經創建完成之后被調用。在這一步，實例已完成以下的配置：數據觀測（data observer），屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始。

3.3 載入前（beforeMount）

在掛載開始之前被調用：這個過程是在模版已經在內存中編譯完成， render 函數首次被調用，此時完成了虛擬 DOM 的構建，但并未被渲染。

3.4 載入后（mounted）

這個過程在模版掛載之后被調用，頁面完成渲染，所以在這之后，我們可以操作和訪問 DOM 元素。

3.5 更新前（beforeUpdate）

當數據更新時調用，在這一階段 DOM 會和更改過的內容同步。

3.6 更新后（updated）

由于數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鉤子。

當這個鉤子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴于 DOM 的操作。然而在大多數情況下，你應該避免在此期間更改狀態，因為這可能會導致更新無限循環。

3.7 銷毀前（beforeDestroy）

實例銷毀之前調用。在這一步，實例仍然完全可用。

3.8 銷毀后（destroyed）

Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。

實例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id = "app">
    {{ name }}
    <button @click="updateName">更新</button>
    <button @click="destroy">銷毀</button>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type = "text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      name:'hello !'
    },
    methods : {
      updateName() {
        console.log('準備修改名字啦！')
        this.name = 'hello 慕課！'
      },
      destroy(){
        vm.$destroy()
      }
    },
    beforeCreate() {
      // 此時頁面數據未初始化
      console.log('beforeCreate:' + this.name) // beforeCreate： undefined
    },
    created() {
      // 頁面數據已經初始化
      console.log('created:' + this.name) // beforeCreate： hello !
    },
    beforeMount() {
      console.log('beforeMount:' + this.name) // beforeCreate： hello !
    },
    mounted() {
      console.log('mounted:' + this.name) // beforeCreate： hello !
    },
    // 點擊更新按鈕后會先觸發 beforeUpdate
    beforeUpdate() {
      console.log('beforeUpdate:' + this.name) // beforeCreate： hello 慕課！
    },
    updated() {
      console.log('updated:' + this.name) // updated hello 慕課 !
    },
    // 點擊銷毀按鈕后會先觸發 beforeDestroy
    beforeDestroy(){
      console.log('beforeDestroy: before destroy') // beforeDestroy: before destroy
    },
    destroyed(){
      console.log('destroyed: success') // destroyed: success
      // 在這之后點擊頁面 更新 按鈕將無任何效果
    }
  });
</script>
</html>

4. 小結

本小節我們介紹了 Vue 的生命周期，了解了 Vue 從創建到銷毀的一個過程。