vue与小程序的生命周期

Posted 2021-09-14 yingmhd

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 // 当路由改变，但是该组件仍被复用时调用