vue经典面试题：常见的钩子函数你知道哪些

📌大前端入门到精通专栏正在持续更新中，案例的原理图解析、各种模块分析💖这里都有哦，同时也欢迎大家订阅专栏，获取更多详细信息哦✊✊✊
✨个人主页：零小唬的博客主页
🥂欢迎大家 👍点赞 📨评论 🔔收藏
✨作者简介：20级计算机专业学生一枚，来自宁夏，可能会去做大前端，目前还在努力学习并记录博客中🧸
🎀本系列专栏: 大前端入门到精通
💕希望本文对你在学习前端的过程中有所帮助，如有不足请指正一起学习，一起进步🥇
⛪座右铭：只要你还愿意努力，世界一定会给你惊喜

首先，我们都应该知道在vue中可以自动执行的函数叫做钩子函数。

生命周期钩子函数

1、定义：vue实例从创建到销毁的过程中被自动执行的函数

2、书写位置：与 data methods watch computed directives 同级的位置

3、作用：给程序提供一个自动执行逻辑的场所

4、4大阶段8大钩子：

实例创建前后：
- beforeCreate（数据的观测与事件的初始化属性的创建还没有进行）
- created（此时vue实例已经创建完毕所以数据的观测属性方法等内容都已经创建完毕（el属性还没有挂载））
模板渲染前后：
- beforeMount（页面挂载前调用，在此阶段页面还没有进行渲染与模板的编译，程序在此时会把数据绑定到页面上，但是页面并没有显示）
- mounted（页面已经渲染出来了，html的内容会在dom中进行加载展示）
数据更新前后：
- beforeUpdate（在此时数据会不停的在dom中进行修改）
- updated（把修改之后的dom内容已经在页面成功的展示了）
实例销毁前后：
- beforeDestory（此时vue实例还能用）
- destoryed（什么都没有了，vue实例等内容都没了）

5、生命周期第一次执行那些（页面第一次加载触发哪些）

实例创建之前-----beforeCreate
实例创建之后-----created
模板渲染之前-----beforeMount
模板渲染之后-----mounted

6、dom在那个阶段渲染完毕

模板渲染之后-----mounted

自定义指令的钩子函数

1、常见的自定义指令的钩子函数：

bind 指令绑定到元素之上的时候执行但是只执行一次
unbind 指令被移除的时候执行只执行一次
update 所有组件节点更新的时候执行调用
componentUpdate 指令所在节点以及所有的子节点都更新完成的时候调用
inserted 绑定指令的元素在页面展示的时候调用（常用）

2、全局自定义指令–directive

Vue.directive("自定义指令名字",{
  自定义指令钩子函数(el你绑定自定义指令的dom){
    你的逻辑
  }
})

3、局部自定义指令–directives

directives:{
    自定义指令的名字:{
	    自定义指令的钩子函数（el代表的就是指定放在那个dom上形参就是谁）{
			  你的逻辑
      inserted(el){
        el.focus()
      }
	    }
    },
    自定义指令的名字2:{
    },
}

路由的钩子函数

1、路由钩子（路由守卫/导航守卫/路由卫士）

2、常见的钩子函数：

全局前置守卫—beforeEach()：在所有路由跳转之前触发的钩子函数（此时路由还没有跳转完成）
全局后置守卫— afterEach()：所有路由跳转之后触发的钩子函数（此时已经进入到了跳转之后的新页面）

// 全局前置
router.beforeEach((to,from,next)=>{
  console.log(to);
  console.log(from);
  //可以进行判断是否登录设置进步进入此页面
  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)
  }
},

keep-alive钩子函数

1、在 Vue.js 中，是一个抽象组件，用于缓存动态组件的状态，以便在组件切换时保留组件的状态和避免重新渲染。它可以在有条件地保留组件状态的情况下，提高应用性能。

2、主要作用：

（1）缓存组件状态：包裹的动态组件在被切换时，并不会被销毁，而是被缓存起来。这样在下次再切换到这个组件时，不需要重新创建和渲染，而是直接从缓存中取出，保留之前的状态。
（2）钩子函数：提供了两个钩子函数，分别是 activated 和 deactivated。这些钩子函数在组件被激活（插入到 DOM 中）和停用（从 DOM 中移除）时被调用，可以用来执行一些特定的逻辑，例如数据的重置或异步操作。

3、常见的钩子函数：

activated 在进入被kepp-alive管理的组件时候触发 deactivated 在离开被kepp-alive管理的组件时候触发

注意：这两个钩子应该写在被keep-alive管理的组件中与data等属性同级

🎉记录是为了不停的思考，创作更是为了更好的思考，有人说过：2023年以后的中国市场将永远属于长期主义者，如果你觉得对您有帮助，欢迎一起交流学习，本人也是一名很菜的20级学生，编程界的小白，一起加油变优秀啦！