一：先來張對比圖壓壓驚，理理思路

1.beforeCreated鉤子

該階段元件例項剛建立，元件屬性計算之前(可理解為元件屬性還未初始化，未繫結，未掛載元素el)，比如：el,data,methods等，如果你試圖在beforeCreated鉤子中獲取這些屬性值，會得到undefine的結果，但是可以獲取到this物件，因為此時元件剛被建立好，所以this已經引用了該元件物件。測試程式碼及結果如下：

beforeCreate: function () {
      console.log('<---------beforeCreate 鉤子--------->')
      console.log(this)
      console.log('%c%s', 'color:red', 'el     : ' + this.$el)
      console.log('%c%s', 'color:red', 'data   : ' + this.$data)
      console.log('%c%s', 'color:red', 'message: ' + this.message)
      console.log('%c%s', 'color:red', 'methods: ' + this.methods)
    }
 

2.created鉤子

該階段元件例項建立完成，元件屬性繫結完成，但DOM還未生成，el屬性還不存在

created: function () {
      console.log('<---------created 鉤子--------->')
      console.log(this)
      console.log('%c%s', 'color:red', 'el     : ' + this.$el)
      console.log('%c%s', 'color:red', 'data   : ' + this.$data)
      console.log('%c%s', 'color:red', 'message: ' + this.message)
      console.log('%c%s', 'color:red', 'methods: ' + this.methods)
    }
 

3.beforeMount鉤子

該階段元件例項已經建立完成，但是el還未掛載具體元素

3.mount鉤子

該階段元件例項已經建立完成，但是el已掛載具體元素，此時的el屬性不為undefine

mounted: function () {
      console.log('<---------beforeMount 鉤子--------->')
      console.log(this)
      console.log('%c%s', 'color:red', 'el     : ' + this.$el)
      console.log('%c%s', 'color:red', 'data   : ' + this.$data)
      console.log('%c%s', 'color:red', 'message: ' + this.message)
      console.log('%c%s', 'color:red', 'methods: ' + this.methods)
    }
 

剩下的beforeUpdate,updated,beforeDestory,destoryed，這裡不再做解釋

篇二：Vue-Route鉤子