前端面试系列-八股文二

1. vue的双向绑定原理是什么？里面的关键点在哪里？

Vue的双向绑定原理是基于Object.defineProperty或者Proxy来实现的，其关键点在于数据劫持，即对数据的读取和修改进行拦截，在数据发生变化时自动更新视图

2. 实现水平垂直居中的方式？

实现水平垂直居中的方式有多种，比如使用Flex布局、绝对定位、margin负值等。

3. 常用伪元素有哪一些？

常用的伪元素有before和after。

4. 移动端如何适配不同屏幕尺寸？

移动端可以通过设置meta标签中的viewport属性来适配不同屏幕尺寸，例如设置width=device-width、initial-scale=1等。

5. 本地存储有哪一些？他们三者有什么区别？

常见的本地存储方式有cookie、localStorage和sessionStorage，它们的区别在于作用域、存储容量和过期时间等方面。

6. JS的数据类型？如何判断js的数据类型?

JavaScript的数据类型包括Number、String、Boolean、Object、Null和Undefined等，可以使用typeof、instanceof和Object.prototype.toString.call()等方法来判断数据类型

7. 说一下ES6的新特性有哪些？

ES6的新特性包括let和const关键字、箭头函数、模板字符串、解构赋值、类和继承、模块化等。

8. Let、const、var三者有什么区别？

let和const是块级作用域的关键字，var是函数作用域的关键字，let和const声明的变量不能重复声明，const声明的变量不可修改。

9. 数组去重有哪些办法？

数组去重的方法包括利用构造函数Set的去重功能、使用循环遍历和对象属性去重等。

10. 说一下深拷贝和浅拷贝，如何自己实现一个深拷贝？

深拷贝和浅拷贝是指在复制对象时，是否对其内部的子对象进行递归复制。实现深拷贝可以使用JSON.parse(JSON.stringify(obj))、递归复制等方法。

11. Vue的生命周期有哪一些？说一下它们每个阶段做什么操作？

Vue的生命周期包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等阶段，每个阶段对应着不同的操作，例如数据初始化、DOM挂载和销毁等。

12. 组件通讯方式有哪一些？

组件通讯方式有props、emit、parent/children、provide/inject和refs等。

13. Vuex有几个属性及作用？

Vuex的属性包括state、getters、mutations、actions和modules等，它们用于管理Vue应用中的状态。

14. Vue的监听属性和计算属性有什么区别？

Vue的监听属性和计算属性都用于监测数据变化，但监听属性是一个函数，需要手动调用，而计算属性是一个属性，会自动计算并缓存结果

15. 说一下防抖和节流。怎么实现？

防抖和节流是用于控制函数执行频率的方法，防抖是在一定时间内只执行最后一次操作，节流是在一定时间内只执行一次操作。可以通过setTimeout和时间戳等方式实现。

16. Vue的导航守卫有哪一些？

Vue的导航守卫包括全局前置守卫、全局后置钩子、路由独享守卫和组件内的守卫等

17. 你的登录拦截怎么实现的？

登录拦截可以通过路由守卫、请求拦截和响应拦截等方式实现

18. 有用过图表吗？用的多吗？

常见的图表库包括ECharts、Highcharts、D3等

19. 闭包是什么？如何实现？

闭包是指函数内部可以访问外部函数的变量，可以用于封装私有变量和实现柯里化等操作。

20. Vue2.0和vue3.0有什么区别？

Vue2.0和Vue3.0的区别在于性能优化、组合式API、响应式系统和虚拟DOM等方面。

21. Vue常用的指令有哪些？

Vue常用的指令包括v-model、v-for、v-if、v-show、v-bind、v-on等。

22. v-If和v-show有什么区别？

v-if和v-show的区别在于前者在条件为false时会销毁对应的DOM元素，而后者只是在样式上隐藏元素。

23. v-for为什么要加一个key？

v-for需要加key属性是为了帮助Vue识别节点的唯一性，提高渲染效率。

24. 你是如何封装一个组件的？

封装一个组件需要考虑组件的输入和输出，可以使用props和$emit等方式实现。

25. 有自己从0到1搭建过项目吗？

从0到1搭建一个完整的项目需要考虑项目架构、技术选型、开发流程、测试和部署等方面

26. 有用过uni-app吗？

uni-app是一款基于Vue的跨平台开发框架，可以用于快速开发小程序、H5、APP等应用。

27. 你会写后台吗？有搞过服务端渲染吗？

后台开发需要掌握服务器端语言和数据库等技术，服务端渲染可以提高页面的首屏加载速度和SEO效果。

28. 说一下你项目中遇到的难点，如何解决？

在项目中遇到的难点可能包括架构设计、性能优化和业务逻辑等方面，需要通过调试和优化等方式解决

29. Url到浏览器的一个过程有哪些步骤？

URL到浏览器的过程包括DNS解析、建立TCP连接、发送HTTP请求、服务器处理请求、浏览器解析渲染页面等步骤

30. 如何实现小程序的request封装及拦截？

可以通过封装request函数和使用拦截器等方式实现小程序的请求封装和拦截。

31. 在vue的项目应用中，不使用框架，怎么封装？

在Vue项目中不使用框架可以使用原生的HTML、CSS和JavaScript来实现，需要手动处理数据和事件等方面。

32. 什么是Js原型？原型链是什么？

JavaScript的原型是指每个对象都有一个原型对象，原型对象又有自己的原型，形成了一条原型链。

33. 组件通讯方式有哪些？

组件通讯方式包括props、emit、parent/children、provide/inject和refs等。

34. 用闭包的原理做过哪些？

闭包可以用于实现柯里化、封装私有变量和缓存等操作。

35. 作用域是什么？

作用域是指变量的可访问范围，JavaScript中有全局作用域和函数作用域等

36. 操作数组的方式有哪些？

操作数组的方式包括遍历数组、添加和删除元素、数组去重和排序等。

37. 0.1 + 0.2 等于 0.3吗？为什么？如何解决？

0.1 + 0.2不等于0.3，这是因为JavaScript采用的是IEEE 754浮点数标准，存在精度问题。可以使用toFixed方法处理。

38. keep-alive是什么？有哪几个生命周期阶段？

keep-alive是Vue中的一个组件，用于缓存组件实例，提高组件的渲染效率，其生命周期包括activated和deactivated等阶段

39. 判断一个变量是否是数组，有哪些办法？

判断一个变量是否是数组可以使用Array.isArray和instanceof等方法。

40. 判断一个变量是否是对象，有哪些办法？

判断一个变量是否是对象可以使用typeof和Object.prototype.toString.call()等方法。

41. 对象/数组常用方法有哪些？

对象/数组常用方法包括push、pop、shift、unshift、slice、splice、concat、map、filter、reduce等。

42. 创建一个空数组/空对象有哪些方式？

创建一个空数组可以使用[]或new Array()，创建一个空对象可以使用{}或new Object()。

43. 哪些遍历方式会改变原数组？

使用forEach、map、filter、reduce等遍历方式不会改变原数组，而使用push、pop、shift、unshift、splice等方法会改变原数组

44. Set和Map各是什么？

Set是一种数据结构，用于存储唯一值，Map是一种键值对数据结构，用于存储任意类型的键和值

45. 介绍一下promise。

Promise是一种异步操作管理的解决方案，用于解决回调地狱问题，其特点是链式调用和状态机制

46. Promise通常会解决三种问题:

• 链式回调

• 同时发起几个异步请求，谁先有结果就拿谁的

• 发起多个请求，等到所有请求后再做下一步处理

这三种方式promise是怎么处理的？

Promise可以通过then方法实现链式回调，通过Promise.all方法实现同时发起多个异步请求，通过Promise.race方法实现等待多个异步请求的结果

47. 如何改变一个函数a的上下文？

可以使用bind、apply和call等方法改变一个函数的上下文

48. Call和replay有什么区别？

call和apply都是用于改变函数上下文的方法，区别在于传入参数的方式不同

49. Evenbus是什么东西？

EventBus是一种事件发布/订阅的机制，可以实现组件之间的通讯

50. Vue中普通的生命周期大概有哪些？

Vue中普通的生命周期包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等阶段。

51. 父子组件生命周期执行顺序是怎么样的？

父子组件生命周期执行顺序是父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted。

52. mixins有几个生命周期阶段？

mixins有beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等生命周期阶段。

53. 弹性布局，一行两列，一列固定宽，如何实现？

实现一行两列，一列固定宽的水平垂直居中布局可以使用Flex布局，父元素设置display: flex; align-items: center; justify-content: center，左侧元素设置flex: 1，右侧元素设置固定宽度

54. Flex：1 包含哪三种属性

Flex：1 包含 flex-grow、flex-shrink和flex-basis三个属性，分别表示元素在剩余空间中的占比、元素在空间不足时的缩放比例和元素的基准大小。

55. Vue中key值作用

提升vue渲染性能

1. vue在渲染的时候, 会先把新DOM与旧DOM进行对比， 如果dom结构一致，则vue会复用旧的dom。（此时可能造成数据渲染异常）
2. 使用key可以给dom添加一个 唯一标识符，让vue强制更新dom。

56. vue组件传值

• 父传子

1. 子组件props定义变量。
2. 父组件在使用子组件时通过行内属性给props变量传值，特点：单向数据流。

• 子传父

1. 子组件：$emit触发父的事件。
2. 父在使用组件用@自定义事件名=父的方法 (子把值带出来), 特点：事件监听非父子组件vuex。

57.vue2生命周期总共分为几个阶段？

核心： 四个阶段8个勾子 Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

1. beforeCreate 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
2. created 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)， 属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el属性目前不可见。
3. beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。
4. mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
5. beforeUpdate 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。
6. updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
7. activated keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。
8. deactivated keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。
9. beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。
10. destroyed Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
11. errorCaptured（2.5.0+ 新增） 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

58. 第一次加载页面会触发哪几个钩子函数？

四个钩子beforeCreate, created, beforeMount, mounted 这几个钩子函数。

59. Vue的路由实现模式：

hash模式和history模式

1. 路径不同 hash有#, history没有

2. 工作模式不同 hash : 修改当前页面hash,不需要服务器额外配置history: 会给服务器发送请求，需要服务器配置

3. hash模式：在浏览器中符号#，#以及#后面的字符称之为hash，用 window.location.hash 读取。特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。

4. history模式：history采用HTML5的新特性；且提供了两个新方法： pushState()， replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更

60. 请说出路由配置项常用的属性及作用路由配置参数：

path: 跳转路径component : 路径相对于的组件
name: 命名路由
children:子路由的配置参数(路由嵌套)
props:路由解耦
redirect : 重定向路由

61. 说一下你在vue中踩过的坑

1. 操作data中的数据，发现没有响应式
   原因： 数组中有很多方法，有的会改变数组（例如pop push）,有的不会改变数组（例如slice, filter）
   解决方案：通过Vue.set(对象，属性，值)这种方式就可以达到，对象新添加的属性是响应式的

2. 在created操作dom的时候，是报错的，获取不到dom，这个时候实例vue实例没有挂载
   解决方案：Vue.nextTick(回调函数进行获取)

62. Vue 的 nextTick 的原理是什么? 为什么需要 nextTick?

Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了。

63. 事件循环中宏任务和微任务

常见的宏任务有 script, setTimeout, setInterval, setImmediate（一种执行更加频繁的定时器
常见的微任务有 ,Promise.then(), async

64. v-slot插槽与作用域插槽

1. 插槽作用：父组件 传递 html结构 给 子组件
2. 具名插槽作用：父组件 传递 多个html结构 给 子组件
3. 作用域插槽作用：父组件 给 子组件 传递插槽 时，可以使用子组件内部的数据

65. vue路由作用与原理

• 作用: 实现单页面应用
• 原理：监听location的hash值

66. 自定义指令的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?

• 全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。
• 组件内定义指令：directives钩子函数：bind(绑定事件触发)、inserted(节点插入的时候触发)、update(组件内相关更新)
• 钩子函数参数：el、binding