公司面试题总结（七）

37.async 函数是什么，有什么作用

async 函数是 ECMAScript 2017（ES8）引入的一种特殊函数，用于简化异步操作的编写，使

得异步代码看起来更像是同步代码，提高了代码的可读性和可维护性。它的核心特点和作用

包括：

⚫ 声明方式：

通过在函数声明前加上 async 关键字来定义一个异步函数。例如：async

function myFunction() {...}。

⚫ 返回 Promise：

async 函数会隐式地返回一个 Promise 对象。即使函数体没有显式返回

任何值，它也会返回一个 resolved 的 Promise（值为 undefined）。如果函数体中有显式

的 return 语句返回一个直接值，那么这个值会被封装进一个 resolved 的 Promise 中。

如果 return 语句返回一个 Promise，那么这个 Promise 就会被直接返回。

⚫ 使用 await：

在 async 函数内部，可以使用 await 关键字来“等待”Promise 的结果。await

会使代码暂停执行，直到 Promise 解析完成（无论是 resolve 还是 reject），然后继续执

行后续代码。这使得程序员可以按照顺序书写异步操作，而不用嵌套回调函数（俗称“回

调地狱”）。

⚫ 错误处理：

async 函数中的错误可以通过 try/catch 语句来捕获，就像处理同步代码的错

误一样，这使得错误处理变得更加集中和直观。

⚫ 内置执行器：

与 Generator 函数相比，async 函数自带执行器，无需手动调用 next 方法

或使用 co 这样的库来执行。调用 async 函数就像调用普通函数一样简单，async 函数

会立即返回一个 Promise，并在内部自动执行。

38.有使用过 vue 吗？说说你对 vue 的理解

vue :Vue.js 创建用户界面的开源 JavaScript 框架，创建单页应用的 Web 应用框架.2016 年

Vue 核心特性

⚫ 数据驱动（MVVM) Model-View-ViewModel

◼ Model：模型层，负责处理业务逻辑以及和服务器端进行交互

◼ View：视图层：负责将数据模型转化为 UI 展示出来，可以简单的理解为 HTML 页

面

◼ ViewModel：视图模型层，用来连接 Model 和 View，是 Model 和 View 之间的通

信桥梁

⚫ 组件化

◼ 把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，

◼ 在 Vue 中每一个.vue 文件都可以视为一个组件

◼ 组件化的优势

        ◆ 降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组

                件快速完成需求

        ◆ 调试方便，在出现问题的时候，能够快速定位，每个组件之间低耦合，职责单

                一，所以逻辑会比分析整个系统要简单

        ◆ 提高可维护性，组件的职责单一，在系统中被复用，代码优化系统整体升级

⚫ 指令系统

◼ 带有 v- 前缀的特殊属性

◼ 作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

◼ 常用的指令:

        ◆ 条件渲染指令 v-if

        ◆ 列表渲染指令 v-for

        ◆ 属性绑定指令 v-bind

        ◆ 事件绑定指令 v-on

        ◆ 双向数据绑定指令 v-model

Vue 和 React 对比

⚫ #相同点

◼ 都有组件化思想

◼ 都支持服务器端渲染

◼ 都有 Virtual DOM（虚拟 dom）

◼ 数据驱动视图

◼ 都有支持 native 的方案：Vue 的 weex、React 的 React native

◼ 都有自己的构建工具：Vue 的 vue-cli、React 的 Create React App

⚫ #区别

◼ 数据流向的不同。

        ◆ react 从诞生开始就推崇单向数据流，

        ◆ 而 Vue 是双向数据流

◼ 数据变化的实现原理不同。

        ◆ react 使用的是不可变数据，

        ◆ 而 Vue 使用的是可变的数据

◼ 组件化通信的不同。

        ◆ react 中我们通过使用回调函数来进行通信的，

        ◆ 而 Vue 中子组件向父组件传递消息有两种方式：事件和回调函数

◼ diff 算法不同。

        ◆ react 主要使用 diff 队列保存需要更新哪些 DOM，得到 patch 树，再统一操作

                批量更新 DOM。

        ◆ Vue 使用双向指针，边对比，边更新 DOM

39.你对 SPA 单页面的理解，它的优缺点分别是什么？如何实现 SPA 应用呢

⚫ 单页应用 SPA

◼ 一种网络应用程序或网站的模型

◼ 通过动态重写当前页面来与用户交互，

◼ 这种方法避免了页面之间切换打断用户体验在单页应用中，

◼ 所有必要的代码（HTML、JavaScript 和 CSS）都通过单个页面的加载而检索，

◼ 或者根据需要动态装载适当的资源并添加到页面

⚫ 优点：

◼ 具有桌面应用的即时性、网站的可移植性和可访问性

◼ 用户体验好、快，内容的改变不需要重新加载整个页面

◼ 良好的前后端分离，分工更明确

⚫ 缺点：

◼ 不利于搜索引擎的抓取

◼ 首次渲染速度相对较慢

实现一个 SPA

⚫ 原理

◼ 监听地址栏中 hash 变化驱动界面变化

◼ 用 pushsate 记录浏览器的历史，驱动界面发送变化

⚫ 实现

◼ hash 模式

◆ 核心通过监听 url 中的 hash 来进行路由跳转

◼ history 模式

◆ history 模式核心借用 HTML5 history api，api 提供了丰富的 router 相关属性

先了解一个几个相关的 api

◆ history.pushState 浏览器历史纪录添加记录

◆ history.replaceState 修改浏览器历史纪录中当前纪录

◆ history.popState 当 history 发生变化时触发

40.SPA 首屏加载速度慢的怎么解决？

⚫ 首屏加载

◼ 首屏时间:浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间

◼ 整个网页不一定要全部渲染完成，需要展示当前视窗需要的内容

⚫ 加载慢的原因

◼ 网络延时问题

◼ 资源文件体积过大

◼ 资源重复发送请求去加载

◼ 加载脚本时，渲染内容堵塞

⚫ 解决方案

◼ 减小入口文件体积: 路由懒加载

◼ 静态资源本地缓存:

◆ 后端 返回资源问题：

⚫ 采用 HTTP 缓存，设置 Cache-Control，Last-Modified，Etag 等响应头

⚫ 采用 Service Worker 离线缓存

◆ 前端 合理利用 localStorage

◼ UI 框架按需加载 ◼ 图片资源的压缩

◼ 组件重复打包:

◆ 在 webpack 的 config 文件中，修改 CommonsChunkPlugin 的配置

◆ minChunks 为 3 表示会把使用 3 次及以上的包抽离出来，放进公共依赖文件，

避免了重复加载组件

◼ 图片资源的压缩

◼ 开启 GZip 压缩 :安装 compression-webpack-plugin

◼ 使用 SSR

41.VUE 路由的原理，说说路由传参，路由模式，路由导航守卫？

⚫ Vue Router 是 Vue.js 的官方路由管理器

⚫ 为单页面应用程序（SPA）提供了灵活的路由解决方案

⚫ 允许用户在不同的视图之间进行导航而不需要重新加载整个页面。

⚫ Vue 路由原理

◼ 前端路由：

◆ Vue Router 利用浏览器 History API（ history 模式 ）或 URL 的哈希（ hash 模

式 ）来改变 URL，而不会引起页面的刷新。

◆ 看起来像在浏览不同的页面，但实际上是在同一个页面上展示不同的内容。

◼ 组件切换：

◆ 每个路由映射到一个组件

◆ 当 URL 改变时，Vue Router 自动加载对应组件并渲染，实现页面之间切换。

◼ 响应式更新：

◆ 利用 Vue 的响应式系统，确保 URL 的变化能够实时反映在 UI 上，同时也确

保组件的状态能根据 URL 的变化而更新。

⚫ 路由传参

◼ params ：

◆ 传递动态路由参数，在路由配置中定义。

◆ 传参时，使用 router-link 或 router.push 直接传递，或通过 name 匹配时通过

params 对象传递。

◆ 参数不会显示在 URL 的查询字符串中，而是作为 URL 的一部分。

◼ query ：

◆ 类似 HTTP 的 GET 请求参数，通过 URL 的查询字符串传递，可以直接在路由

地址后面添加?key=value 形式。

◆ 参数显示在 URL 中，通过 this.$route.query 访问。

⚫ 路由模式

◼ hash 模式： 默认模式，使用 URL 的 hash（#）来作为路由的标识符。优点是兼容

性好，几乎所有的浏览器都支持，但 URL 不够美观。

◼ history 模式： 利用 HTML5 的 History API（pushState、replaceState）来改变 URL，

不包含#，看起来更像传统的页面链接。需要后端配合进行配置，以避免直接访问

时 404 错误。

◼ abstract 模式： 主要用于服务端渲染或非浏览器环境，不依赖于 HTML5 History API 或 hash。

⚫ 全局守卫：

◼ 全局守卫作用于所有路由，包括进入路由、离开路由、进入子路由和离开子路由。

◼ 全局守卫有三个：beforeEach、beforeResolve 和 afterEach

◼ beforeEach 在路由跳转之前被调用，可以执行一些前置逻辑，如鉴权、重定向等；

◼ beforeResolve 在路由解析之前被调用，可以执行一些额外逻辑，如获取数据等；

◼ afterEach 在路由跳转之后被调用，通常用于执行一些清理工作。

⚫ 路由独享守卫：

◼ 路由独享守卫只针对特定的路由进行守卫，只有前置守卫，没有后置守卫。

◼ 在路由配置中定义 beforeEnter 守卫，当路由即将被访问时，该守卫将被调用。

⚫ 组件内守卫：

◼ 组件内守卫是针对组件级别的守卫

◼ 主要有三个：beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave。

◼ beforeRouteEnter 在路由进入组件之前被调用，可以在这里执行一些初始化操作；

◼ beforeRouteUpdate 在路由参数改变导致组件重新渲染之前被调用，可以在这里

执行一些更新操作；

◼ beforeRouteLeave 在路由即将离开组件时被调用,可以在这里执行一些清理工作。

42.Vue 中组件和插件有什么区别？

⚫ 编写形式

◼ 编写组件

◆ vue 单文件 template/ script/ style，每一个.vue 文件都可以看成是一个组件

◆ 通过 template 属性来编写一个组件

◼ 编写插件

◆ 暴露一个 install 方法。

◆ 第一个参数是 Vue 构造器，

◆ 第二个参数是一个可选的选项对象

MyPlugin.install = function (Vue, options) {

⚫ 注册形式

◼ 组件注册

◆ 全局注册 Vue.component 方法，第一个参数组件名称，第二个参数配置项

◆ 局部注册通过 components 属性注册一个组件

◼ 插件注册

◆ 插件的注册通过 Vue.use()的方式进行注册（安装），

◆ 第一个参数为插件的名字，

◆ 第二个参数是可选择的配置项

Vue.use(插件名字,{ /* ... */} )

⚫ 使用场景

◼ 组件构成 App 的业务模块，它的目标是 App.vue

◼ 插件是用来增强技术栈的功能模块，它的目标是 Vue 本身