vue 钩子函数

目录

钩子函数概念

生命周期钩子函数

keep-alive 钩子函数

自定义指令的钩子函数

路由导航 / 路由守卫  钩子函数

全局守卫

路由独享守卫

导航守卫

---

钩子函数概念

在 vue 中可以自动执行的函数叫做钩子函数

生命周期钩子函数

vue 从实例创建到销毁过程中被自动执行的函数。

1. beforeCreate（）       实例创建前触发
2. created（）                实例创建完成，
3. beforeMount（）        模板渲染前，可以访问数据，模板编译完成，虚拟DOM已经存在
4. mounted（）              模板渲染完成，可以拿到DOM节点和数据
5. beforeUpdate（）      更新前
6. updated（）               更新完成
7. beforeDestroy（）　 销毁前
8. destroyed（）　　  销毁后

keep-alive 钩子函数

keep-alive 保存组件状态
在路由或者动态组件中，页面用户填写的数据可能会随着页面的切换而丢失，因为在每次切换的时候 vue 都会创建一个新的组件实例。
keep-alive 用来保存组件切换的时候页面状态内容，使用 keep-alive 包裹的组件不会随着页面的切换而丢失，因为被 keep-alive 包裹的组件在切换的时候会被缓存起来，因此在切换的时候可以降低性能上的损耗

1. activated：在进入被 keep-alive 管理的组件时触发
2. deactivated：在离开被 keep-alive 管理的组件时触发

自定义指令的钩子函数

1. bind：指令绑定到元素之上的时候触发 只执行一次
2. unbind：指令被移出的时候触发  只执行一次
3. update：所有节点更新的时候执行
4. componentUpdate：指令所在节点以及所有子节点都更新完成的时候执行
5. 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是在数据变化时再次计算数据