前端面试题

0、如果你想在非 Vue 组件的地方（比如在普通的 JavaScript 文件或全局作用域中）使用 this.$message，你可以通过访问全局的 Vue 实例来调用这个方法。在 Vue.js 中，通常可以通过 window.Vue 来访问全局的 Vue 实例，并调用挂载在原型链上的方法。

// 假设 Vue 实例已经挂载到全局的 window.Vue 上

// 调用全局的 Vue 实例的 $message 方法来显示消息提示

window.Vue.prototype.$message({ message: '这是一条全局消息提示', type: 'success' });

1、说一下innerHTML 与 innerText的作用与区别？

1. 作用：都可以获取或者设置元素的内容
2. 区别：innerHTML可以解析内容中的html标签
3. innerText不能解析内容中的html标签

2、==和===的区别

1. 双等号判断时，只需要值相等
2. 三等号判断时，需要值与类型都相等

3、数组方法pop() push() unshift() shift()

1. pop()尾部删除
2. push()尾部添加
3. unshift()头部添加
4. shift()头部删除

4、json格式的数据一般什么情况下会用

数据传输的时候

5、split() join() 的区别

split()：以指定的字符分割字符串返回一个数组,字符串方法

join(): 以指定的字符连接数组中元素返回一个字符串,数组方法

6、.map和.forEach的区别

1）Array.map()：此方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组

2）Array.forEach()：此方法是将数组中的每个元素执行传进提供的函数，没有返回值，直接改变原数组，注意和 map 方法区分

7、浅拷贝与深拷贝有何区别？如何实现？

浅拷贝：拷贝的是原对象的内存地址

深拷贝：在内存中把原对象复制一份

浅拷贝的实现方式有：

        （1）直接变量赋值

        （2）Object.assign()；但目标对象只有一层的时候，是深拷贝；

        （3）扩展运算符(...)；目标对象只有一层的时候，是深拷贝；

深拷贝就是在拷贝数据的时候，将数据的所有引用结构都拷贝一份。

深拷贝的实现方式有：

        （1）结合使用JSON.parse()和JSON.stringify()方法。

8、在JS中编码与解码URL

.encodeURI() 可以对字符串编码

.decodeURI() 可以对字符串解码

9、rgba()和 opacity 的透明效果有什么不同？

答案：

相同点 : rgba()和 opacity 都能实现透明效果，

不同点 : 但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度，而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）

10、请说一下你用过的浏览器存储，并说出它们的区别?

sessionStorage

localStorage

cookie

相同点 : 三者都是在浏览器本地存放数据;

区别 :

sessionStorage：数据只存在于会话期间

localStorage：数据永久存储

cookie：数据默认会话结束时过期，但可以设置过期时间，在请求服务端，浏览器会默认把cookie数据发送给服务器，cookie能存放的数据相对较小

11、如何对一个数组进行去重？

方式一：

var arr01 = [2,3,4,2,2,2,3];

var arr02 = [];

for(var i = 0; i < arr01.length; i++){

  if( arr02.indexOf(arr01[i]) === -1 ){

    arr02.push(  arr01[i]  )

  }

}

方式二(set去重)：

var arr01 = [2,5,2,2,5,7];

var set = new Set(arr01)

12、v-show 与 v-if 的区别？

v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏；

v-if指令是直接 销毁 和 重建 DOM达到让元素显示和隐藏的效果；

1. var、let、const区别

14、promise和async，await的区别？

15、父子组件传值

16、vuex的理解使用获取

17、vue 的生命周期 八个阶段

beforeCreate： 在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法

created： data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作

beforeMount： 执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的

mounted： 执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行

beforeUpdate： 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步

updated： 页面显示的数据和data中的数据已经保持同步了，都是最新的

beforeDestory： Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁

destroyed： 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。

18、vue中ref的作用？

操作dom元素

1. 如何排查问题

比如页面的一个点击事件没反应