VUE的生命周期1
创建Vue对象
| --- | --- |
|---|---|
| 监听数据 | // beforeCreated |
| 初始化事件 | // created |
| 编译模板 | // beforeMount |
| 挂载实例 | // mounted |
由上分析各个生命周期的情况以及可以做的事情：
beforeCreated // 什么都获取不到，可以加个loading
|
created // 可以获取到data,methods等，但是拿不到dom节点,可以修改数据
|
beforeMount // 跟created差不多
|
mounted // 可以获取到dom，发送请求
|
| beforeUpdate（进一步更改状态，不会引起附加渲染） —— updateed
|
beforeDestory // 用来清除定时器以及监听
|
destoryed
小程序的生命周期
onLoad // 只加载一次，可获取页面参数
|
onShow // 每次打开页面都会调用一次，可以更改页面数据
|
onReady // 页面初次渲染完成，可执行wx.setNavigationBarTitle
|
onHide //与onShow呼应
|
onUnload // redirectTo或navigateBack调用，清除定时器等
vue Router 钩子函数
全局钩子函数
// beforeEach 可进行登录拦截，权限判断等
router.beforeEach((to, from, next) => {})
// afterEach
路由独享的守卫
// beforeEnter 相当于组件内的守卫beforeRouteEnter
const router = new VueRouter({
routes: [
{
path: ‘/foo’,
component: Foo,
beforeEnter: (to, from, next) => {}
}
] })
组件内的守卫
// 参数都是 to, from, next
beforeRouteEnter // 进入路由之前，不能获取组件实例this
beforeRouteLeave // 当有未保存的内容时，可以阻止页面跳转，也可以存储页面数据
beforeRouteUpdate //当路由改变，但是该组件仍被复用时调用
网友评论