根据面试题web前端面试 - 面试官系列 里面的题目学习巩固。

1.vue2

组件通信

EventBus：

讲解

全局事件总线，核心思想是通过发布-订阅模式来实现组件之间的通信

在 Vue 2 中，可以直接使用 Vue 实例作为 EventBus。

使用方法：在mian.js中直接挂载到vue原型上。

const bus = new Vue();

Vue.prototype.$bus = bus

然后组件通过 this.$bus来访问

用$emit发送事件
this.$bus.$emit('customEvent', { message: 'Hello from Component A' });
用$on接收事件
this.$bus.$on('customEvent', (payload) => {
  console.log('Received:', payload.message);
});

项目中的真实用法：

项目顶部导航栏 点击模块高亮效果

1.//比如：在有导航栏的页面点击导航栏的首页 （页面路径：src\pages\home\index.vue）
methods:{
this.$router.push({name: "newIndex"
});
}2.//跳转到index首页页面 （页面路径：src\pages\home\newIndex.vue）
beforeMount() {this.$root.Bus.$emit("changeTab", 'first');
},
在这个页面中用$bus.$emit传递数据给导航栏页面3.还是导航栏页面接收参数（页面路径：src\pages\home\index.vue）
mounted(){
this.$root.Bus.$on("changeTab", e => {this.activeName = e; //this.activeName 控制导航栏文字是否高亮localStorage.setItem('activeName', e) //此时e就是上面传递的'first'
});
}

 NextTick

Vue 中 DOM 更新是异步的，数据更新后页面的 DOM 可能还没完成更新，因此在需要操作最新 DOM 时，可以使用 this.$nextTick 确保数据变化引起的 DOM 更新完成后再执行代码。

this.$nextTick 的使用场景主要是需要操作更新后的 DOM，而不仅仅是简单的页面渲染。简单的数据绑定渲染，Vue 会自动处理好，根本不需要用到 nextTick。只有当数据变化后，你有一些额外的逻辑需要依赖最新的 DOM 状态，才需要使用它。

所以，nextTick 本质上是为了解决数据变化和 DOM 更新之间的异步关系，确保操作发生在 DOM 更新完成之后，而不是专门为页面渲染而存在。

插槽slot

插槽重点 ：父组件向子组件传递内容

分类        ：

1.默认插槽  <slot></slot> 用于插入父组件的内容

2.具名插槽 （多个插槽） 通过 name 属性指定内容插入的位置，父组件用 #插槽名 提供内容。

3.作用域插槽 ：（父组件还能拿到子组件提供的数据）子组件通过插槽把数据传递给父组件，父组件用 v-slot 接收数据。

 father.vue

<template><div><!-- 默认插槽 --><child><div>我是父组件给你传递的数据：父亲</div></child><!-- 具名插槽 --><child><template #name>我是具名插槽name</template><template #age>我是具名插槽age</template></child><!-- 作用域插槽  父组件用v-solt 接收子组件传递过来的数据 --><child v-solt="{info}"><div>父组件展示子组件的数据：{{ info }}</div></child></div>
</template><script>
import child from "./child";

<template><div><!-- 默认插槽 --><slot></slot><!-- 具名插槽 --><div><span>姓名：</span><slot name="name"></slot></div><div><span>年龄：</span><slot name="age"></slot></div><!-- 作用域插槽  子组件传递给父组件的数据 --><slot :info="info"></slot></div>
</template><script>
export default {name:'', components: {},data () {return {info:'我是子组件传递给父组件的数据 作用域插槽'}

axios封装

安装 和 导入

npm install axios --s 

在main.js中

import axios form ‘axios’

 发送请求

axios({        url:'xxx',    // 设置请求的地址method:"GET", // 设置请求方法params:{      // get请求使用params进行参数凭借,如果是post请求用datatype: '',page: 1}
}).then(res => {  // res为后端返回的数据console.log(res);   
})

二次封装 

原因：设置超时时间、设置请求头、错误处理等等操作

2.javascript中es6

为了在面试中能讲出多条，减少遗漏，下面只列举不解释。

1. 块级作用域（let和const）

2. 箭头函数

3. 解构赋值

4. 模板字符串

5. 类（Class）

6. Promise

7. 模块化导入和导出

8.async 和await

3.JavaScript 

1.数据类型

基本数据类型和引用数据类型 

区别：存储的位置不同

基本数据类型：String Number Undefined Null Boolean Symbol 

提示：

Undefined：声明了变量但是没赋值

Null 如果用typeof来判断是object类型

引用数据类型：Array Function Object

 2.数组的方法

感觉每次面试都会被用到，挺常见的

1.操作方法

  增删改查 

增：

1.  push()  //添加到数组末尾
2. unshift() // 添加在数组开头 这俩返回的都是数组长度
3. splice  //接收三个参数 开始位置、 0（要删除的元素数量）、插入的元素。返回一个空数组   这三个都不会改变原数组
4.    concat（）返回新数组 let  oldArray = [1,2,3]    let newArray = oldArray.concat(4,6,7)  console.log(newArray)//1，2，3，4，6，7

删：

1. pop（）用于删除数组的最后一项，同时减少数组的length 值，返回被删除的项
2. shift（）用于删除数组的第一项，同时减少数组的length 值，返回被删除的项
3. splice（）传入两个参数，分别是开始位置，删除元素的数量，返回包含删除元素的数组
4. slice（）传入俩个索引参数 slice（1，3） 包含开始索引，不包含结束的所以。可以用来截取数组  
5. let array = [1,2,3,4,5,6]/数组里6个元素  let newArray = array.slice(2,4)//返回一个新数组。从索引2，到索引4,但是不包含4。   console.log(newArray)//2,4

查

1. indexOf()查找的元素在数组中的位置，如果没找到则返回 -1
2. inclueds()查找的元素在数组中的位置，找到返回true，否则false
3. find()返回第一个匹配的元素

---

2.排序方法

1. reverse（）反转
2. sort（）比较函数。判断那个值应该排前面

3.转换方法

join（）//把数组用符号隔开

let colors = ["red", "green", "blue"];
alert(colors.join(",")); // red,green,blue

4.迭代方法

1. some()
2. every()
3. forEach()
4. filter()
5. map()

 3. 对象的方法

1.for...in

遍历所有可枚举的自身和继承属性。 

 let obj = {name:'zs',age:18,}for(let key in obj){console.log(key,obj[key])} //输出name zs age 18

2.Object.keys()

获取对象自身可枚举属性的键数组

console.log(Object.keys(obj)) //['name', 'age']

3.Object.values()

获取对象自身可枚举属性的值数组

console.log(Object.values(obj));//['zs', 18]

4.Object.entries()

返回对象自身可枚举属性的 [key, value] 数组

console.log(Object.entries(obj)); // [['name', 'zs'], ['age', 18]]

4. 防抖函数 debounce

 手写防抖函数

​function debounce(delay,fn){let timer = nullreturn function(...args){if(timer !== null){clearTimeout(timer)}timer = setTimeout(()=>{fn.apply(this,args)},delay)}}​

 4.真是项目中遇到的问题

1.vue页面缓存

情况：

财务系统：从具体项目费用合计页面 点击自筹差旅费和省拨差旅费（下面简称自筹和省拨） 都是进入同一个详情页面，只是传的参数不同。所以会出现，点击自筹进入详情页面后，接口调用和页面展示正常。再返回具体项目费用合计页面，点击省拨进入详情，没有调接口，页面也没变化。就是因为页面有缓存。

简单来说就是下图：

 解决方法：

有好几种方法。我采用的是利用路由

  beforeRouteEnter(to, from, next) {next(vm => {// 进入页面后触发逻辑vm.rows = [ ] //页面数据清空 // rows和total 都是data里面定义的。vm.total =  0 //条数总数也清空 ，//反正就是清空页面数据vm.type = localStorage.getItem('type') || ''  //这个type是从上一个页面传来的参数，因为我有10几个页面都要用，所以存到localStorage里面vm.getData(); //重新调接口});},