2023.11.16.12：00面试

1.vite的部署的方式

2023/11/16 13:14:37

Vite是一种高性能的去中心化应用程序（DApp）开发平台。它使用了一种名为"DAG+区块链"的混合共识算法，以提供快速的交易确认和可扩展性。

以下是Vite的部署方式：

安装Vite环境：首先，您需要在您的开发环境中安装Vite软件包。您可以在Vite的官方网站上找到详细的安装指南。
创建项目：使用Vite命令行工具，您可以创建一个新的Vite项目。运行命令vite create，然后按照提示进行操作。这将创建一个基本的Vite项目结构。
开发DApp：进入您的新创建的Vite项目目录，并开始开发您的DApp。您可以使用JavaScript或TypeScript编写智能合约、前端界面和其他必要的功能。
运行本地节点：在开发过程中，您可以在本地运行一个Vite节点来测试您的DApp。运行命令vite即可启动本地节点。该节点将帮助您进行本地调试和测试。
部署到测试网：当您完成了对DApp的开发和测试后，您可以将其部署到Vite的测试网（TestNet）。这将允许其他人在测试环境中使用和评估您的DApp。您可以使用Vite的命令行工具来进行部署，具体步骤可以在Vite的文档中找到。
部署到主网：一旦您的DApp在测试环境中经过充分测试并且准备好发布，您可以将其部署到Vite的主网（MainNet）。这将使您的DApp可以被广泛访问和使用。与测试网部署类似，您可以使用Vite的命令行工具来进行主网部署。

请注意，以上步骤仅提供了一个概述，实际的部署过程可能因您的具体需求而有所不同。建议您查阅Vite的官方文档以获取更详细和最新的部署指南。

2.js数据类型

JavaScript 中的数据类型包括原始数据类型和对象数据类型。

原始数据类型（Primitive Data Types）:
- 字符串 (String): 用于表示文本数据，例如 "Hello, World!"。
- 数字 (Number): 用于表示数值，包括整数和浮点数，例如 42 或 3.14。
- 布尔值 (Boolean): 用于表示逻辑值，true 或 false。
- 空值 (null): 表示一个空值或未赋值的变量。
- 未定义 (undefined): 表示一个未定义的变量或属性。
- 符号 (Symbol): ES6 引入的一种数据类型，表示唯一的、不可变的值。
对象数据类型（Object Data Type）:
- 对象 (Object): 表示复合值，可以包含多个键值对。例如 { name: "Alice", age: 25 }。
- 数组 (Array): 一种特殊的对象，用于存储多个值，例如 [1, 2, 3]。
- 函数 (Function): 实际上是对象的一个子类型，具有可调用的行为。
- 日期 (Date): 用于表示日期和时间的对象。
- 正则表达式 (RegExp): 用于处理文本的模式匹配对象。

在 JavaScript 中，变量的数据类型可以动态改变，这意味着同一个变量可以在不同阶段保存不同类型的数据。此外，JavaScript 是一种弱类型语言，允许隐式类型转换，这可能导致一些意外的行为。因此，在编写 JavaScript 代码时，理解数据类型以及它们之间的转换规则非常重要

3.undefined和null的区别返回类型

在 JavaScript 中，undefined 和 null 是两种表示空值或未定义值的数据类型。

区别如下：

undefined（未定义）：
- undefined 表示一个未初始化的变量或属性，即没有为其赋值。
- 当您声明一个变量但没有显式地给它赋值时，它的默认值就是 undefined。
- typeof undefined 返回 "undefined"，表示它是一种特殊的原始数据类型。
null（空值）：
- null 表示一个空值或者说是一个空对象指针。
- null 是由开发人员显式地赋值给变量或属性的。
- typeof null 返回 "object"，这是因为在 JavaScript 的历史中，null 被错误地认为是一种对象。

总结：

undefined 表示变量未定义或属性不存在，是一种默认的未赋值状态。
null 表示明确赋值为空值或空对象指针，是开发人员显式赋值的结果。

请注意，虽然 typeof null 返回 "object"，但 null 不是对象，而是一种原始数据类型。这是 JavaScript 的历史遗留问题，并不影响我们正确使用 null。

4.两个=和三个=区别

在 JavaScript 中，"==" 和 "===" 是两个比较运算符，用于比较两个值的相等性。它们之间的区别如下：

双等号 "=="（相等运算符）：
- 使用双等号进行比较时，会进行类型转换。
- 如果被比较的两个值类型不同，JavaScript 会尝试将其转换为相同的类型，然后再进行比较。
- 在类型转换的过程中，JavaScript 会进行一系列隐式的类型转换规则，使得两个值可以进行比较。
- 例如，使用双等号比较 1 和 "1"，JavaScript 会将字符串 "1" 转换为数字 1，然后比较它们的数值是否相等。
三等号 "==="（严格相等运算符）：
- 使用三等号进行比较时，不会进行类型转换。
- 只有当被比较的两个值类型相同且值也相等时，才会返回 true。
- 如果类型不同或值不相等，就会返回 false。
- 例如，使用三等号比较 1 和 "1"，由于它们的类型不同，所以返回 false。

总结：

"==" 进行比较时会进行类型转换，允许不同类型的值进行比较。
"===" 进行比较时不进行类型转换，要求类型和值都相等才返回 true。

在一般情况下，建议使用 "===" 来进行比较，因为它不会引发意外的类型转换，可以更准确地比较值的相等性。

5.对象是否包含name属性用什么方法

在 JavaScript 中，您可以使用 in 操作符来检查对象是否包含特定的属性。in 操作符返回一个布尔值，用于表示对象是否包含指定的属性。

下面是使用 in 操作符检查对象是否包含名为 "name" 的属性的示例：

const obj = { name: "Alice", age: 25 };

if ("name" in obj) {
  console.log("对象包含名为 'name' 的属性");
} else {
  console.log("对象不包含名为 'name' 的属性");
}

在上面的示例中，如果对象 obj 包含名为 "name" 的属性，"name" in obj 表达式的值将为 true，从而执行相应的代码块。

使用 in 操作符可以方便地检查对象中是否存在特定的属性，这在编写动态代码时非常有用。

6.对象怎么遍历的

在 JavaScript 中，可以使用不同的方法来遍历对象的属性。下面介绍几种常用的遍历对象的方式：

for...in 循环：
- 使用 for...in 循环可以遍历对象的可枚举属性（包括原型链上的属性）。
- 通过循环变量可以获取到每个属性的名称，然后可以通过对象名和属性名获取属性的值。
- 示例：
```
javascriptCopy Codeconst obj = { a: 1, b: 2, c: 3 };

for (let key in obj) {
  console.log(key + ": " + obj[key]);
}
```
Object.keys() 方法：
- Object.keys() 方法返回一个包含对象自身可枚举属性的数组。
- 可以使用 Object.keys() 结合 forEach() 或 map() 方法来遍历对象的属性。
- 示例：
```
javascriptCopy Codeconst obj = { a: 1, b: 2, c: 3 };

Object.keys(obj).forEach(function(key) {
  console.log(key + ": " + obj[key]);
});
```
Object.entries() 方法：
- Object.entries() 方法返回一个包含对象自身可枚举属性键值对的数组。
- 可以使用 Object.entries() 结合 forEach() 或 map() 方法来遍历对象的属性和对应的值。
- 示例：
```
javascriptCopy Codeconst obj = { a: 1, b: 2, c: 3 };

Object.entries(obj).forEach(function([key, value]) {
  console.log(key + ": " + value);
});
```

请注意，上述方法都只会遍历对象的可枚举属性。如果需要遍历所有属性（包括不可枚举属性），可以使用 Object.getOwnPropertyNames() 或 Reflect.ownKeys() 方法。

总结：

使用 for...in 循环可以遍历对象的可枚举属性。
Object.keys() 返回一个包含对象自身可枚举属性的数组。
Object.entries() 返回一个包含对象自身可枚举属性键值对的数组。

7.哪些是Es6提供的数组方法

ES6（ECMAScript 2015）引入了许多新的数组方法，这些方法提供了更便捷、更强大的数组操作功能。以下是 ES6 提供的一些常用数组方法：

Array.from()：
- 从类数组对象或可迭代对象创建一个新的数组。
- 可以接受类数组对象、可迭代对象或具有 length 属性的对象作为参数。
Array.of()：
- 根据传入的参数创建一个新的数组。
- 解决了使用 Array 构造函数创建数组时的一些不直观行为。
find()：
- 返回数组中满足提供的测试函数的第一个元素的值。
- 如果没有找到符合条件的元素，则返回 undefined。
findIndex()：
- 返回数组中满足提供的测试函数的第一个元素的索引。
- 如果没有找到符合条件的元素，则返回 -1。
includes()：
- 判断数组是否包含某个指定的值。
- 返回布尔值，表示数组中是否包含指定的值。
fill()：
- 用静态值填充数组中从起始索引到结束索引内的全部元素。
- 可以指定填充的起始位置和结束位置。
entries()：
- 返回一个包含数组键值对的迭代器对象。
- 迭代器对象的每个元素都是一个数组，其中第一个元素是索引，第二个元素是对应的值。
keys()：
- 返回一个包含数组索引的迭代器对象。
- 迭代器对象可以用于遍历数组的索引。

这些方法是 ES6 新增的一部分，它们提供了更多的灵活性和便利性，使得 JavaScript 中的数组操作变得更加简洁和高效。

8.数组的清空方法

清空数组有多种方法，以下是几种常用的方式：

直接赋值为空数组：
```
javascriptCopy Codeconst arr = [1, 2, 3];
arr.length = 0;
```
- 将数组的长度（length）设置为 0，这样数组就被清空了。
使用 splice() 方法：
```
javascriptCopy Codeconst arr = [1, 2, 3];
arr.splice(0, arr.length);
```
- splice() 方法用于删除数组元素，通过指定起始索引和删除的个数来清空数组。
使用循环遍历并逐个删除元素：
```
javascriptCopy Codeconst arr = [1, 2, 3];
while (arr.length) {
  arr.pop();
}
```
- 使用 pop() 方法不断删除数组的最后一个元素，直到数组为空。
覆盖原数组：
```
javascriptCopy Codelet arr = [1, 2, 3];
arr = [];
```
- 将一个新的空数组赋值给原数组变量，原数组就被清空了。

请注意，上述方法都会改变原数组的内容。如果你需要保留原数组，并创建一个新的空数组，可以使用以下方式：

javascriptCopy Codeconst arr = [1, 2, 3];
const emptyArr = [];

根据具体的需求和场景，选择适合的方法来清空数组。

9.Es6新增的特性

ECMAScript 2015（简称 ES6）带来了许多新的特性和语言改进，这些特性包括但不限于以下几点：

let 和 const 声明：引入了块级作用域的变量声明方式，let 用于声明块级作用域的变量，const 用于声明不可变的常量。
箭头函数：使用 => 符号定义匿名函数，简化了函数的书写，并且自动绑定了 this 关键字。
模板字符串：使用反引号（``）来创建多行字符串，同时可以嵌入变量和表达式，提供了更灵活的字符串处理方式。
默认参数值：在函数定义中可以为参数设置默认值，简化了函数调用时的参数处理。
扩展运算符（...）：用于将一个数组转为用逗号分隔的参数序列，或者将对象转为用逗号分隔的参数序列。
解构赋值：可以轻松地从数组或对象中提取值并赋给变量，提供了便捷的数据解构操作。
类和继承：引入了类的概念，以及使用 extends 关键字进行继承，使得 JavaScript 更加接近传统面向对象编程语言。
Promise：引入了 Promise 对象，用于更加优雅地处理异步操作，解决了回调地狱的问题。
Map 和 Set 数据结构：引入了 Map 和 Set 这两种新的数据结构，提供了更灵活的数据存储和处理方式。
模块化：引入了支持模块化的语法，包括 import 和 export 关键字，使得 JavaScript 在组织代码上更加灵活和清晰。
Symbol 数据类型：引入了一种新的基本数据类型 Symbol，用于表示独一无二的值。

以上只是 ES6 引入的部分新特性，实际上 ES6 还带来了许多其他的语法糖、方法和功能，使得 JavaScript 的语法更加现代化和强大。

10.Es5新增的数组方法

ECMAScript 5（简称 ES5）引入了一些新的数组方法，极大地丰富了对数组的操作和处理能力。以下是其中几个常用的数组方法：

forEach()：对数组中的每个元素执行指定的操作，没有返回值。

var arr = [1, 2, 3];
arr.forEach(function(element) {
  console.log(element);
});

map()：对数组中的每个元素执行指定的操作，并返回操作后的结果组成的新数组。
```
var arr = [1, 2, 3];
var newArr = arr.map(function(element) {
  return element * 2;
});
```

filter()：根据指定的条件过滤数组中的元素，返回符合条件的元素组成的新数组。

var arr = [1, 2, 3, 4, 5];
var filteredArr = arr.filter(function(element) {
  return element % 2 === 0;
});

reduce()：通过指定的函数累加器将数组元素归约为单个值。

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

every()：检测数组中的所有元素是否都符合指定条件，如果是，则返回 true；否则返回 false。
```
var arr = [1, 2, 3, 4, 5];
var result = arr.every(function(element) {
  return element > 0;
});
```
some()：检测数组中是否有至少一个元素符合指定条件，如果是，则返回 true；否则返回 false。
```
var arr = [1, 2, 3, 4, 5];
var result = arr.some(function(element) {
  return element % 2 === 0;
});
```

这些方法的引入丰富了对数组的遍历、筛选、映射和归约等操作，使得处理数组数据更加方便和高效。

11.Es6新增的数组方法

同7

12.子类调用父类的构造函数

在 JavaScript 中，子类可以通过 super() 方法调用父类的构造函数。这样做的目的是在创建子类实例时，先执行父类的初始化逻辑，然后再执行子类自身的初始化逻辑。

以下是一个示例代码，展示了子类如何调用父类的构造函数：

class Parent {
  constructor(name) {
    this.name = name;
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name); // 调用父类的构造函数
    this.age = age;
  }
}

var child = new Child("Tom", 10);
console.log(child.name); // 输出：Tom
console.log(child.age); // 输出：10

在上面的代码中，Child 类继承自 Parent 类。在 Child 类的构造函数中，通过 super(name) 调用了父类 Parent 的构造函数，并传递了 name 参数。这样，在创建 Child 实例时，会先执行父类的构造函数来初始化 name 属性，然后再执行子类自身的构造函数来初始化 age 属性。

需要注意的是，如果子类自己定义了构造函数，那么就必须在构造函数中调用 super() 方法，否则会导致错误。同时，在调用 super() 方法之前，也不能使用 this 关键字。

13.使用echarts遇到大数据

当使用 ECharts 处理大数据量时，可以采取一些优化策略来提高性能和效率。以下是一些常用的优化技巧：

数据筛选与聚合：对于大数据集，可以在前端进行数据筛选和聚合，以减少要渲染和处理的数据量。可以根据需求选择只显示部分数据，或者通过算法进行聚合，展示汇总信息。
分块加载：将大数据集按照分块的方式加载到图表中，只在用户交互或滚动到可视区域时加载当前可见的数据块。这种方式可以减少初始加载时间，并且可以保持较快的响应。
数据采样：对于非连续型的数据，可以采用数据采样的方式，降低数据密度，以减少要处理和绘制的数据点数量。例如，可以选择每隔一定间隔取样一个数据点，或者对数据进行统计和抽样。
使用 Web Worker：利用 Web Worker 将数据处理和计算工作转移到后台线程，避免阻塞主线程，提高图表的响应速度和流畅性。
图表配置优化：在 ECharts 的配置中，可以针对大数据集进行一些优化配置，比如关闭动画效果、缩减图表渲染细节等，以提高性能和渲染速度。
硬件加速：利用浏览器的硬件加速特性，例如 GPU 加速，可以通过 CSS 属性 transform: translateZ(0) 或 will-change: transform 来触发硬件加速，提高图表的渲染性能。
数据压缩：如果数据量非常大且传输时间较长，可以考虑对数据进行压缩，减少网络传输的数据量。在前端进行数据解压后再进行处理和展示。

以上是一些常见的优化策略，可以根据具体情况选择适合的方案来处理大数据量的情况。

14.vue选项式api和组合式api区别

在 Vue 3 中，引入了两种不同的组件编写方式：选项式 API 和组合式 API。

选项式 API 是 Vue 2.x 中常用的方式，它使用 data、computed、methods 等选项来定义组件的属性、计算属性和方法。这种方式比较直观和熟悉，适用于简单的组件或者小型项目。

而组合式 API 是 Vue 3 引入的新特性，它通过 setup 函数来组织组件的逻辑。setup 函数是一个在组件内部调用的函数，它接收两个参数：props 和 context。在 setup 函数中，可以使用响应式 API（如 reactive、ref）来创建响应式数据，以及使用 computed、watch 等函数来处理数据和副作用。此外，还可以返回要在模板中使用的数据和方法。组合式 API 的优势在于更灵活、更可组合性，并且提供了更好的 TypeScript 支持。

下面是选项式 API 和组合式 API 的一些区别：

选项式 API：

使用 data、computed、methods 等选项来定义组件的属性和方法。
通过 this 访问组件实例。
对于复杂组件，逻辑散布在不同选项中，不够集中和清晰。

组合式 API：

使用 setup 函数来组织组件的逻辑。
通过函数参数访问 props 和 context，而不是通过 this。
可以使用响应式 API、计算属性和副作用等功能。
显式地声明依赖关系，提高代码可读性和维护性。
更好的 TypeScript 支持。

总体而言，选项式 API 更适合简单的组件或者小型项目，而组合式 API 更适合复杂的组件或者大型项目，它提供了更灵活和可组合的方式来组织和管理组件的逻辑。

15.你理解的虚拟DOM是啥

虚拟 DOM（Virtual DOM）是一种将页面的状态抽象成 JavaScript 对象，并通过对比前后两个状态的差异来进行高效的页面更新的技术。

在传统的 Web 开发中，当页面的状态发生改变时，我们通常直接操作真实的 DOM 元素来更新页面。但是，频繁的直接操作 DOM 可能会导致性能下降，因为 DOM 操作是相对昂贵的。

虚拟 DOM 的思想是将真实的 DOM 结构映射成 JavaScript 对象树，即虚拟 DOM 树。当页面的状态发生变化时，先在内存中构建一颗新的虚拟 DOM 树，然后通过比较新旧两棵树的差异，找出需要更新的部分，并将这些差异批量更新到真实的 DOM 上。这种批量更新的方式可以减少直接操作 DOM 的次数，提高性能。

虚拟 DOM 的工作流程大致如下：

初始化阶段：将初始的状态映射为虚拟 DOM 树。
渲染阶段：根据虚拟 DOM 树生成真实的 DOM 并渲染到页面上。
更新阶段：当状态发生变化时，生成新的虚拟 DOM 树。
对比阶段：比较新旧两棵虚拟 DOM 树的差异，找出需要更新的部分。
批量更新阶段：将差异部分批量更新到真实 DOM 上。

虚拟 DOM 的优势在于它能够以更高效的方式进行页面更新，尤其是在复杂的页面结构和频繁的状态变化时，可以减少不必要的 DOM 操作，提高性能。同时，虚拟 DOM 也提供了更方便的开发方式，使得组件化和跨平台的实现更加容易。

16.pinai和vuex区别

Pinia 和 Vuex 都是 Vue.js 中用于状态管理的工具，但它们之间存在一些区别。

基于响应式 API 的设计：Pinia 是基于 Vue 3 的 Composition API 和响应式 API 设计的，而 Vuex 主要是为 Vue 2 设计的，尽管 Vuex 也能在 Vue 3 中使用，但它仍然是基于 Vue 2 的 Options API。因此，Pinia 在使用上更加符合 Vue 3 的设计理念，而且在 TypeScript 支持方面也更加友好。
模块化和组合性：在 Pinia 中，状态管理是通过创建独立的 store 实例来管理模块化的状态，并且可以通过组合来创建具有复杂逻辑的状态管理结构。而在 Vuex 中，状态管理是基于单一的全局 store，模块化的支持是通过模块（modules）来实现的。
类型支持：由于 Pinia 是基于 Vue 3 和 TypeScript 的，因此它对于 TypeScript 的支持更加完善。它能够更好地与 TypeScript 结合使用，提供更好的类型推断和类型安全。
插件生态和社区支持：由于 Vuex 是在 Vue.js 社区中发展起来的最早的状态管理库之一，因此它有着非常庞大的生态和社区支持，有大量的第三方插件可供选择。而 Pinia 是较新的库，因此在生态和社区支持方面可能相对较弱。

综上所述，Pinia 和 Vuex 都是用于状态管理的工具，Pinia 更适合于 Vue 3 项目，并且在模块化、类型支持等方面有一些优势，而 Vuex 则有着更加成熟的生态和广泛的社区支持。选择使用哪个取决于项目的需求、团队的技术栈以及个人的喜好。

17.pinia的模块化使用的是

在 Pinia 中，你可以使用 defineStore 函数来创建模块化的 store。这个函数可以帮助你定义一个包含状态、mutations、actions 等内容的 store 模块。

下面是一个简单的示例，演示了如何在 Pinia 中创建一个模块化的 store：

import { defineStore } from 'pinia';

// 创建一个名为 counter 的模块化 store
export const useCounterStore = defineStore({
  id: 'counter', // 每个 store 都需要一个唯一的 id

  // 定义状态
  state: () => ({
    count: 0,
  }),

  // 定义 mutations
  mutations: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },

  // 定义 actions
  actions: {
    async incrementAsync() {
      await new Promise((resolve) => setTimeout(resolve, 1000));
      this.increment();
    },
  },
});

在上面的示例中，我们首先导入 defineStore 函数，然后使用它来创建一个名为 useCounterStore 的模块化 store。在 defineStore 的配置对象中，我们可以定义状态 (state)、mutations (mutations)、actions (actions) 等内容来管理模块的状态和逻辑。最后，通过 export 将创建的 store 模块导出，以便在组件中使用。

在组件中，你可以使用 useStore 方法来引入创建的模块化 store，并在组件中访问其中定义的状态、mutations 和 actions。

希望这能帮助到你理解 Pinia 中模块化的使用方式。

18. $router和$ route区别

在 Vue.js 中，$router 和 $route 都是与路由相关的对象，但它们代表不同的概念和提供不同的功能。

$router：
- $router 是 Vue Router 实例，它提供了一系列的方法，用于程序化地导航到不同的 URL，比如 push、replace 等方法。通过 $router，你可以在代码中执行路由跳转操作。
- $router 相当于整个路由器，负责整个应用中的路由跳转和管理。
$route：
- $route 表示当前活动的路由信息，它包含了当前 URL 解析得到的信息，比如当前的路径、参数、查询字符串等等。
- 通过访问 $route，你可以获取当前路由的信息，比如当前的路径、参数、查询字符串等，以便根据当前路由状态进行一些逻辑处理。

所以简单来说，$router 是用来进行路由跳转和管理的，而 $route 是用来获取当前路由信息的。在实际使用中，你会经常看到这两个对象被用于处理不同的路由相关的任务。

希望这能够帮助你理解 $router 和 $route 在 Vue.js 中的区别。

19.$router包含的信息

$router 是 Vue Router 实例，它包含了一些方法和属性，用于进行路由导航和管理。下面是 $router 可能包含的一些信息：

push(location: RawLocation, onComplete?: Function, onAbort?: ErrorHandler)：用于向历史记录添加一个新的路由，并导航到指定的地址。
replace(location: RawLocation, onComplete?: Function, onAbort?: ErrorHandler)：用指定的地址替换当前的路由，不会向历史记录中添加新的条目。
go(n: number)：在历史记录中向前或向后导航指定的步数。
back()：等同于 go(-1)，在历史记录中后退一步。
forward()：等同于 go(1)，在历史记录中前进一步。
currentRoute：表示当前活动的路由对象，包含当前路由的路径、参数、查询字符串等信息。

除了上述方法和属性之外，$router 还可能包含其他一些与路由导航和管理相关的方法和属性，具体取决于你在 Vue Router 实例中配置的内容。

总之，$router 是一个包含了一系列路由导航和管理相关方法的对象，可以帮助你在 Vue.js 应用中进行路由跳转和管理。

20.$route包含的信息

$route 包含了当前活动的路由信息，它提供了对当前路由状态的访问。下面是 $route 可能包含的一些信息：

name：当前路由的名称。
path：当前路由的路径。
params：包含路由参数的对象，如果路由使用了动态路径参数，可以通过这个属性访问这些参数。
query：包含查询字符串参数的对象，可以通过这个属性访问 URL 查询字符串中的参数。
hash：当前路由的 hash 值。
fullPath：完整的 URL 路径，包括路径、查询字符串和 hash。
matched：一个包含当前路由匹配的所有嵌套路径片段的数组。

除了上述信息之外，$route 还可能包含其他一些与当前路由状态相关的信息，具体取决于你当前的路由配置和路由匹配情况。

通过访问 $route，你可以获取到当前路由的路径、参数、查询字符串等信息，以便根据当前路由状态进行一些逻辑处理和展示。在实际开发中，我们经常会用到 $route 来获取当前路由的信息，并做出相应的处理。

希望这能够帮助你理解 $route 包含的信息及其在 Vue.js 中的作用。

21.CommonJS 是啥

CommonJS 是一种模块化的 JavaScript 规范，旨在解决 JavaScript 在服务器端开发中模块化管理的问题。它定义了一套规范，使得 JavaScript 代码可以模块化组织、导入和导出模块，从而提高代码的可维护性和可重用性。

CommonJS 主要包含以下几个核心概念：

模块定义：CommonJS 定义了如何创建模块，一个文件就是一个模块，每个模块都拥有自己的作用域，模块内部的变量和函数不会暴露到全局作用域。
导出模块：通过 module.exports 或 exports 将模块的特定内容暴露给外部使用。
导入模块：使用 require 关键字来引入其他模块，以便在当前模块中使用被引入的模块的功能。

CommonJS 规范在 Node.js 中得到了广泛的应用，Node.js 的模块系统就是基于 CommonJS 规范实现的。通过 CommonJS 规范，Node.js 实现了模块化的管理，使得开发者可以方便地组织和管理大型的代码库。

需要注意的是，随着 ES6 的出现，JavaScript 本身也加入了原生的模块化支持，即 ES6 模块规范，而且在浏览器端也逐渐得到支持。因此，在现代的前端开发中，通常会使用 ES6 模块规范来进行模块化开发，而在 Node.js 等环境中，仍然会使用 CommonJS 规范。

总之，CommonJS 是一种用于 JavaScript 模块化的规范，主要应用在 Node.js 等环境中。

22.UMD

UMD (Universal Module Definition) 是一种通用的模块定义规范，旨在解决 JavaScript 模块在不同环境中的兼容性问题。它允许开发者编写适用于多种模块加载器和运行环境的模块化代码。

UMD 的核心思想是根据当前环境的不同，采用不同的模块加载方式。UMD 支持以下几种常见的模块加载方式：

CommonJS：如果当前环境支持 CommonJS 规范（比如 Node.js），则使用 require 导入模块，使用 module.exports 或 exports 导出模块。
AMD (Asynchronous Module Definition)：如果当前环境支持 AMD 规范（比如 RequireJS），则使用 define 定义模块并导出。
全局变量：如果当前环境没有模块加载器，则将模块挂载到全局变量上，供其他代码直接访问。

通过 UMD 规范，开发者可以编写一份兼容多种模块加载器和运行环境的代码，使得模块可以在不同的环境中无缝运行。

需要注意的是，随着 ES6 模块规范的普及，现代前端开发中更倾向于使用 ES6 模块来进行模块化开发，而不是依赖于 UMD 规范。

总结来说，UMD 是一种通用的模块定义规范，旨在解决 JavaScript 模块在不同环境中的兼容性问题，支持多种模块加载方式。

23.es6怎么转es5

要将 ES6 代码转换为 ES5 代码，可以使用以下几种方法：

使用 Babel：Babel 是一个广泛使用的 JavaScript 编译器，它可以将 ES6 代码转换为兼容多个浏览器和环境的 ES5 代码。你可以使用 Babel 的命令行工具或集成到构建工具（如 Webpack、Gulp）中进行转换。配置 Babel 主要涉及选择合适的转换插件和配置文件（如 .babelrc）。
使用在线转换工具：有一些在线工具（如 Babel REPL、es6console）可以帮助你将 ES6 代码实时转换为 ES5 代码。你只需将 ES6 代码粘贴到在线编辑器中，并查看转换后的 ES5 代码。
使用特定库或框架的转换工具：一些框架和库提供了自己的转换工具，用于将其特定的 ES6 代码转换为 ES5 代码。例如，React 提供了 create-react-app 脚手架，可将 React 的 ES6 代码转换为 ES5 代码。

无论你选择哪种方法，重要的是确保转换后的 ES5 代码在目标环境中能够正常运行。同时，也需要注意一些 ES6 新特性（如箭头函数、模板字符串等）在 ES5 中可能没有完全等价的语法，因此需要对代码进行相应调整和优化。

总结来说，将 ES6 代码转换为 ES5 代码可以使用工具如 Babel，也可以通过在线转换工具或特定库的转换工具进行。重要的是确保转换后的代码在目标环境中能够正常运行。

24.Webpack里边的插件

Webpack 是一个强大的静态模块打包工具，它提供了许多插件来扩展其功能。以下是一些常用的 Webpack 插件：

HtmlWebpackPlugin：用于生成 HTML 文件，并自动将打包后的资源（如 JavaScript、CSS）注入到 HTML 中。
MiniCssExtractPlugin：用于将 CSS 从打包的 JavaScript 中提取出来，生成独立的 CSS 文件。
CleanWebpackPlugin：在每次构建前清理输出目录，避免旧文件的残留。
DefinePlugin：允许在编译时创建全局常量，用于配置环境变量或者其他全局参数。
CopyWebpackPlugin：用于复制文件或文件夹到输出目录，常用于复制 [Something went wrong, please try again later.]

最新前端面试-2023.11.16.12：00面试题