2024前端面试题-篇章一（个人向）

1.vue2生命周期（省略）

2.vue3生命周期（省略）

3.vue2页面生命周期与组件生命周期执行顺序：

一般是 页面先创建，然后准备再准备挂载，挂载的时候发现有组件再执行组件的生命周期，组件创建跟挂载执行完之后最后才挂载页面dom(简单理解就是 页面挂载之前会先检查有无组件，有则先执行组件钩子，最后才挂载页面)

4.vue发请求在哪个生命周期 ，为什么？

一般是created或者mounted,这二者具体放哪个没有孰好孰坏，具体看业务需求，如果需要子组件先展示数据那父组件的的请求最好放在mounted，因为有子组件的情况下，父组件mounted是最后执行的，否则就没有具体规定

5.如果vue页面使用了keep-alive包裹缓存，那么页面会执行哪些生命周期，多次加载页面有什么区别

此时页面被缓存，然后会多出两个生命周期activated(激活)跟deactivated（失活），

当第一次加载页面的时候会正常执行页面的四个生命周期（创建对跟挂载对），然后再执行一个activated（激活）合计五个生命周期，但是当第二次以及后续进入页面就只会执行activated生命周期了

6.组件传值的方式 

父传子：props或者直接子组件this.$parent.值，二者区别在第二种可以直接修改父组件数据第一种不可修改

父级传后代：provide/inject,缺点：使用的值不好找来源

子传父：this.$emit()，或者直接父组件使用this.$children.组件.值修改

兄弟组件传值：全局事件总线bus，参考全局事件总线，又或者使用vuex

7.如何在组件中找到父组件以及根组件

使用this.$parent.$el可以或者到父组件的dom，使用this.$root.$el可以找到根组件 

8.vue插槽有哪些 

默认插槽：省略

具名插槽：具有名字的插槽

作用域插槽：可以用来传参

9.vuex基本知识

省略

10.vuex持久化

一般使用插件vuex-persistedstate或者自己手动使用缓存实现持久化

11.路由的两种模式，有什么区别

hash以及history模式，

hash模式会有#符号，而history没有

hash模式打包可以直接运行index.html可以看到页面内容，而history看不到

hash模式找不到路由页面会定位到默认路径，history则会发送一次get请求

12.router跟route的区别

router是用于管理路由的，而route则是属于route管理的其中一个

13.自定义指令

全局自定义指令：直接在main.js里面写Vue.directive(指令,{inserted:function(参数){}})

局部自定义指令：直接页面的配置里面写Vue.directive(指令,{inserted:function(参数){}})

14.vue2跟vue3的区别

1.首先vue3解决了vue2中存在的响应式缺陷问题，如vue2中响应式原来Object.defineProperty()无法劫持（监听到）对象添加属性，而vue3是用的new Proxy()很好的规避了这个问题，

2.v-if跟v-for的优先级问题，在vue3中变成了v-if的优先级更高（因为源码是先判断的v-if）

3.生命周期的变更包括去掉了创建的钩子，销毁的钩子改名成卸载