目录
钩子函数概念
在 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是在数据变化时再次计算数据