Vue的生命周期，有的时候还是会不熟悉的样子，找了点相关的文章，然后自己尝试着做了点示例，这里记录下，说不定面试就用上了1.Vue生命周期的相关图片2.Vue生命周期及路由的钩子函数beforeCreate实例初始化之后，初始化注入(init injections)及响应(reactivity)前被调用created实例已经创建完成之后被调用，属性已绑定，但DOM还未生成，$el为undefined这里要视情况来定，根据你的业务来判断是否可以在这里进行ajax请求beforeMounted在这里之前会根据是否有el元素及是否有内置的template模板来进行选择没有el则在vm.mounted(el)调用之后再往下执行，没有内置的模板则使用外层的template模板模板编译、挂载之前，此时$el还是undefinedmounted实例挂载到页面上，此时可以访问$elbeforeDestroy在组件销毁之前调用，这里依然可以访问$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的注意事项