初探 Vue 生命週期和鉤子函數

時間 2019-11-24

標籤初探 vue 生命週期鉤子函數简体版

原文原文鏈接

生命週期

生命週期函數就是 Vue 實例在某一個時間點會自動執行的函數。vue

簡單來講就是好像把人的出生到死亡分紅一個個階段，你取名字確定是在你出生階段，而不是在成年階段；你結婚確定是在成年階段，而不是在出生階段；若是說你在出生階段想去階段，那確定是不行的。組件也是同樣，在實例化的時特定階段調用特定方法，調用的這個方法就是鉤子函數。segmentfault

鉤子函數

鉤子函數和回調函數有什麼區別嗎？後端

它們區別是：bash

js派函數監聽事件 => 監聽函數就是所謂的鉤子函數 => 函數鉤取事件：函數主動找事件 => 鉤子函數app

js預留函數給dom事件，dom事件調用js預留的函數 => 事件派發給函數：事件調用函數 => 回調函數dom

打個比方：異步

鉤子函數：一個房間裏的監控攝像頭監控着每個進入的人的面部特徵，識別出了符合條件的人就觸發警告（執行函數事件）；函數

回調函數：能夠看作是在一片地區埋了許許多多的地雷，一旦踩中了某個地雷（觸發事件），地雷就會爆炸（執行函數事件）。post

能夠簡單的理解爲：動畫

鉤子函數是事件被動的監聽，一旦條件觸發就執行

回調函數是主動事件，執行函數體內容

生命週期探究

<template>
    <div>{{msg}}</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'hello world',
      msg1: ''
    }
  },
  beforeCreate () {
    console.groupCollapsed('beforeCreate 建立前狀態')
    console.log('%c%s', 'color:MediumVioletRed', 'el : ' + this.$el)
    console.log(this.$el)
    console.log('%c%s', 'color:MediumVioletRed', 'data : ' + this.$data)
    console.log(this.$data)
    console.log('%c%s', 'color:MediumVioletRed', 'msg: ' + this.msg)
    console.groupEnd()
  },
  created () {
    console.groupCollapsed('created 建立前狀態')
    console.log('%c%s', 'color:MediumVioletRed', 'el : ' + this.$el)
    console.log(this.$el)
    console.log('%c%s', 'color:MediumVioletRed', 'data : ' + this.$data)
    console.log(this.$data.msg)
    console.log('%c%s', 'color:MediumVioletRed', 'msg: ' + this.msg)
    console.groupEnd()
  },
  beforeMount () {
    console.groupCollapsed('beforeMount 掛載前狀態')
    console.log('%c%s', 'color:MediumVioletRed', 'el : ' + this.$el)
    console.log(this.$el)
    console.log('%c%s', 'color:MediumVioletRed', 'data : ' + this.$data)
    console.log(this.$data.msg)
    console.log('%c%s', 'color:MediumVioletRed', 'msg: ' + this.msg)
    console.groupEnd()
  },
  mounted () {
    console.groupCollapsed('mounted 掛載後狀態')
    console.log('%c%s', 'color:MediumVioletRed', 'el : ' + this.$el)
    console.log(this.$el)
    console.log('%c%s', 'color:MediumVioletRed', 'data : ' + this.$data)
    console.log(this.$data.msg)
    console.log('%c%s', 'color:MediumVioletRed', 'msg: ' + this.msg)
    console.groupEnd()
    setTimeout(() => {
      this.$data.msg = '123'
    }, 5000)
  },
  activated () {
    console.groupCollapsed('activated 掛載後狀態')
    console.log('%c%s', 'color:MediumVioletRed', 'el : ' + this.$el)
    console.log(this.$el)
    console.log('%c%s', 'color:MediumVioletRed', 'data : ' + this.$data)
    console.log(this.$data.msg)
    console.log('%c%s', 'color:MediumVioletRed', 'msg: ' + this.msg)
    console.groupEnd()
    setTimeout(() => {
      this.$data.msg = 'hello tiantian'
    }, 10000)
  },
  beforeUpdate () {
    console.groupCollapsed('beforeUpdate 更新前狀態')
    console.log('%c%s', 'color:MediumVioletRed', 'el : ' + this.$el)
    console.log(this.$el)
    console.log('%c%s', 'color:MediumVioletRed', 'data : ' + this.$data)
    console.log(document.getElementById('app').innerHTML)
    console.log('%c%s', 'color:MediumVioletRed', 'msg: ' + this.msg)
    console.groupEnd()
  },
  updated () {
    console.groupCollapsed('updated 更新後狀態')
    console.log('%c%s', 'color:MediumVioletRed', 'el : ' + this.$el)
    console.log(this.$el)
    console.log('%c%s', 'color:MediumVioletRed', 'data : ' + this.$data)
    console.log(document.getElementById('app').innerHTML)
    console.log('%c%s', 'color:MediumVioletRed', 'msg: ' + this.msg)
    console.groupEnd()
    setTimeout(() => {
      this.$destroy()
    }, 5000)
  },
  beforeDestroy () {
    console.groupCollapsed('beforeDestroy 實例銷燬前狀態')
    console.log('%c%s', 'color:MediumVioletRed', 'el : ' + this.$el)
    console.log(this.$el)
    console.log('%c%s', 'color:MediumVioletRed', 'data : ' + this.$data)
    console.log(document.getElementById('app').innerHTML)
    console.log('%c%s', 'color:MediumVioletRed', 'msg: ' + this.msg)
    console.groupEnd()
  },
  destroyed () {
    console.groupCollapsed('destroyed 實例銷燬後狀態')
    console.log('%c%s', 'color:MediumVioletRed', 'el : ' + this.$el)
    console.log(this.$el)
    console.log('%c%s', 'color:MediumVioletRed', 'data : ' + this.$data)
    console.log(document.getElementById('app').innerHTML)
    console.log('%c%s', 'color:MediumVioletRed', 'msg: ' + this.msg)
    console.groupEnd()
  }
}
</script>
複製代碼