生命周期是貫穿Vue項目的一個重要知識點（想更多了解的建議搜索類似的掘金文章，入門文章）

創(chuàng)建階段（流程如下）

（初始化事件和生命周期）beforeCreate（數(shù)據(jù)觀測、屬性、偵聽器配置等）——>created——>（模板編譯到render）beforeMount——>render（掛載到DOM）——>mounted（異步請求、操作DOM、定時器等）

更新階段（多次執(zhí)行的階段，$forceUpdate強制更新也會觸發(fā)）

beforeUpdate——>render——>updated（更新代碼中不能修改數(shù)據(jù)，不然會死循環(huán)）

銷毀階段

beforeDestory——>destoryed

DEMO

<template>
  <div>
    {{name}}
    <button @click="desc">修改</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name:'Vue'
    };
  },
  beforeCreate() {
    console.log("beforeCreate");
  },
  created() {
    console.log("created");
  },
  beforeMount() {
    console.log("beforeMount");
  },
  mounted() {
    console.log("mounted");
  },
  beforeUpdate() {
    console.log("beforeUpdate");
  },
  updated() {
    console.log("updated");
  },
  beforeDestroy() {
    console.log("beforeDestroy");
  },
  destroyed() {
    console.log("destroyed");
  },
  methods:{
    desc(){
      this.name='123'
    }
  }
};
</script>

因為對象是無序的，位置在哪無所謂

接著觸發(fā)更新，調(diào)用了更新函數(shù)

如果銷毀組件的話，就不會發(fā)生更新了

  methods:{
    desc(){
      this.$destroy()
      this.name='123'
    }
  }

name更新失敗
（先這樣，后面可能寫其他DEMO的時候會寫到深入一些）