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
脱离当前路由时
正在努力进修中，若对你的进修有协助，留下你的印记呗（点个赞咯^_^）
