目录
钩子函数概念
生命周期钩子函数
keep-alive 钩子函数
自定义指令的钩子函数
路由导航 / 路由守卫 钩子函数
全局守卫
路由独享守卫
导航守卫
钩子函数概念
在 vue 中可以自动执行的函数叫做钩子函数
生命周期钩子函数
vue 从实例创建到销毁过程中被自动执行的函数。
- beforeCreate() 实例创建前触发
- created() 实例创建完成,
- beforeMount() 模板渲染前,可以访问数据,模板编译完成,虚拟DOM已经存在
- mounted() 模板渲染完成,可以拿到DOM节点和数据
- beforeUpdate() 更新前
- updated() 更新完成
- beforeDestroy() 销毁前
- destroyed() 销毁后
keep-alive 钩子函数
keep-alive 保存组件状态
在路由或者动态组件中,页面用户填写的数据可能会随着页面的切换而丢失,因为在每次切换的时候 vue 都会创建一个新的组件实例。
keep-alive 用来保存组件切换的时候页面状态内容,使用 keep-alive 包裹的组件不会随着页面的切换而丢失,因为被 keep-alive 包裹的组件在切换的时候会被缓存起来,因此在切换的时候可以降低性能上的损耗
- activated:在进入被 keep-alive 管理的组件时触发
- deactivated:在离开被 keep-alive 管理的组件时触发
自定义指令的钩子函数
- bind:指令绑定到元素之上的时候触发 只执行一次
- unbind:指令被移出的时候触发 只执行一次
- update:所有节点更新的时候执行
- componentUpdate:指令所在节点以及所有子节点都更新完成的时候执行
- inserted:绑定指令的元素在页面展示的时候执行
路由导航 / 路由守卫 钩子函数
全局守卫
在所有页面跳转的时候都会触发
- 全局前置守卫 beforeEach:在所有路由页面跳转之前触发
- 全局后置守卫 afterEach:在所有路由页面跳转之后触发
//写在路由配置的最下边
// to 去哪里
// from 从哪个路由来的
// next 下一步(必须要写 不写的话 就会卡在这个钩子中不想下进行了)// 全局前置
router.beforeEach((to, from, next) => {if(to.path == "/phone" || to.path == "/shop"){next()}else{alert("您没有登录请您登录后再访问")next("/phone")}
})
// 全局后置
router.afterEach((to, from) => {console.log("全局后置守卫")
})
路由独享守卫
指定页面在跳转的时候触发
- beforeEnter:只会对一个路由规则生效(写在那个规则之上 就对那个生效)
{path: '/about',name: 'About',component: () => import('../views/About.vue'),// 路由独享守卫beforeEnter(to, from, next){console.log(to);console.log(from);next()}},
导航守卫
仅对某些组件在路由跳转的时候触发
- beforeRouteEnter:进入组件的时候触发
- beforeRouteLeave:离开组件的时候触发
// 进入组件beforeRouteEnter(to,from,next){console.log("我进来了")console.log(to)console.log(from)next()},beforeRouteLeave(to,from,next){console.log(to)console.log(from)if(confirm("您确定离开吗?")){next()}else{next(false)}},
广义上来说,watch、computed 这些也属于钩子函数
- watch 是在监控的数据变化时就会自动执行对应的方法
- computed是在数据变化时再次计算数据