共计 2835 个字符，预计需要花费 8 分钟才能阅读完成。
Vue 的生命周期，有的时候还是会不熟悉的样子，找了点相关的文章，然后自己尝试着做了点示例，这里记录下，说不定面试就用上了
1.Vue 生命周期的相关图片
2.Vue 生命周期及路由的钩子函数
beforeCreate
实例初始化之后，初始化注入 (init injections) 及响应 (reactivity) 前被调用
created
实例已经创建完成之后被调用，属性已绑定，但 DOM 还未生成，$el 为 undefined
这里要视情况来定，根据你的业务来判断是否可以在这里进行 ajax 请求
beforeMounted
在这里之前会根据是否有 el 元素及是否有内置的 template 模板来进行选择
没有 el 则在 vm.mounted(el)调用之后再往下执行，没有内置的模板则使用外层的 template 模板
模板编译、挂载之前，此时 $el 还是 undefined
mounted
实例挂载到页面上，此时可以访问 $el
beforeDestroy
在组件销毁之前调用，这里依然可以访问 $el
这里可以做一些重置的操作，比如清除掉组件中的 定时器 和 监听的 dom 事件
destroy
组件销毁
路由导航守卫
要调用 next()不然页面会卡在中途
beforeRouteEnter
路由进入的时候调用，在组件 beforeCreate 前
此时还没有组件实例，this 为 undefined，组件实例还没有被创建
beforeRouteEnter 是支持给 next 传递回调的唯一守卫
对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调
beforeRouteUpdate
在当前路由改变，但是该组件被复用时调用
对于一个带有动态参数的路径 /index/:id，在 /index/1 和 /index/2 之间跳转的时候
由于会渲染同样的 Index 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用
beforeRouteLeave
离开守卫通常用来禁止用户在还未保存修改前突然离开, 该导航可以通过 next(false) 来取消
3. 示例代码
我这里是用了 webpack 打包来做的，并没有用 new Vue 来新建
<script>
export default {
data() {
return {
time: ”
}
},
beforeCreate() {
console.log(‘beforeCreate: 生命周期之 beforeCreate’);
console.log(this.$el);
},
created() {
/* 实例已经创建完成之后被调用，属性已绑定，但 DOM 还未生成，$el 为 undefined */
console.log(‘created: 生命周期之 created’)
console.log(this.$el);
/*
* route 是一个跳转的路由对象
* 每一个路由都会有一个 route 对象，是一个局部的对象
* 可以获取对应的 name,path,params,query 等
* */
console.log(this.$route);
/*
* $router 是 VueRouter 的一个对象
* 通过 Vue.use(VueRouter)和 VueRouter 构造函数得到一个 router 的实例对象
* 这个对象是一个全局的对象，他包含了所有的路由
* */
console.log(this.$router);
},
beforeMount() {
console.log(‘beforeMount: 生命周期之 beforeMount’);
console.log(this.$el);
},
mounted() {
console.log(‘mounted: 生命周期之 mounted’);
console.log(this.$el);
this.time = ‘2018’;
},
/* 路由的生命周期 */
beforeRouteEnter(to, from, next) {
/*
* 此时还没有组件实例，this 为 undefined，组件实例还没有被创建
* beforeRouteEnter 是支持给 next 传递回调的唯一守卫
* 对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调
*
* */
console.log(‘beforeRouteEnter: 进入路由 ’);
/* 在这里用 this 无法获取 vue 实例，但可以在 next()回调里访问组件实例 */
console.log(this);
/*
* 要调用 next()方法
* next()进行管道中的下一个钩子
* 如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)
* */
// next();
/* next()回调里访问组件实例 */
next(vm => {
/* 这里的打印是在 mounted 之后 */
console.log(vm);
})
},
beforeRouteUpdate(to, from, next) {
console.log(‘beforeRouteUpdate: 路由更新 ’);
console.log(this.$route);
next();
},
beforeRouteLeave(to, from, next) {
/*
* 离开守卫通常用来禁止用户在还未保存修改前突然离开
* 该导航可以通过 next(false) 来取消
* 使用 next(false)，页面依然停留在当前页面，组件的 beforeDestroy 和 destroy 生命周期不执行
* */
console.log(‘beforeRouteLeave: 离开该组件对应的路由 ’);
console.log(this.$route);
next();
// next(false);
},
beforeUpdate() {
console.log(‘beforeUpdate: 生命周期之 beforeUpdate’);
console.log(this.$el);
},
updated() {
console.log(‘updated: 生命周期之 updated’);
console.log(this.$el);
},
beforeDestroy() {
/* 这里做一些重置的操作，比如清除掉组件中的 定时器 和 监听的 dom 事件 */
console.log(‘beforeDestroy: 生命周期之 beforeDestroy’);
console.log(this.$el);
},
destroyed() {
console.log(‘destroy: 生命周期之 destroy’);
console.log(this.$el);
}
}
</script>
输出图片
路由为 /routerIndex 时
当组件被复用时，路由为 /routerIndex?id=1
离开当前路由时
正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯 ^_^）
往期好文推荐：
判断 iOS 和 Android 及 PC 端
纯 css 实现瀑布流（multi-column 多列及 flex 布局）
实现单行及多行文字超出后加省略号
微信小程序之购物车和父子组件传值及 calc 的注意事项