乐趣区

关于vue.js:vue与小程序的生命周期

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 // 当路由扭转,然而该组件仍被复用时调用 
退出移动版