VUE的生命周期
创建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 //当路由改变,但是该组件仍被复用时调用
|