前端面试——八股文

一、Vue2篇

1. 关于生命周期

1.1 生命周期有哪些？发送请求在created还是mounted？

请求接口测试：https://fcm.52kfw.cn/index.php?_mall_id=1&r=api/default/district

Vue2.x系统自带有8个

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

发送请求在created还是mounted？

这个问题具体要看项目和业务的情况了，因为组件的加载顺序是，父组件引入了子组件，那么先执行父的前3个生命周期，再执行子的前4个生命周期，那么如果我们的业务是父组件引入子组件，并且优先加载子组件的数据，那么在父组件中当前的请求要房mounted中，如果当前组件没有依赖关系那么放在哪个生命周期中请求都是可以的。

1.2 为什么发送请求不在beforeCreate里？beforeCreate和created有什么区别？

为什么发送请求不在beforeCreate里？

因为：如果请求是在methods封装好了，在beforeCreate调用的时候，beforeCreate阶段是拿不到methods里面的方法的（会报错了）。

beforeCreate和created有什么区别？

beforeCreate没有$data
created中有$datacreated是可以拿到methods的方法的
beforeCreate拿不到methods的方法

1.3 在created中如何获取dom

1. 只要写异步代码，获取dom是在异步中获取的，就可以了。例如：setTimeout、请求、Promise.xxx()等等...
2. 使用vue系统内置的this.$nextTick

1.4 一旦进入组件会执行哪些生命周期？

beforeCreate
created
beforeMount
mounted

1.5 第二次或者第N次进去组件会执行哪些生命周期？

1.6 父组件引入子组件，那么生命周期执行的顺序是？

父：beforeCreate、created、beforeMount
子：beforeCreate、created、beforeMount、mounted
...
父：mounted

1.7 加入keep-alive会执行哪些生命周期？

在当前组件的基础上额外增加2个生命周期（8+2）

activated 

deactivated

如果当前组件上加入keep-alive会执行5个生命周期

beforeCreate、created、beforeMount、mounted，activated 
...

1.8 你在什么情况下用过哪些生命周期？说一说生命周期使用场景

created ==> 单组件请求

mounted ==> 同步可以获取dom,如果子后父

activated  ==> 判断id是否相等

destroyed ==> 初始化上一次历史记录

2. 关于组件

2.1 组件传值（通信）的方式

父传后代 ( 后代拿到了父的数据 )
1. 父组件引入子组件，绑定数据<List :str1='str1'></List>子组件通过props来接收props:{str1:{type:String,default:''}}***这种方式父传子很方便，但是父传给孙子辈分的组件就很麻烦（父=》子=》孙）这种方式：子不能直接修改父组件的数据2. 子组件直接使用父组件的数据子组件通过：this.$parent.xxx使用父组件的数据这种方式：子可以直接修改父组件的数据3. 依赖注入优势：父组件可以直接向某个后代组件传值(不让一级一级的传递)

后代传父 （父拿到了后代的数据）
1. 子组件传值给父组件子组件定义自定义事件 this.$emit
2. 父组件直接拿到子组件的数据<List ref='child'></List>this.$refs.child

平辈之间的传值 ( 兄弟可以拿到数据 ) 通过新建bus.js文件来做

父传子：

父代码：孙子想要同样的效果同理就好

第二种父传子的形式：

父代码：

依赖注入

子传父：

平辈传值

2.2 父组件直接修改子组件的值

<List ref='child'></List>
this.$refs.child.xxx = 'yyyy';

2.3 子组件直接修改父组件的值

子组件中可以使用：this.$parent.xxx去修改

2.4 如何找到父组件

this.$parent

2.5 如何找到根组件

2.6 keep-alive

2.7 slot

匿名插槽 ：插槽没有名字

具名插槽 ：插槽有名字

作用域插槽 ： 传值

2.8 如何封装组件

3. 关于Vuex

3.1 Vuex有哪些属性

state ==> 全局共享属性
getters ==> 针对于state数据进行二次计算
mutatioins ==> 存放同步方法的
actions    ==> 存放异步方法的，并且是来提交mutations
modules    ==> 把vuex再次进行模块之间的划分

3.2 Vuex使用state值

this.$store.state.xxx

辅助函数：mapState

以上俩种方式都可以拿到state的值，那么区别是什么？

使用this.$store.state.xxx是可以直接修改vuex的state数据的使用辅助函数的形式，是不可以修改的

3.3 Vuex的getters值修改

面试官可能会这样问：组件使用了getters中的内容，组件使用采用v-model的形式会发生什么？

getters是不可以修改的

3.4 Vuex的mutations和actions区别

相同点：mutations和actions都是来存放全局方法的，这个全局方法return的值拿不到

区别：mutations ==》 同步actions   ==》 返回的是一个Promise对象，他可以执行相关异步操作mutations是来修改state的值的，actions的作用是来提交mutations

3.5 Vuex持久化存储

为什么刷新后又回到1

Vuex本身不是持久化存储的数据。Vuex是一个状态管理仓库（state：全局属性）==》就是存放全局属性的地方。

实现持久化存储：1. 自己写localStorage  2. 使用vuex-persistedstate插件

插件使用方式：https://www.xuexiluxian.cn/blog/detail/dae4073b07144d3c9abb3e2cc8495922

4. 关于路由

4.1 路由的模式和区别

路由的模式：history、hash

区别：
1. 关于找不到当前页面发送请求的问题history会给后端发送一次请求而hash不会
2. 关于项目打包前端自测问题hash是可以看到内容的history默认情况是看不到内容的
3. 关于表象不同hash:#history:/

4.2 子路由和动态路由

4.3 路由传值

4.4 导航故障

官网说明：https://v3.router.vuejs.org/zh/guide/advanced/navigation-failures.html#%E6%A3%80%E6%B5%8B%E5%AF%BC%E8%88%AA%E6%95%85%E9%9A%9C

解决：

import VueRouter from 'vue-router'
const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function (location) {return routerPush.call(this, location).catch(error => error)
}

4.5 $router和$route区别

$router不仅包含当前路由还包含整个路由的属性和方法$route包含当前路由对象

4.6 导航守卫

1. 全局守卫beforeEach 路由进入之前afterEach 路由进入之后2. 路由独享守卫beforeEnter 路由进入之前3. 组件内守卫beforeRouteEnter 路由进入之前beforeRouteUpdate 路由更新之前beforeRouteLeave 路由离开之前

5. 关于API

5.1 $set

面试官：你有没有碰到过，数据更新视图没有更新的问题==》$set

this.$set(target,key,修改后的值)

5.2 $nextTick

$nextTick返回的参数[函数]，是一个异步的。功能：获取更新后的dom源码|原理：
$nextTick( callback ){return Promise.resolve().then(()=>{callback();})
}

5.3 $refs

来获取dom的

5.4 $el

$el 获取当前组件的根节点

5.5 $data

$data 获取当前组件data数据的

5.6 $children

$children 获取到当前组件的所有子组件的

5.7 $parent

找到当前组件的父组件，如果找不到返回自身

5.8 $root

找到根组件

5.9 data定义数据

数据定义在data的return内和return外的区别：1. return外：单纯修改这个数据是不可以修改的，因为没有被get/set
2. reutnr内：是可以修改的

5.10 computed计算属性

computed计算属性的结果值，可以修改吗？可以的，需要通过get/set写法当前组件v-model绑定的值是computed来的，那么可以修改吗？可以的，需要通过get/set写法

5.11 watch

watch:{obj:{handler(newVal,oldVal){console.log( 'obj',newVal , oldVal )},immediate:true,deep:true},
}

5.12 methods和computed区别

computed是有缓存机制的，methods是没有缓存机制的（调用几次执行几次）

6. 关于指令

6.1 如何自定义指令

全局：
Vue.directive('demo', {inserted: function (a,b,c) {console.log( a,b,c );}
})

局部：
<script>
export default {directives: {demo: {bind: function (el) {console.log( 1 )}}}
}
</script>

6.2 vue单项绑定

双向绑定：v-model

单项绑定：v-bind

6.3 v-if和v-for优先级

vue2中：v-for > v-if

vue3中：v-if > v-for

7. 关于原理

7.1 $nextTick原理

$nextTick功能：获取更新后的dom

$nextTick( callback ){return Promise.resolve().then(()=>{callback();})}

7.2 双向绑定原理

8. axios二次封装

二、Vue3篇

1. Vue2和Vue3区别

1. Vue2 和 Vue3 双向绑定 方法不同Vue2 : Object.defineProperty()***后添加的属性是劫持不到的Vue3 : new Proxy()***即使后添加的也可以劫持到***还不需要循环3. $set在vue3中没有，因为new Proxy不需要4. 关于写法vue2是选项式APIvue3可以向下兼容（选项式API），也可以组合式api或Setup语法糖形式5. v-if和v-for优先级不同了6. $ref和$children也不同7. 如果大家还知道其他api不同点，随便说说就可以了

2,vue3如果用setup写怎么组织代码？ 

说明：hooks（就是函数式），主要让功能模块细分（提升项目的维护性）解决问题：<script setup>//代码==》比较乱</script>
面试题：你们vue3写代码的方式 ==〉setup形式解决：hooks

 3.vue3如果用setup写如何获取类似于vue2中的this？

import {  getCurrentInstance } from 'vue'
let app = getCurrentInstance();
console.log( app.appContext.app.config.globalProperties.$loading )

4.vue3常用api有哪些？

1. createApp() ==》 创建一个应用实例。说明：等于Vue2的==》new Vue()使用场景：写插件(封装全局组件会使用)
2. provide/inject ==》依赖注入说明：其实就是传值使用场景：某一个父组件传值 到后代组件，如果层级过多传递麻烦，所以使用缺点：不好维护和查询数据来源
3. directive说明：自定义指令场景：后台管理系统中的按钮权限控制（ 一个用户拥有某些权限，但是只能查看和修改，不能删除）
4. mixin说明：1.全局混入 2. 局部场景：可以添加生命周期，我在小程序的分享功能会用到缺点：不好维护和查询数据来源
5. app.config.globalProperties说明：获取vue这个全局对象的属性和方法场景：自己封装插件的时候需要把方法添加到对象中
6. nextTick说明：等待下一次 DOM 更新刷新的工具方法 ：nextTick返回一个Pormise，回调函数是放在Promise中的，所以是异步执行的场景：就是把dom要更新，那么vue是数据驱动dom，所以数据的赋值就要在nextTick进行
7. computed说明：计算属性场景：有缓存
8. reactive、ref说明：来定义数据的和vue2的data类似
9. watch说明：监听（Vue3不需要深度监听）
10. markRaw()说明：不被new Proxy代理，说白了就是静态的数据
11. defineProps() 说明：父组件传递的值，子组件使用setup的形式，需要用defineProps接收
12. defineEmits()当前组件使用setup形式，自定义事件需要使用defineEmits
13. slot说明：分为 1. 匿名 2. 具名 3. 作用域场景：后台管理系统，左侧是固定菜单，右侧是不固定内容，那么右侧就是slot

5.请介绍一下vue3常的响应式数据类型

ref ：基本类型
reactive ：复杂类型
toRef ：解构某一个值
toRefs ： 解构多个值

6.请介绍一下teleport组件及其使用场景

teleport组件是一个传送门
假如自己写弹出框，需要在页面居中位置展示，不受当前组件的限制，可以把盒子传送到body中

7.面试题：v-if和v-show区别 

1. 展示形式不同
v-if是 创建一个dom节点
v-show 是display:none 、 block2. 使用场景不同
初次加载v-if要比v-show好，页面不会做加载盒子
频繁切换v-show要比v-if好，创建和删除的开销太大了，显示和隐藏开销较小

面试题：nextTick是什么?

获取更新后的dom内容

面试题：scoped原理

1. 作用：让样式在本组件中生效，不影响其他组件。
2. 原理：给节点新增自定义属性，然后css根据属性选择器添加样式。