vue 钩子函数

钩子函数概念

生命周期钩子函数

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 这些也属于钩子函数