Vue鉤子函數執行順序探究

時間 2019-11-10

標籤 vue 鉤子函數執行順序探究简体版

原文原文鏈接

前言：
提起 vue 的函數執行順序，生命週期函數是一個繞不開的話題，但當同時也會涉及到 keep-alive 時候，就會容易產生疑惑。今天特地花時間探究整理了一下，有興趣的能夠往下看看。javascript

先說下最經常使用的生命週期函數：（話很少說，先放圖）html

這張圖就已經說的很清楚了
有幾點須要在這裏提一下：

$el 何時能打印出來？
當在頁面上已存在的 DOM 元素做爲 Vue 實例的掛載目標el時，在 beforeMount 時能夠打印出來；

<body>
<div id="root">
    <button @click="changeNum">{{num}}</button>
</div>
</body>
<script> let vm = new Vue({ el: '#root', // 獲取執行vue的dom元素，初始化執行範圍 data() { return { font: 'dataFont', num: 0, } }, methods: { changeNum() { this.num ++; } }, beforeCreate() { console.log(this.font, this.$el, 'beforeCreate') }, created() { console.log(this.font, this.$el, 'created') }, beforeMount() { console.log(this.font, this.$el, 'beforeMonte') }, mounted() { console.log(this.font, this.$el, 'mounted') }, }) </script>

複製代碼

打印結果：vue

當不存在時，在 mounted 階段能夠打印出來:

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      font: 'dataFont',
    }
  },
  beforeCreate() {
      console.log(this.font, this.$el, 'beforeCreate')
  },
  created() {
      console.log(this.font, this.$el, 'created')
  },
  beforeMount() {
      console.log(this.font, this.$el, 'beforeMonte')
  },
  mounted() {
      console.log(this.font, this.$el, 'mounted')
  },
}
</script>
複製代碼

對 DOM 的操做，應在 mounted 階段，在以前訪問會是 undefined
父子組件中的生命週期函數的執行順序？

<div> <!-- 父組件 -->
    <sq-header /><!-- 子組件2 -->
    <router-view/>
    <sq-footer /><!-- 子組件1 -->
</div>
複製代碼

結果：java

當使用 keep-Alive 時，進入離開組件時，會調用的鉤子有哪些?

先來看一下 <keep-alive>緩存

<keep-alive> 包裹動態組件時，會緩存不活動的組件實例，而不是銷燬它們
當組件在 <keep-alive> 內被切換，它的 activated 和 deactivated 這兩個生命週期鉤子函數將會被對應執行。bash

咱們知道 <keep-alive> 會將全部匹配到的組件緩存起了，因此當進入被緩存的組件時，並不會觸發 mounted 及以前的鉤子函數，離開時也不會觸發銷燬鉤子。
在被keep-alive包含的組件/路由中，會多出兩個生命週期的鉤子: activated 與 deactivated
activated 在組件第一次渲染時會被調用，以後在每次緩存組件被激活時調用app

// 第一次進入緩存路由/組件:
// beforeMount => 從別的路由/組件進來(組件銷燬destroyed/或離開緩存deactivated) => mounted => activated 進入緩存組件
// 由於組件被緩存，再次進入並不會觸發 beforeCreate created beforeMount mounted
複製代碼

deactivated 在組件被停用(離開路由)時調用dom