一：先来张对比图压压惊，理理思路

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钩子