Vue生命周期就是Vue實(shí)例從創(chuàng)建到銷毀的整個(gè)過程粱玲，分為八個(gè)階段拜轨，有八個(gè)鉤子。

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

官方文檔中給了一個(gè)圖胯甩，嗯……看不明白，也不知道每個(gè)階段到底都干了啥

lifecycle

看圖不如直接上代碼木柬，我在每一個(gè)鉤子函數(shù)中將el淹办、data和data里的屬性message都alert出來，不用console打印而用alert是因?yàn)檫@樣可以看到頁面什么時(shí)候被渲染出來怜森。

//HelloWorld.vue
<template>
  <div class="hello">
    <input v-model="message"/>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'hello'
      }
    },
    beforeCreate: function () {
      console.log('beforeCreate--------------:');
      alert('el:' + this.$el + '  ' + 'data:' + this.$data + '  ' + 'message:' + this.message);
    },
    created: function () {
      console.log('created--------------:');
      alert('el:' + this.$el + '  ' + 'data:' + this.$data + '  ' + 'message:' + this.message);
    },
    beforeMount: function () {
      console.log('beforeMount--------------:');
      alert('el:' + this.$el + '  ' + 'data:' + this.$data + '  ' + 'message:' + this.message);
    },
    mounted: function () {
      console.log('mounted--------------:');
      alert('el:' + this.$el + '  ' + 'data:' + this.$data + '  ' + 'message:' + this.message);
    },
    beforeUpdate: function () {
      console.log('beforeUpdate--------------:');
      alert('el:' + this.$el + '  ' + 'data:' + this.$data + '  ' + 'message:' + this.message);
    },
    updated: function () {
      console.log('updated--------------:');
      alert('el:' + this.$el + '  ' + 'data:' + this.$data + '  ' + 'message:' + this.message);
    },
    beforeDestroy: function () {
      console.log('beforeDestroy--------------:');
      alert('el:' + this.$el + '  ' + 'data:' + this.$data + '  ' + 'message:' + this.message);
    },
    destroyed: function () {
      console.log('destroyed--------------:');
      alert('el:' + this.$el + '  ' + 'data:' + this.$data + '  ' + 'message:' + this.message);
    }
  };
</script>

保存后瀏覽器打開localhost:8080副硅。
首先是beforeCreated，此時(shí)el腊满、data都是undefined培己，頁面上還什么也沒有。

beforeCreate.png

created時(shí)data已被初始化省咨，但el還是undefined，頁面還沒有渲染出來

created.png

beforeMount.png

mounted時(shí)el初始化笤受，頁面渲染出

mounted.png

mounted.png

只要更改頁面上的數(shù)據(jù)感论，就會觸發(fā)beforeUpdate紊册，把輸入框里的hello改為hell快耿，可以看到此時(shí)的alert出message已經(jīng)改變，但頁面上還沒有變掀亥，在updated時(shí)頁面數(shù)據(jù)更新

beforeUpdate.png

updated.png

updated.png

從上邊的結(jié)果來看created和beforeMounted都是data已初始化搪花，el還未初始化嘹害，但是我在網(wǎng)上看其他人的結(jié)果卻不一樣吮便，在其他文章看到說“beforeMount就完成了 el 和 data 初始化 ，此時(shí)el還是 {{message}}许师，應(yīng)用了 Virtual DOM（虛擬Dom）技術(shù)僚匆，先把坑占住了微渠，到后面mounted掛載的時(shí)候再把值渲染進(jìn)去”咧擂，下邊是他人打印的結(jié)果。

為什么我打印的沒有虛擬DOM纳击？這先作為一個(gè)遺留問題攻臀。