vue.js 生命週期詳解

vue.js的生命週期是很是重要的一個點，聽起來是老生常談了。但若是僅僅是知道它有哪幾個生命週期是遠遠不夠的。
要清楚瞭解每一個週期鉤子在幹什麼，什麼事情該使用哪一個鉤子幹，這樣才能更清晰的開發，避免踩坑
vue的生命週期有8個鉤子函數，分別爲建立前/後，掛載前/後，更新前/後，銷燬前/後。

---

這是官方文檔的圖，下面有代碼來詳細瞭解一下各個鉤子

beforeCreate: function beforeCreate() {
    //do something before creating vue instance
    console.log('---------被建立前----------');
    console.log('data: ',this.$data);
    console.log('$el: ',this.$el)
  },
  created: function created() {
    //do something after creating vue instance
    console.log('---------被建立完成---------');
    console.log('data: ',this.$data);
    console.log('$el: ',this.$el);
    console.log('root: ',this.$root)

  },
  beforeMount: function beforeMount() {
    //do something before mounting vue instance
    console.log('----------被掛載前----------')
    console.log('data: ',this.$data);
    console.log('$el: ',this.$el)
    console.log('root: ',this.$root)
  },
  mounted: function mounted() {
  //do something after mounting vue instance
    console.log('----------被掛載後---------')
    console.log('data: ',this.$data);
    console.log('$el: ',this.$el)
    console.log('root: ',this.$root)
  }

$el：當前組件的元素，也就是templa的根元素
data:組件裏的data對象
代碼執行的結果如圖

這幾個鉤子的分工
1.beforeCreate: 建立組件前先獲取數據，初始化事件,獲取不到data,$el
2.created:建立組件後,能夠獲取了數據data，可是依舊沒有掛載元素
3.beforeMounted:掛載前，獲取不到root,$el，獲取不到dom,能夠獲取data
4.mounted:掛載後，將編譯好的模板掛載到html上，獲取獲取dom,root，在這個鉤子裏執行對dom修改的方法
5.beforeUpdate和updated:很容易理解，就是某些行爲發生後數據改變先後的鉤子
6.beforeDestroyed和destroyed：組件銷燬先後的鉤子