前端常见面试题

sass语言的特点？

1. 可以减少重复代码：Sass可以通过使用变量、混合、继承等方式来减少代码的重复性，提高代码的可维护性。

2. 支持嵌套：Sass支持CSS样式的嵌套，可以更方便地控制样式的层级关系。

3. 支持模块化：Sass支持模块化开发，可以将样式分成多个模块进行开发，提高代码的可读性和可维护性。

4. 支持函数和运算符：Sass支持函数和运算符，可以完成更复杂的样式计算。

5. 支持导入其他文件：Sass可以通过@import指令导入其他Sass文件，便于代码的组织和管理。

6. 支持扩展：Sass支持使用@if、@for和@while等指令来扩展CSS的功能，增强了CSS的表现力和灵活性。

7. 支持多平台：Sass可以在多个平台上使用，包括Windows、Mac、Linux等操作系统。

Less语言的特点？

1. 语法与CSS类似：Less的语法与CSS类似，可以快速上手。

2. 支持变量和混合：Less支持变量和混合，可以减少代码的重复性，提高代码的可读性和可维护性。

3. 支持嵌套：Less支持CSS样式的嵌套，可以更方便地控制样式的层级关系。

4. 支持函数和运算符：Less支持函数和运算符，可以完成更复杂的样式计算。

5. 支持导入其他文件：Less可以通过@import指令导入其他Less文件，便于代码的组织和管理。

6. 支持扩展：Less支持使用@if、@for和@while等指令来扩展CSS的功能，增强了CSS的表现力和灵活性。

7. 支持多平台：Less可以在多个平台上使用，包括Windows、Mac、Linux等操作系统。

8. 支持浏览器端编译：Less支持在浏览器端实时编译，方便调试和学习。

CSS模块化？
        CSS模块化是一种将CSS代码划分为模块或组件的方法，以便更好地组织和管理CSS样式。这种方法可以让你更容易地重用CSS代码，并且可以避免CSS代码冲突的问题。
以下是一些CSS模块化的方法：

        1、命名约定：使用特定的命名约定，如BEM（块、元素、修饰符）或SMACSS（可扩展和可维护的CSS样式表），可以将CSS代码划分为模块和组件。

        2、CSS预处理器：使用CSS预处理器，如Sass和Less，可以将CSS代码划分为模块和组件，并使用变量和混合（mixin）等功能，以便更好地组织和管理CSS样式。

        3、CSS-in-JS：CSS-in-JS是一种将CSS样式直接嵌入JavaScript代码中的方法，以便更好地管理和组织CSS代码。

        4、模块化框架：一些前端框架，如React和Vue，提供自己的CSS模块化方法，以便更好地管理和组织CSS代码。例如，React使用CSS模块化的方式是在CSS类名中添加一个哈希值，以确保每个模块的类名都是唯一的。
        总之，CSS模块化是一种将CSS代码划分为模块和组件的方法，可以更好地组织和管理CSS样式，避免冲突问题，并提高代码的可重用性。

详述下js的继承？ 

JavaScript 的继承主要有以下几种方式：
1. 原型继承
原型继承是 JavaScript 中最常用的继承方式，它的核心是通过原型链来实现继承。子类的原型对象通过 `Object.create()` 方法来继承父类的原型对象。例如：
```javascript
function Parent() {
  this.name = 'parent';
}
Parent.prototype.sayHello = function() {
  console.log('Hello, ' + this.name);
}
function Child() {
  this.name = 'child';
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
const child = new Child();
child.sayHello(); // Hello, child
```
2. 构造函数继承
构造函数继承是通过在子类的构造函数中调用父类的构造函数来实现继承。子类的实例对象通过 `call()` 或 `apply()` 方法来调用父类的构造函数，并继承父类的属性。例如：
```javascript
function Parent() {
  this.name = 'parent';
}
Parent.prototype.sayHello = function() {
  console.log('Hello, ' + this.name);
}
function Child() {
  Parent.call(this);
  this.name = 'child';
}
const child = new Child();
child.sayHello(); // TypeError: child.sayHello is not a function
```
构造函数继承无法继承父类的原型对象，因此子类无法访问父类的原型方法。
3. 组合继承
组合继承是将原型继承和构造函数继承结合起来的一种继承方式。它通过在子类的构造函数中调用父类的构造函数，继承父类的属性，同时通过将子类的原型对象设置为父类的实例对象，继承父类的原型对象。例如：
```javascript
function Parent() {
  this.name = 'parent';
}
Parent.prototype.sayHello = function() {
  console.log('Hello, ' + this.name);
}
function Child() {
  Parent.call(this);
  this.name = 'child';
}
Child.prototype = new Parent();
Child.prototype.constructor = Child;
const child = new Child();
child.sayHello(); // Hello, child
```
组合继承是 JavaScript 中最常用的继承方式，它具有良好的兼容性和可读性。
4. ES6 的 class 继承
ES6 的 class 继承是 JavaScript 中最新的一种继承方式，它通过 `class` 和 `extends` 关键字来实现继承。子类通过 `super` 关键字调用父类的构造函数，并继承父类的属性和方法。例如：
```javascript
class Parent {
  constructor() {
    this.name = 'parent';
  }
  sayHello() {
    console.log('Hello, ' + this.name);
  }
}
class Child extends Parent {
  constructor() {
    super();
    this.name = 'child';
  }
}
const child = new Child();
child.sayHello(); // Hello, child
```
ES6 的 class 继承语法更加简洁明了，但需要注意的是，它仍然是基于原型继承实现的。

说下js的深浅拷贝？ 

在 JavaScript 中，对象和数组是通过引用传递的，因此在拷贝对象和数组时，需要注意是否需要复制引用的值或者保留引用关系。根据这个原则，JavaScript 中的拷贝可以分为浅拷贝和深拷贝两种。
1. 浅拷贝
浅拷贝只是复制了对象或数组的第一层，如果对象或数组中还包含了引用类型的值，那么这些值的引用关系仍然是共享的。常见的浅拷贝方法有 `Object.assign()` 和扩展运算符 `...`。例如：
```javascript
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = Object.assign({}, obj1);
const obj3 = { ...obj1 };
obj1.b.c = 3;
console.log(obj2); // { a: 1, b: { c: 3 } }
console.log(obj3); // { a: 1, b: { c: 3 } }
```
2. 深拷贝
深拷贝会复制整个对象或数组，包括所有的引用类型的值，因此拷贝后的对象和数组与原来的对象和数组完全独立，互不影响。常见的深拷贝方法有递归拷贝和 JSON 序列化。例如：
```javascript
// 递归拷贝
function deepClone(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  const newObj = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    newObj[key] = deepClone(obj[key]);
  }
  return newObj;
}
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = deepClone(obj1);
obj1.b.c = 3;
console.log(obj2); // { a: 1, b: { c: 2 } }
// JSON 序列化
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = JSON.parse(JSON.stringify(obj1));
obj1.b.c = 3;
console.log(obj2); // { a: 1, b: { c: 2 } }
```
需要注意的是，使用 JSON 序列化方法进行深拷贝时，如果对象中包含函数、正则表达式、日期等特殊类型的值，会被转换为 `null`，因此需要特别处理。而递归拷贝方法则需要注意循环引用的问题，否则会导致栈溢出或者死循环。

 typescript的作用？

TypeScript 是一种静态类型检查的开发语言，它可以编译成 JavaScript 代码，被称为 JavaScript 的超集。TypeScript 在 JavaScript 的基础上增加了类型系统、类、接口等面向对象的特性，使得 JavaScript 代码更加健壮、易于维护。TypeScript 的主要作用如下：

        1. 增加代码的可读性和可维护性：TypeScript 可以通过类型注解来增加代码的可读性，使得代码更加易于理解和维护。

        2. 提高代码的健壮性：TypeScript 在编译时会进行类型检查，可以避免一些常见的类型错误，提高代码的健壮性。

        3. 提高开发效率：TypeScript 支持代码自动补全和静态分析等功能，可以减少开发人员的工作量，提高开发效率。

        4. 使得 JavaScript 更易于构建大型应用程序：TypeScript 支持模块化开发，可以将代码分成多个模块进行开发，使得 JavaScript 更易于构建大型应用程序。

        5. 兼容性好：TypeScript 可以编译成 JavaScript 代码，可以在任何支持 JavaScript 的环境中运行，具有很好的兼容性。

        6. 社区支持强大：TypeScript 有庞大的社区支持，有大量的插件和工具可供使用，使得开发更加便捷和高效。

ES6有哪些新特性？

ES6（ECMAScript 2015）是 JavaScript 的一个重要更新版本，引入了许多新的语法和功能特性，包括：

1. let/const 声明变量和常量；

2. 箭头函数（Arrow Function）；

3. 模板字符串（Template String）；

4. 解构赋值（Destructuring Assignment）；

5. 展开运算符（Spread Operator）；

6. 类（Class）；

7. 模块化（Module）；

8. Promise 对象；

9. 数组的新方法：map、filter、reduce等；

10. 对象的新方法：Object.assign、Object.keys等；

11. Symbol 数据类型；

12. Set 和 Map 数据结构；

13. for...of 循环语句；

14. 可选的函数参数和默认参数值；

15. rest 参数（Rest Parameter）；

16. 块级作用域（Block Scope）；

17. 模块的动态导入和导出 以上是 ES6 的一些比较重要的新特性，这些特性大大提高了 JavaScript 的语言表达能力、代码可读性和可维护性，也使得 JavaScript 更加适合构建大型的应用程序。 

（记得多少说多少吧...）

详述下js的⾯向对象？

JavaScript 是一门基于对象的编程语言，它的面向对象编程（OOP）方式与传统的 OOP 语言（如 Java、C#）有所不同。JavaScript 中的对象是一组属性和方法的集合，它们可以动态地添加、删除和修改。下面是 JavaScript 的面向对象编程的一些特点：

        1. 原型继承：JavaScript 中的对象是通过原型继承来实现的。每个对象都有一个原型（prototype）对象，它包含了一些属性和方法，如果在该对象上没有找到某个属性或方法，就会去它的原型对象上找，直到找到为止。

        2. 构造函数：JavaScript 中的构造函数（constructor）用于创建对象，它与其他语言中的类（class）类似。通过构造函数可以创建多个相似的对象，这些对象共享相同的属性和方法。         

        3. this 关键字：JavaScript 中的 this 关键字用于指向当前对象，它可以在方法内部使用，以访问当前对象的属性和方法。

        4. 原型链：JavaScript 中的原型链（prototype chain）是一种对象之间的关系，它通过原型对象的链接形成一个链式结构。当需要访问某个对象的属性或方法时，JavaScript 会沿着这个原型链向上查找，直到找到为止。

        5. 封装性：JavaScript 中的封装性（encapsulation）通过函数和闭包来实现。可以使用闭包来隐藏对象的内部实现，以保护对象的状态和行为不被外部访问。

        6. 多态性：JavaScript 中的多态性（polymorphism）是指对象可以根据上下文的不同表现出不同的行为。在 JavaScript 中，可以通过重写原型对象的方法来实现多态性。

         总之，JavaScript 的面向对象编程是一种基于原型继承的方式，它与传统的 OOP 语言有所不同，但也具有类似的特点，如封装、继承、多态等，这些特点使得 JavaScript 可以用于构建复杂的应用程序。 

 详述下js的异步编程？

JavaScript 是一门单线程语言，这意味着在同一时间只能执行一个任务。当需要执行耗时的操作时，如果采用同步方式，会导致程序阻塞，无法响应其他事件。为了解决这个问题，JavaScript 引入了异步编程机制，允许在执行某些操作时，程序继续执行其他任务，等待操作完成后再执行回调函数。 JavaScript 中的异步编程方式有多种，下面是一些常见的方式：         1. 回调函数（Callback）：回调函数是一种异步编程的基本方式。它通过将函数作为参数传递给其他函数，当操作完成后，调用该函数来通知程序继续执行。

        2. 事件监听（Event Listener）：事件监听是一种通过监听事件来实现异步编程的方式。当事件发生时，触发事件回调函数来通知程序执行相应的操作。

        3. Promise 对象：Promise 是一种异步编程的解决方案，它可以将回调函数嵌套的方式转换成链式调用的方式，使得代码更加清晰易读。Promise 对象分为三个状态：Pending（进行中）、Resolved（已完成）和Rejected（已失败）。

        4. Async/await：Async/await 是一种基于 Promise 的异步编程方式，它使用 async 关键字定义异步函数，使用 await 关键字等待异步操作完成并返回结果。Async/await 可以使异步代码看起来更像同步代码，使得代码更加简洁易读。

        总之，JavaScript 的异步编程机制可以使程序在执行耗时的操作时保持响应，并且能够更好地利用系统资源，提高程序的性能和用户体验。不同的异步编程方式适用于不同的场景，开发者需要根据具体情况选择合适的方式来进行异步编程。

详述下⽹络通信？

网络通信是指在计算机网络中，不同计算机之间进行信息交换的过程。在 Web 开发中，网络通信通常使用 HTTP 协议来实现，HTTP 是一种无状态的协议，它通过客户端发送请求，服务器响应请求的方式来进行通信。下面是 HTTP 协议的一些特点和常见的网络通信方式：

        1. HTTP 协议：HTTP 是一种应用层协议，它定义了客户端和服务器之间通信的格式和规则。HTTP 协议使用 TCP/IP 协议进行传输，它支持多种请求方法，如 GET、POST、PUT、DELETE 等。

        2. AJAX：AJAX 是一种基于 JavaScript 和 XML 的异步通信技术，它可以在不重新加载页面的情况下，向服务器发送请求，获取数据并更新页面。AJAX 可以提高网站的响应速度和用户体验。

        3. WebSocket：WebSocket 是一种双向通信协议，它可以在客户端和服务器之间建立持久化的连接，实现实时通信。WebSocket 可以有效地减少 HTTP 请求的次数，提高通信效率。         

        4. RESTful API：RESTful API 是一种基于 HTTP 协议的 API 设计风格，它使用 URL 和 HTTP 方法来表示资源和操作，使得 API 的设计更加简洁易用。RESTful API 是 Web 应用程序中常用的一种网络通信方式。

        5. JSONP：JSONP 是一种通过动态加载 script 标签来实现跨域通信的技术。JSONP 可以在不同域之间传递数据，但是它需要服务器端的支持，而且只能支持 GET 请求。

         总之，网络通信是 Web 开发中非常重要的一部分，不同的网络通信方式适用于不同的场景。开发者需要根据具体的需求选择合适的通信方式，以实现高效、安全、可靠的网络通信。

详述下三次握手四次挥手？

TCP 是一种可靠的传输协议，它使用三次握手（Three-way Handshake）来建立连接，四次挥手（Four-way Handshake）来关闭连接。下面详细介绍三次握手和四次挥手的过程： 三次握手：

        1. 第一次握手（SYN）：客户端向服务器发送一个 SYN 请求报文，请求建立连接，SYN 标志位被置为 1，同时客户端随机生成一个序列号 seq。

        2. 第二次握手（SYN+ACK）：服务器收到客户端的 SYN 请求报文后，向客户端发送一个 SYN+ACK 应答报文，确认收到客户端的请求，SYN 和 ACK 标志位都被置为 1，同时服务器也随机生成一个序列号 seq，ACK 标志位的值为客户端的 seq 加 1。

        3. 第三次握手（ACK）：客户端收到服务器的 SYN+ACK 应答报文后，向服务器发送一个 ACK 应答报文，表示收到了服务器的应答，同时 ACK 标志位被置为 1，序列号 seq 的值为客户端的随机数加 1，确认号 ack 的值为服务器的序列号加 1。

四次挥手：

         1. 第一次挥手（FIN）：客户端发送一个 FIN 请求报文，请求关闭连接，FIN 标志位被置为 1。

        2. 第二次挥手（ACK）：服务器收到客户端的 FIN 请求报文后，向客户端发送一个 ACK 应答报文，确认收到了客户端的请求，同时 ACK 标志位被置为 1。

        3. 第三次挥手（FIN）：服务器发送一个 FIN 请求报文，请求关闭连接，FIN 标志位被置为 1。

        4. 第四次挥手（ACK）：客户端收到服务器的 FIN 请求报文后，向服务器发送一个 ACK 应答报文，确认收到了服务器的请求，同时 ACK 标志位被置为 1。

        总之，三次握手和四次挥手是 TCP 协议中重要的过程，用于建立和关闭连接，保证数据的可靠传输。在实际应用中，需要注意避免网络延迟、超时等问题，以确保连接的可靠性和稳定性。

说一下跨域及其解决办法？

跨域是指当一个网页的文档、脚本、样式表、图片或其他类型的资源，从不同的域名、端口或协议请求时，浏览器会出于安全考虑，阻止页面脚本获取或修改这些资源，从而导致跨域访问的问题。 常见的跨域解决办法包括：

        1. JSONP：利用 script 标签可以跨域访问的特性，通过在请求中动态创建 script 标签，将需要访问的数据作为参数传递到服务器端，服务器返回一个 JavaScript 函数调用，客户端通过该函数调用来获取数据。

        2. CORS：跨域资源共享（Cross-Origin Resource Sharing），是一种基于 HTTP 头部的机制，允许服务器让其它站点发起跨域请求。开发者可以通过设置 Access-Control-Allow-Origin 头部来允许指定的域名访问资源。

        3. 代理：将跨域请求发送到同域的服务器，再由同域服务器转发请求到目标服务器，获取数据后返回给客户端。这种方式需要同域服务器的支持，较为麻烦，但可以解决一些特殊的跨域问题。

        4. WebSocket：WebSocket 是一种双向通信协议，可以在客户端和服务器之间建立持久化连接，实现实时通信。由于 WebSocket 可以在不同源之间进行通信，因此可以用来解决一些跨域的问题。

        总之，跨域是 Web 开发中常见的问题，需要开发者了解不同的解决方案并根据实际情况选择合适的方式来解决。同时，开发者也需要注意安全问题，避免跨站脚本攻击等安全问题的出现。

详述下Node.js ？

Node.js 是一种基于 Chrome V8 引擎的 JavaScript 运行环境，可以让 JavaScript 运行在服务器端，实现了前端和后端的无缝衔接。下面详述 Node.js 的特点和应用场景。 特点：

        1. 异步非阻塞 I/O：Node.js 使用事件驱动的方式处理请求，通过回调函数实现异步非阻塞 I/O，提高了程序的性能和吞吐量。

        2. 单线程模型：Node.js 使用单线程模型，可以避免多线程带来的线程安全问题，同时也提高了程序的可维护性。

        3. 轻量高效：Node.js 的模块化设计和轻量级的架构，使得它可以快速启动和运行，同时也占用较少的系统资源。

        4. 支持大量的第三方模块：Node.js 提供了大量的第三方模块，可以方便地实现各种功能，同时也可以通过 npm 进行模块的管理和安装。

 应用场景：

        1. Web 应用开发：Node.js 可以用于开发 Web 应用和 API，如 Express、Koa、Socket.io 等框架。

        2. 前端工具链：Node.js 可以用于前端开发的工具链，如 Gulp、Webpack、Babel 等。

        3. 实时通信：Node.js 可以用于实时通信的开发，如聊天室、即时通讯等。

        4. 数据库操作：Node.js 可以用于与数据库的交互，如 MongoDB、MySQL、Redis 等。

        5. 命令行工具：Node.js 可以用于开发命令行工具，如 Git、npm 等。

         总之，Node.js 是一种高效、轻量、灵活的 JavaScript 运行环境，具有广泛的应用场景，可以帮助开发者快速构建高性能的 Web 应用和工具。

说一下Mock的使用？

Mock 是一种前端开发中常用的假数据生成工具，可以用来快速生成各种类型的数据，包括 JSON、XML、HTML 等格式，以及各种类型的数据结构，如数组、对象、函数等。下面介绍 Mock 的使用方法。
1. 安装 Mock
可以通过 npm 安装 Mock：
```
npm install mockjs --save-dev
```
2. 使用 Mock
在需要使用 Mock 的地方，通过 require 引入 Mock：
```
const Mock = require('mockjs')
```
然后可以使用 Mock.mock() 方法生成假数据：
```
var data = Mock.mock({
  'list|1-10': [{
    'id|+1': 1,
    'name': '@name',
    'age|18-60': 1,
    'sex|1': ['男', '女'],
    'email': '@email',
    'phone': /^1[3456789]\d{9}$/,
    'address': '@county(true)',
    'desc': '@cparagraph'
  }]
})
```
上面的代码生成了一个长度为 1 到 10 的数组，数组中的每个元素是一个对象，对象中包含了各种类型的属性，如字符串、数字、布尔值、正则表达式等。Mock 还支持更多的数据类型和方法，可以查看官方文档进行学习和使用。
3. 拦截请求
Mock 还可以用来拦截请求，返回假数据。通过使用 Mock.mock() 方法，可以拦截请求并返回指定的数据，如下面的例子：
```
Mock.mock('/api/user', {
  'name': '@name',
  'age|18-60': 1,
  'sex|1': ['男', '女'],
  'email': '@email',
  'phone': /^1[3456789]\d{9}$/,
  'address': '@county(true)',
  'desc': '@cparagraph'
})
```
上面的代码拦截了 /api/user 的请求，并返回一个包含各种类型属性的假数据。
总之，Mock 是一种方便快捷的前端假数据生成工具，可以帮助开发者快速构建假数据，提高开发效率。

详述下对Webpack的理解及Webpack的作用 ？

        Webpack 是一个现代化的静态模块打包工具，它可以将多个模块打包成一个或多个 bundle 文件，从而实现代码的模块化管理、静态资源的处理、性能优化等功能。

        Webpack 的主要作用可以概括为以下几点：

        1. 模块化管理

        Webpack 支持 CommonJS、ES6 等多种模块化规范，可以将代码拆分成多个模块进行管理。通过模块化管理，可以提高代码的可维护性和可复用性，同时也便于协作开发和版本控制。

        2. 静态资源处理

        Webpack 支持处理各种静态资源，包括 CSS、图片、字体等。通过使用各种 loader 和 plugin，Webpack 可以将这些资源转化为模块，从而实现资源的统一管理和优化。

        3. 代码优化

        Webpack 可以对代码进行优化，包括代码压缩、Tree Shaking、Code Splitting 等。通过这些优化，可以减少代码体积、提高页面加载速度和性能。

        4. 构建工具

        Webpack 可以作为构建工具，自动化完成代码的编译、打包、测试和部署等过程。通过配置不同的插件和 loader，可以满足不同项目的需求。

        综上所述，Webpack 是一个功能强大的静态模块打包工具，它可以提高代码的可维护性和可复用性，同时也可以优化代码体积和性能，是前端开发中不可或缺的工具之一。

 详述下对Axios的理解及其作用 ？

Axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 环境中发送 HTTP 请求，并支持请求拦截、响应拦截等功能。下面详述对 Axios 的理解及其作用。

         1. 发送 HTTP 请求

        Axios 可以用于发送各种类型的 HTTP 请求，包括 GET、POST、PUT、DELETE 等。可以通过传递参数，如 URL、请求头、请求体等，来定制请求的内容和形式。同时，Axios 可以处理不同类型的响应，如 JSON、XML、HTML 等。

         2. 支持 Promise

         Axios 是基于 Promise 的 HTTP 客户端，可以使用 Promise 的语法进行异步编程。可以通过 then() 和 catch() 方法处理请求的成功和失败，避免嵌套回调的问题，提高代码的可读性和可维护性。

         3. 拦截器

         Axios 支持请求拦截和响应拦截，可以在请求或响应发送前或后进行一些处理。例如，可以在请求中添加请求头或请求体，或者在响应中处理错误信息等。这些拦截器可以提高代码的复用性和可维护性。

         4. 支持取消请求

        Axios 支持取消请求，可以在请求未完成时取消请求，避免不必要的网络请求和资源浪费。可以通过 cancelToken 和 cancel() 方法实现请求的取消。

         总之，Axios 是一个功能丰富、易用性高的 HTTP 客户端，可以帮助前端开发者发送 HTTP 请求，处理 Promise、拦截请求和响应、支持取消请求等功能，提高开发效率和代码质量。

说下你说怎么封装axios的?

        封装 Axios 可以提高代码的复用性和可维护性，同时也可以根据项目的需求，添加一些自定义的功能和处理逻辑。下面是封装 Axios 的一般流程：

        1. 创建 Axios 实例 可以通过 create() 方法创建一个 Axios 实例，并设置一些默认配置，如 baseURL、timeout、headers 等。这些默认配置将作为全局配置，可以在发送请求时添加或覆盖。

         2. 添加请求拦截器 可以通过 interceptors.request.use() 方法添加请求拦截器，并在请求发送前进行一些处理，如添加请求头、请求体、请求参数等。可以通过 cancelToken 实现请求的取消。

         3. 添加响应拦截器 可以通过 interceptors.response.use() 方法添加响应拦截器，并在响应返回后进行一些处理，如处理错误信息、格式化响应数据等。

         4. 封装请求方法 可以根据项目的需求，封装一些常用的请求方法，如 get、post、put、delete 等。这些方法可以使用 Axios 实例的方法，如 axios.get()、axios.post() 等，并添加一些自定义的配置和处理逻辑，如设置请求头、请求参数、响应格式、错误处理等。

         5. 封装错误处理 可以通过 try...catch... 语句捕获请求中的错误，并进行统一的错误处理。可以将错误信息封装成自定义的错误类型，并在响应拦截器中进行处理，如统一提示错误信息、跳转到错误页面等。

         6. 导出封装好的 Axios 实例 最后，可以将封装好的 Axios 实例导出，供其他模块使用。

         总之，封装 Axios 可以根据项目的需求，添加一些自定义的功能和处理逻辑，提高代码的复用性和可维护性。 

说下对Koa2的理解及其作用？

        Koa2 是一个基于 Node.js 平台的 Web 开发框架，它使用了 ES6 的新特性，比如 async/await、Generator 等，可以帮助开发者更加方便地进行异步编程。下面是对 Koa2 的一些理解及其作用：

         1. 轻量级 Koa2 是一个轻量级的 Web 开发框架，它的核心代码只有几百行，没有集成过多的功能和插件，可以根据项目的需求进行灵活的配置和扩展。同时，它使用了 ES6 的新特性，使得代码更加简洁易读。

         2. 中间件 Koa2 的核心思想是中间件，它可以将请求和响应拆分成多个中间件，每个中间件都可以进行一些处理，如添加请求头、处理请求参数、处理错误信息等。同时，中间件也可以进行链式调用，使得代码结构更加清晰。

         3. 支持异步编程 Koa2 使用了 async/await、Generator 等新特性，可以帮助开发者更加方便地进行异步编程。开发者可以使用 async/await 来写异步代码，避免了回调地狱的问题，提高代码的可读性和可维护性。

         4. 安全性 Koa2 提供了一些安全性的中间件，如 koa-helmet、koa-cors 等，可以帮助开发者增强 Web 应用的安全性。例如，koa-helmet 可以设置一些 HTTP 头信息，如 X-Powered-By、X-Content-Type-Options 等，防止一些安全攻击。

         5. 可扩展性 Koa2 可以根据项目的需求进行灵活的配置和扩展。开发者可以根据需要添加自定义的中间件、插件或者模块，如 koa-router、koa-bodyparser 等，使得 Koa2 更加适合不同的应用场景。

         总之，Koa2 是一个轻量级、灵活、易用的 Web 开发框架，使用了 ES6 的新特性，可以帮助开发者更加方便地进行异步编程。它的中间件机制、安全性、可扩展性等特点，使得它在 Web 开发中具有广泛的应用。 

说下开发中Vite的作用 ？

        Vite 是一个基于原生 ES 模块的 Web 开发构建工具，它可以帮助开发者更加高效地进行前端开发。下面是 Vite 在开发中的一些作用：

         1. 更快的启动和构建速度

         Vite 使用了原生 ES 模块的特性，可以在开发阶段实现更快的启动和构建速度。它不需要对整个项目进行打包，而是采用了按需编译的方式，只编译改动的模块，因此启动和构建的速度都得到了很大的提升。

         2. 支持多种编程语言和框架

         Vite 支持多种编程语言和框架，如 Vue、React、TypeScript 等，可以根据项目的需求进行灵活的配置和扩展。同时，Vite 也支持模块热更新，可以帮助开发者更加高效地进行调试和开发。

         3. 提供开发服务器

        Vite 提供了一个开发服务器，可以在开发阶段实现更加快速和高效的开发体验。开发者可以通过开发服务器实现自动刷新、模块热替换、错误提示等功能。

        4. 简化配置

        Vite 简化了项目的配置过程，使用了一些默认配置，如自动识别入口文件、自动配置端口号等。同时，Vite 也提供了一些预设的插件，如 PostCSS、Sass、Less 等，可以帮助开发者更加方便地进行样式处理。

         5. 支持生产环境构建

         Vite 不仅可以在开发阶段提供更加高效的开发体验，也可以在生产环境中进行构建。开发者可以使用 Vite 的构建命令，将项目打包成生产环境所需的静态文件。

         总之，Vite 是一个快速、简单和高效的 Web 开发构建工具，它可以帮助开发者提高开发效率和代码质量。Vite 的快速启动和构建速度、支持多种编程语言和框架、简化配置、提供开发服务器等特点，使得它在前端开发中具有广泛的应用。 

Vite和Webpack的区别 ？

        Vite 和 Webpack 都是前端构建工具，但它们有一些重要的区别，如下：

         1. 构建速度

        Vite 的构建速度比 Webpack 快得多，因为 Vite 使用了原生 ES 模块的特性，可以在开发阶段实现按需编译，只编译改动的模块，而不需要对整个项目进行打包。而 Webpack 需要在每次打包时重新编译所有模块，因此构建速度相对较慢。

         2. 开发体验

        Vite 可以提供更好的开发体验，因为它支持模块热更新和快速的构建速度。模块热更新可以在开发时快速查看修改后的效果，而不需要刷新页面。同时，Vite 还可以在开发时提供开发服务器，支持自动刷新、错误提示等功能。而 Webpack 的开发体验相对较差，需要手动刷新页面查看修改后的效果。

         3. 配置复杂度

         Webpack 的配置相对较为复杂，需要开发者进行详细的配置，包括入口、输出、loader、插件等。而 Vite 的配置相对简单，使用了一些默认配置，如自动识别入口文件、自动配置端口号等。同时，Vite 还提供了一些预设的插件，可以帮助开发者更加方便地进行样式处理等。

         4. 生态系统

         Webpack 有一个庞大的生态系统，可以满足更多的需求。Webpack 支持多种编程语言和框架，如 Vue、React、TypeScript 等。而 Vite 的生态系统相对较小，目前主要支持 Vue 和 React 等框架。

        总之，Vite 和 Webpack 在构建速度、开发体验、配置复杂度和生态系统等方面有一些差异。开发者可以根据项目的具体需求选择合适的构建工具。如果需要快速的开发体验和构建速度，可以选择 Vite；如果需要更为完善的生态系统和更灵活的配置，可以选择 Webpack。

说下vue2和vue3的区别？

        Vue.js 3 是 Vue.js 的最新版本，相比于 Vue.js 2，它有以下一些重要的变化和改进：

         1. 更快的速度和更小的体积

        Vue.js 3 的速度比 Vue.js 2 更快，并且它的体积更小。Vue.js 3 通过使用 Proxy 代替 Object.defineProperty 实现数据的响应式更新，同时也使用了静态提升和 Tree-Shaking 等技术来减小打包体积。

         2. 更好的 TypeScript 支持

        Vue.js 3 对 TypeScript 的支持更加完善，可以提供更好的类型检查和提示。Vue.js 3 中的 API 也是使用 TypeScript 编写的，这使得开发者能够更加方便地进行开发和维护。

        3. 更加灵活的组合式 API

        Vue.js 3 引入了组合式 API，将原本的选项式 API 和 Mixin 等组合方式进行了统一。组合式 API 可以让开发者更加灵活地组合和重用逻辑，并且也可以更好地支持 TypeScript。

         4. 更好的性能追踪和调试工具

         Vue.js 3 提供了更好的性能追踪和调试工具，可以帮助开发者更好地了解应用程序的性能瓶颈，从而进行优化和调试。

         5. 更好的适配性

         Vue.js 3 对 Web 平台和 Native 平台进行了更好的适配，可以更加方便地进行跨平台开发。同时，Vue.js 3 也提供了更好的 SSR（服务器端渲染）支持，可以让开发者更加方便地进行 SSR 开发。

        总之，Vue.js 3 相比于 Vue.js 2 有一些重要的变化和改进，包括更快的速度和更小的体积、更好的 TypeScript 支持、更加灵活的组合式 API、更好的性能追踪和调试工具以及更好的适配性等。开发者可以根据具体的项目需求和开发经验选择合适的版本。

说下ECharts的使用？

ECharts 是一个基于 JavaScript 的开源可视化库，可以用于构建各种数据可视化图表。以下是 ECharts 的使用步骤：
1. 安装 ECharts
可以使用 npm、CDN 或者直接下载 ECharts 的源代码进行安装。
2. 引入 ECharts
在 HTML 文件中引入 ECharts 的 JavaScript 文件，如下：
```html
<script src="echarts.min.js"></script>
```
3. 创建一个容器
在 HTML 文件中创建一个容器，用于存放图表：
```html
<div id="chart" style="width: 600px;height:400px;"></div>
```
4. 初始化 ECharts
在 JavaScript 文件中使用 echarts.init() 方法初始化 ECharts：
```javascript
var chart = echarts.init(document.getElementById('chart'));
```
5. 配置图表
使用 ECharts 提供的 API 配置图表，如设置数据、坐标轴、图例等。例如，使用以下代码设置柱状图的数据和样式：
```javascript
var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'bar'
    }]
};
```
6. 渲染图表
使用 ECharts 的 setOption() 方法将配置项应用到图表中：
```javascript
chart.setOption(option);
```
7. 完成
至此，一个简单的 ECharts 图表就创建完成了。
除了以上的基本使用方式，ECharts 还有很多高级的使用方式，如使用 Vue、React 等框架进行开发，使用 TypeScript 进行类型检查等等。开发者可以根据自己的实际需求选择合适的使用方式。

 用过Element UI的哪些组件？

 Element UI 中常用的组件有以下几种：

1. Button 按钮：用于触发某些操作或者跳转页面。

2. Input 输入框：用于输入信息，如用户名、密码等。

3. Select 选择器：用于选择列表中的一项或多项数据。

4. Radio 单选框：用于在一组可选项中选择单个选项。

5. Checkbox 多选框：用于在一组可选项中选择多个选项。

6. Table 表格：用于展示数据，支持排序、筛选、分页等功能。

7. Form 表单：用于收集用户信息，支持表单验证。

8. Dialog 弹窗：用于展示提示信息或者进行交互操作。

9. Menu 菜单：用于展示页面导航或者操作菜单。

10. Pagination 分页：用于分页展示大量数据。

除了以上列举的组件，Element UI 还有很多其他的组件，如日期选择器、时间选择器、标签页、下拉菜单等。开发者可以根据具体的需求选择合适的组件进行使用。

用过vant UI的哪些组件？

Vant UI 中常用的组件有以下几种：

1. Button 按钮：用于触发某些操作或者跳转页面。

2. Cell 单元格：用于展示列表数据，支持左右插槽、点击事件等。

3. Icon 图标：用于展示图标，支持自定义图标。

4. Image 图片：用于展示图片，支持自定义占位图、加载中状态等。

5. Toast 提示框：用于展示提示信息，支持自定义展示时间、位置等。

6. Dialog 弹窗：用于展示提示信息或者进行交互操作。

7. Tab 标签页：用于展示不同内容的标签页。

8. Form 表单：用于收集用户信息，支持表单验证。

9. PullRefresh 下拉刷新：用于下拉刷新页面数据。

10. Picker 选择器：用于选择列表中的一项或多项数据。

除了以上列举的组件，Vant UI 还有很多其他的组件，如步进器、轮播、复选框、日历等。开发者可以根据具体的需求选择合适的组件进行使用。 

说下对MVVM的理解？

        MVVM 是一种前端架构模式，它是 Model-View-ViewModel 的缩写，它将数据（Model）、视图（View）和视图模型（ViewModel）分离，通过双向绑定实现数据的自动同步，使得开发者可以更加专注于业务逻辑的实现。 具体来说，MVVM 的架构模式分为以下几个部分：

        1. Model：模型层，负责封装数据和业务逻辑，与后端交互获取数据。

        2. View：视图层，负责展示数据和接受用户的操作。

        3. ViewModel：视图模型层，负责将模型层的数据转换成视图层可用的数据，并负责处理视图层的事件和交互，通过双向绑定实现数据的自动同步。

         MVVM 的优点在于：

        1. 降低了前端代码的耦合性，使得代码更加清晰和易于维护。

        2. 通过数据的双向绑定，减少了代码量，提高了开发效率。

        3. 方便单元测试，利于代码的重构和调试。

        4. 实现了视图和数据的分离，使得前端开发更加易于团队协作。

        5. 可以兼容多个平台，如 Web、移动端等。

        总之，MVVM 是一种非常优秀的前端架构模式，它可以帮助开发者更加高效、清晰地实现前端业务逻辑。 

说下Vuex和Pinia的区别？

        Vuex 和 Pinia 都是 Vue.js 的状态管理库，Vue2使用的是Vuex，Vue3则推荐使用Pinia ，它们的目的是为了更好地管理 Vue 应用中的状态。下面是它们之间的一些区别：

        1. Vuex 是 Vue.js 官方提供的状态管理库，而 Pinia 是社区开发的状态管理库。

        2. Vuex 使用全局单例模式来管理状态，而 Pinia 则使用了 Vue.js 3.0 中的 Composition API。

        3. Vuex 中有五个核心概念：state、getters、mutations、actions 和 modules，而 Pinia 则只有一个核心概念：store。在 Pinia 中，所有的状态和操作都是通过 store 来管理的。

        4. Vuex 中的状态是响应式的，而 Pinia 中的状态则是通过响应式 API 实现的。这意味着在 Vuex 中可以直接修改状态，而在 Pinia 中必须使用 API 来修改状态。

        5. Vuex 中的模块划分比较灵活，可以嵌套多层，而 Pinia 中的模块划分则比较简单，只支持一层。

        总之，Vuex 和 Pinia 都是非常优秀的 Vue.js 状态管理库。开发者可以根据自己的需要来选择使用其中的一个，或者根据具体的场景来选择使用不同的库。 

说下对uniapp的理解及其使用？

        Uniapp 是一个基于 Vue.js 的跨平台应用开发框架，可以一次编写代码，同时生成多个平台的应用程序，如 H5、小程序、App 和游戏等。下面是我对 Uniapp 的理解及其使用的一些总结：

        1. 跨平台：Uniapp 可以同时生成多个平台的应用程序，可以大大提高开发效率。

        2. 基于 Vue.js：Uniapp 基于 Vue.js 框架，开发者可以使用 Vue.js 的所有特性，如组件化、响应式、指令等。

        3. 支持小程序：Uniapp 可以开发微信小程序、支付宝小程序、百度智能小程序和字节跳动小程序，可以大大简化小程序的开发流程。

        4. 组件库丰富：Uniapp 内置了一些常用的组件，如导航栏、标签页、按钮、表单等，同时也支持第三方 UI 组件库。

        5. 开发工具友好：Uniapp 提供了一款名为 HBuilderX 的开发工具，可以方便地进行代码编辑、调试和打包等操作。

        6. 上手简单：对于熟悉 Vue.js 的开发者来说，学习和使用 Uniapp 非常简单。同时 Uniapp 也提供了一份非常详细的文档和示例，可以帮助开发者快速上手。

        总之，Uniapp 是一款非常优秀的跨平台应用开发框架，可以大大提高开发效率，同时也是一个非常友好和简单的开发工具。如果您需要开发跨平台应用程序，Uniapp 是一个非常不错的选择。 

怎么优化前端体验和⻚⾯响应速度？

优化前端体验和页面响应速度是前端开发中非常重要的一部分。下面是一些常用的优化方法：

        1. 减少HTTP请求：通过合并CSS和JS文件、使用图片精灵表、减少页面元素等方式，可以减少HTTP请求，从而提高页面加载速度。

        2. 压缩文件：将CSS、JS和HTML文件进行压缩，可以减少文件大小，从而提高页面加载速度。

        3. 使用CDN加速：将CSS、JS和图片等静态资源放在CDN上，可以加快文件加载速度。

        4. 异步加载：通过异步加载JS和CSS文件，可以加快页面加载速度。

        5. 缓存：使用浏览器缓存和服务器缓存技术，可以减少HTTP请求，从而提高页面响应速度。

        6. 图片优化：通过压缩图片和使用WebP格式等方式，可以减小图片大小，从而提高页面加载速度。

        7. 延迟加载：通过延迟加载图片和视频等资源，可以减少页面加载时间。

        8. 减少DOM操作：减少DOM操作可以减少浏览器的重排和重绘操作，从而提高页面响应速度。

        9. 使用Web Workers：使用Web Workers可以将一些耗时的操作放在后台线程中执行，从而提高页面响应速度。

        总之，通过以上优化方法可以有效地提高前端体验和页面响应速度，让用户体验更加流畅。同时，还需要根据具体的场景进行针对性的优化，才能达到最好的效果。

前端开发中怎么保证兼容性？

保证前端兼容性是前端开发中非常重要的一部分。下面是一些常用的保证前端兼容性的方法：

        1. 浏览器兼容性测试：在开发过程中可以使用浏览器兼容性测试工具，如caniuse、BrowserStack等，测试网站在不同浏览器下的兼容性。

        2. 使用Polyfill： Polyfill是一种JavaScript代码片段，它可以让浏览器具有现代浏览器所支持的新特性，而不用等待浏览器本身升级。通过使用Polyfill，可以保证网站在不支持新特性的浏览器中正常运行。

        3. 代码规范：编写符合标准的代码可以避免浏览器解析错误和兼容性问题，使用W3C标准、遵循语义化HTML、CSS，使用标准的JavaScript语法等都是保证兼容性的重要手段。

        4. CSS Hack：通过使用CSS Hack可以解决不同浏览器之间的兼容性问题，但是需要注意的是，使用Hack可能会导致代码难以维护和升级。

        5. 兼容性库：一些兼容性库，如Modernizr、Normalize.css、jQuery等，可以帮助开发者快速解决浏览器兼容性问题。

        6. 版本控制：在使用第三方库和框架时，需要注意其版本兼容性，避免使用不兼容的版本。

        总之，保证前端兼容性是前端开发中非常重要的一部分，开发者需要在开发过程中注意以上细节，才能保证网站在不同浏览器和设备上都能正常运行。 

CSS hack?

        CSS hack是在不同的浏览器或者不同版本的浏览器下，通过特定的CSS代码来实现相同的效果的技巧。常见的CSS hack有以下几种：
        1、选择器hack：利用不同浏览器解析CSS选择器的差异来达到不同的效果。

        2、属性hack：利用不同浏览器解析CSS属性的差异来达到不同的效果。

        3、条件注释hack：利用IE浏览器特有的条件注释语句来针对IE浏览器使用不同的CSS代码。

        4、JavaScript hack：利用JavaScript来判断浏览器类型和版本，然后动态加载对应的CSS文件。
        需要注意的是，CSS hack虽然可以解决兼容性问题，但是会增加代码的复杂度和维护难度，也会影响网页加载的速度和性能，因此应该尽量避免使用。

开发中怎么改进页面性能？

优化页面性能是前端开发中非常重要的一部分。下面是一些常用的优化页面性能的方法：

         1. 减少HTTP请求：通过合并CSS和JS文件、使用图片精灵表、减少页面元素等方式，可以减少HTTP请求，从而提高页面加载速度。

        2. 压缩文件：将CSS、JS和HTML文件进行压缩，可以减少文件大小，从而提高页面加载速度。

        3. 使用CDN加速：将CSS、JS和图片等静态资源放在CDN上，可以加快文件加载速度。

        4. 异步加载：通过异步加载JS和CSS文件，可以加快页面加载速度。

        5. 缓存：使用浏览器缓存和服务器缓存技术，可以减少HTTP请求，从而提高页面响应速度。

        6. 图片优化：通过压缩图片和使用WebP格式等方式，可以减小图片大小，从而提高页面加载速度。

        7. 延迟加载：通过延迟加载图片和视频等资源，可以减少页面加载时间。

        8. 减少DOM操作：减少DOM操作可以减少浏览器的重排和重绘操作，从而提高页面响应速度。

        9. 使用Web Workers：使用Web Workers可以将一些耗时的操作放在后台线程中执行，从而提高页面响应速度。

        10. 使用懒加载：对于一些不重要的内容，使用懒加载可以减少页面加载时间，提高页面性能。

        11. 优化CSS和JS：优化CSS和JS代码可以减少文件大小，从而提高页面加载速度。         12. 使用SSR：使用服务器端渲染技术可以加快首屏加载速度，提高页面性能。

        总之，通过以上优化方法可以有效地提高页面性能，让用户体验更加流畅。同时，还需要根据具体的场景进行针对性的优化，才能达到最好的效果。

前端怎么优化安全性？

        保证前端安全性是前端开发中非常重要的一部分。下面是一些常用的保证前端安全性的方法：

        1. 防止XSS攻击：通过对用户输入的数据进行过滤和转义等处理，可以防止XSS攻击。         2. 防止CSRF攻击：通过使用CSRF Token、Referer检查等方式，可以防止CSRF攻击。

        3. 防止点击劫持：通过使用X-Frame-Options、Content-Security-Policy等方式，可以防止点击劫持攻击。

        4. 防止代码注入：通过对用户输入的数据进行过滤和校验等处理，可以防止代码注入攻击。

        5. 防止敏感信息泄露：通过使用HTTPS协议、加密存储、加密传输等方式，可以防止敏感信息泄露。

        6. 防止DDoS攻击：通过使用CDN、限制请求频率、使用验证码等方式，可以防止DDoS攻击。

        7. 保持更新：及时更新框架和库等软件，可以避免已知漏洞的攻击。

        8. 代码审查：对代码进行定期审查，可以发现潜在的安全风险，及时进行修复。

        9. 安全培训：对开发人员进行安全培训，可以提高其安全意识和技能，保证前端安全性。

        总之，保证前端安全性是前端开发中非常重要的一部分，开发者需要在开发过程中注意以上细节，才能保证网站的安全性。同时，还需要不断学习和了解最新的安全技术和攻击手段，才能更好地保护网站的安全。 

怎么使⽤webpack对前端性能进行优化？

        Webpack 是一个非常强大的前端构建工具，可以帮助我们对前端性能进行优化。下面是一些常用的优化方法：

        1. 代码分离：将代码分成多个小模块，按需加载，可以减少初始化时间和加载时间，从而提高页面性能。

        2. 压缩代码：使用Webpack的UglifyJS插件可以对JS代码进行压缩，从而减小文件大小，提高页面加载速度。

        3. 使用Tree Shaking：使用Webpack的Tree Shaking技术可以将未使用的代码删除掉，从而减小文件大小，提高页面加载速度。

        4. 使用缓存：使用Webpack的HashedModuleIdsPlugin插件可以生成带有hash值的文件名，从而实现缓存功能，减少页面加载时间。

        5. 使用异步加载：使用Webpack的import()语法可以异步加载模块，减少初始化时间和加载时间，从而提高页面性能。

        6. 使用图片压缩：使用Webpack的image-webpack-loader插件可以对图片进行压缩，从而减小文件大小，提高页面加载速度。

        7. 利用CDN：使用Webpack的output.publicPath配置项可以将静态资源放在CDN上，从而加快文件加载速度，提高页面性能。

        8. 按需加载CSS：使用Webpack的ExtractTextPlugin插件可以将CSS文件单独打包，从而按需加载，减少页面加载时间。

        9. 优化打包速度：使用Webpack的HappyPack插件可以将任务分配给多个子进程并行处理，从而提高打包速度。

        10. 使用Scope Hoisting：使用Webpack的Scope Hoisting技术可以将模块之间的依赖关系进行优化，从而减小文件大小，提高页面加载速度。

        总之，通过以上优化方法可以有效地提高前端性能，让用户体验更加流畅。同时，还需要根据具体的场景进行针对性的优化，才能达到最好的效果。

前端开发中怎么注册全局过滤器？ 

在前端开发中，我们可以使用Vue.js或者其他框架实现全局过滤器的注册。下面以Vue.js为例，介绍如何注册全局过滤器。
1. 在Vue实例中定义过滤器方法：
```javascript
// 定义一个全局过滤器
Vue.filter('toUpper', function(value) {
  if (!value) return ''
  value = value.toString()
  return value.toUpperCase()
})
```
2. 在模板中使用过滤器：
```html
<!-- 使用过滤器 -->
<div>{{ message | toUpper }}</div>
```
在上面的代码中，我们先在Vue实例中定义了一个名为toUpper的全局过滤器，然后在模板中使用了这个过滤器。当渲染message数据时，会先调用toUpper过滤器处理message数据，将其转为大写。
需要注意的是，我们也可以在局部组件中注册过滤器。只需要在组件中定义一个名为filters的对象，将过滤器方法作为对象的属性即可。
```javascript
Vueponent('example', {
  filters: {
    toUpper: function(value) {
      if (!value) return ''
      value = value.toString()
      return value.toUpperCase()
    }
  },
  template: '<div>{{ message | toUpper }}</div>',
  data: function () {
    return {
      message: 'hello'
    }
  }
})
```
在上面的代码中，我们在example组件中定义了一个名为toUpper的局部过滤器，并在模板中使用了这个过滤器。当渲染message数据时，会先调用toUpper过滤器处理message数据，将其转为大写。
总之，通过全局过滤器，我们可以快速方便地处理数据，让页面更加灵活和易读。

微信小程序开发怎么优化⻚⾯的性能？

        微信小程序开发中，页面性能优化非常重要，可以提高用户体验，下面是一些常用的优化方法：

        1. 减少页面请求次数：尽量减少页面请求次数，可以通过合并JS、CSS等静态资源，减少HTTP请求次数，从而提高页面加载速度。

        2. 使用setData方法：使用setData方法更新数据，可以只更新需要更新的部分，避免重复渲染整个页面，从而提高页面性能。

        3. 避免频繁调用setData方法：频繁调用setData方法会导致页面不断刷新，影响性能。可以使用debounce或throttle等方法限制setData方法的调用频率。

        4. 使用wx:if和hidden属性：在需要动态显示和隐藏元素时，可以使用wx:if和hidden属性，避免不必要的计算，提高页面性能。

        5. 优化图片加载：可以使用image标签的lazy-load属性，实现图片懒加载，减少页面加载时间，提高页面性能。

        6. 避免使用过多的组件：在小程序中，每个组件都需要占用一定的内存资源，过多的组件会导致内存占用过高，影响性能。可以使用小程序提供的自定义组件，将相似的组件封装在一起，减少组件数量。

        7. 使用小程序提供的API：小程序提供了很多API，可以帮助我们快速实现常用功能，避免重复编写代码，提高开发效率和页面性能。

        总之，通过以上优化方法可以有效地提高小程序页面性能，提升用户体验。同时，还需要根据具体的场景进行针对性的优化，才能达到最好的效果。

微信小程序怎么实现微信支付？

微信小程序可以通过调用微信支付API实现微信支付。下面是实现微信支付的步骤：

        1. 注册为微信支付商户：首先，需要注册为微信支付商户，获取商户号和API密钥等信息。

        2. 配置开发环境：在微信公众平台中，需要配置开发者信息和支付相关配置信息。

        3. 获取支付参数：在小程序中，需要使用wx.request方法向后台服务器发送请求，获取支付参数（prepay_id等）。

        4. 调用微信支付API：使用wx.requestPayment方法发起支付请求，传入支付参数和API密钥等信息。 具体实现步骤如下：

        1. 注册为微信支付商户：访问微信支付官网（pay.weixin.qq），进行注册和申请。         2. 配置开发环境：在微信公众平台中，选择小程序开发，进入小程序管理后台，选择开发-开发设置，设置支付相关配置信息，如商户号、API密钥、支付证书等。

        3. 获取支付参数：在小程序中，使用wx.request方法向后台服务器发送请求，获取支付参数。后台服务器通过微信支付API生成支付参数，返回给小程序。

        4. 调用微信支付API：在小程序中，使用wx.requestPayment方法发起支付请求，传入支付参数和API密钥等信息。支付成功后，微信服务器返回支付结果，小程序可以根据支付结果进行后续处理。

        需要注意的是，微信支付API需要在小程序后台服务器中实现。在小程序中，只需要调用API接口，将支付参数传递给后台服务器即可。

微信小程序怎么实现⽤户分享⾄微信好友和微信群？

微信小程序可以通过调用微信分享API实现用户分享到微信好友和微信群。下面是实现分享的步骤：
1. 注册小程序：首先，需要在微信公众平台注册小程序，并获取小程序的AppID。
2. 配置小程序：在小程序管理后台，进入“开发-开发设置”页面，配置小程序的分享设置，包括分享标题、分享图片等。
3. 调用微信分享API：在小程序中，可以通过wx.showShareMenu方法开启分享功能，然后通过wx.onShareAppMessage方法和wx.updateShareMenu方法来实现分享操作。
具体实现步骤如下：
1. 注册小程序：访问微信公众平台（mp.weixin.qq），并注册小程序，获取小程序的AppID。
2. 配置小程序：在小程序管理后台，选择“开发-开发设置”页面，进入“分享设置”模块，设置分享标题、分享图片等信息。
3. 调用微信分享API：在小程序中，使用wx.showShareMenu方法开启分享功能，然后使用wx.onShareAppMessage方法和wx.updateShareMenu方法来实现分享操作。
示例代码如下：
```
// 开启分享功能
wx.showShareMenu({
  withShareTicket: true,
  success: function () {
    console.log('share menu success')
  },
  fail: function () {
    console.log('share menu fail')
  }
})
// 监听用户点击分享按钮事件
wx.onShareAppMessage(function () {
  return {
    title: '分享标题',
    imageUrl: '分享图片路径',
    success: function (res) {
      console.log('share success')
    },
    fail: function (res) {
      console.log('share fail')
    }
  }
})
// 更新分享菜单
wx.updateShareMenu({
  withShareTicket: true,
  success: function () {
    console.log('update share menu success')
  },
  fail: function () {
    console.log('update share menu fail')
  }
})
```
注意：分享的图片必须是网络图片，而且必须是HTTPS协议的。分享的图片大小不能超过32KB。

前端怎么实现微信小程序登录？ 

前端实现微信小程序登录，需要调用微信登录API获取用户登录凭证（code），然后将凭证发送到后台服务器进行验证和处理。具体实现步骤如下：
1. 调用微信登录API：在小程序中，使用wx.login方法调用微信登录API，获取用户登录凭证（code）。
2. 发送登录凭证：将凭证发送到后台服务器进行验证和处理。可以使用wx.request方法向后台服务器发送请求，传递登录凭证等参数。
3. 处理登录结果：后台服务器接收到登录凭证后，可以通过微信登录API和微信用户信息API获取用户信息。后台服务器可以将用户信息保存到数据库中，并生成用户身份令牌（token）返回给小程序。
4. 保存用户身份令牌：小程序可以将用户身份令牌保存到本地存储中，方便后续请求时携带令牌进行身份认证。
具体实现步骤如下：
1. 调用微信登录API：在小程序中，使用wx.login方法调用微信登录API，获取用户登录凭证（code）。
```
wx.login({
  success(res) {
    if (res.code) {
      // 登录凭证发送到后台服务器
      wx.request({
        url: 'https://example/api/login',
        data: {
          code: res.code
        },
        success(res) {
          console.log(res.data.token)
        }
      })
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})
```
2. 发送登录凭证：将凭证发送到后台服务器进行验证和处理。
3. 处理登录结果：后台服务器接收到登录凭证后，可以通过微信登录API和微信用户信息API获取用户信息。后台服务器可以将用户信息保存到数据库中，并生成用户身份令牌（token）返回给小程序。
```
// 后台服务器代码
router.post('/login', async (ctx, next) => {
  const code = ctx.request.body.code
  const res = await axios.get(`https://api.weixin.qq/sns/jscode2session?appid=${APPID}&secret=${APPSECRET}&js_code=${code}&grant_type=authorization_code`)
  const openid = res.data.openid
  const session_key = res.data.session_key
  const user = await User.findOne({ openid })
  if (user) {
    // 用户已注册，更新用户信息
    user.session_key = session_key
    await user.save()
  } else {
    // 用户未注册，创建新用户
    const newUser = new User({ openid, session_key })
    await newUser.save()
  }
  const token = jwt.sign({ openid }, SECRET)
  ctx.body = { token }
})
```
4. 保存用户身份令牌：小程序可以将用户身份令牌保存到本地存储中，方便后续请求时携带令牌进行身份认证。
```
// 小程序代码
wx.setStorageSync('token', res.data.token)
```
需要注意的是，为了保证用户数据安全，后台服务器需要对用户身份令牌进行验证和授权，防止恶意用户伪造或篡改令牌。可以使用JWT等技术实现令牌验证和授权。

说下xlsx 插件的使用？ 

xlsx 是一个用于读写 Excel 文件的 JavaScript 库，可以在前端和后端使用。它支持读取和写入 Excel 文件，支持多种数据格式（如数组、对象、JSON 等），并且可以进行数据格式转换和处理。下面是 xlsx 插件的使用步骤：
1. 安装 xlsx 插件
可以使用 npm 进行安装：
```
npm install xlsx --save
```
2. 读取 Excel 文件
使用 xlsx 插件读取 Excel 文件，需要使用 `read` 方法，该方法接收文件路径或者二进制数据作为参数，返回一个 Workbook 对象，表示整个 Excel 文件。
```javascript
const xlsx = require('xlsx'); // 引入 xlsx 插件
// 读取 Excel 文件
const workbook = xlsx.readFile('example.xlsx');
// 获取第一个工作表
const worksheet = workbook.Sheets[workbook.SheetNames[0]];
// 将工作表数据转换成 JSON 对象
const data = xlsx.utils.sheet_to_json(worksheet);
console.log(data); // 输出工作表数据
```
3. 写入 Excel 文件
使用 xlsx 插件写入 Excel 文件，需要使用 `write` 方法，该方法接收 Workbook 对象和配置参数作为参数，返回一个二进制数据流，表示整个 Excel 文件。
```javascript
const xlsx = require('xlsx'); // 引入 xlsx 插件
const data = [
  { name: '张三', age: 18, gender: '男' },
  { name: '李四', age: 20, gender: '女' },
  { name: '王五', age: 22, gender: '男' }
];
// 创建工作簿
const workbook = xlsx.utils.book_new();
// 创建工作表
const worksheet = xlsx.utils.json_to_sheet(data);
// 将工作表添加到工作簿
xlsx.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
// 将工作簿写入 Excel 文件
xlsx.writeFile(workbook, 'example.xlsx');
console.log('Excel 文件写入完成');
```
需要注意的是，使用 xlsx 插件时需要注意 Excel 文件的格式和数据类型，以及数据的格式转换和处理。另外，如果需要使用 xlsx 插件读写大型 Excel 文件，建议使用流式读写的方式，以避免内存溢出等问题。

说下vue-print-nb 插件的使用？ 

vue-print-nb 是一个 Vue.js 打印插件，可以用于在前端页面中快速实现打印功能。下面是 vue-print-nb 插件的使用步骤：
1. 安装 vue-print-nb 插件
可以使用 npm 进行安装：
```
npm install vue-print-nb --save
```
2. 引入 vue-print-nb 插件
可以在 main.js 文件中全局引入 vue-print-nb 插件：
```javascript
import Vue from 'vue'
import VuePrintNB from 'vue-print-nb'
Vue.use(VuePrintNB)
```
3. 在组件中使用 vue-print-nb 插件
在需要打印的组件中添加打印按钮，并绑定 `print` 方法：
```html
<template>
  <div>
    <!-- 打印按钮 -->
    <button @click="print">打印</button>
    <!-- 打印内容 -->
    <div ref="printContent">
      <!-- ... -->
    </div>
  </div>
</template>
```
```javascript
<script>
export default {
  methods: {
    // 打印方法
    print() {
      this.$print(this.$refs.printContent) // 打印指定区域
      // this.$print() // 打印整个页面
    }
  }
}
</script>
```
需要注意的是，使用 vue-print-nb 插件时需要注意打印内容的样式和布局，以确保打印效果符合预期。另外，vue-print-nb 插件还支持一些参数和事件，可以根据实际需求进行配置和使用。

说下你怎么使用路由守卫的？ 

在 Vue Router 中，路由守卫（Guard）是一种机制，可以在路由导航过程中对路由进行控制和过滤。Vue Router 提供了三种路由守卫：全局守卫、路由独享守卫和组件内守卫。下面是我使用路由守卫的方法：
1. 全局守卫
全局守卫会在所有路由导航过程中都被调用，可以用于全局的登录验证、权限控制等场景。全局守卫包括三个方法：`beforeEach`、`beforeResolve` 和 `afterEach`。其中，`beforeEach` 方法用于在导航之前进行验证，`beforeResolve` 方法用于在导航完成之前进行异步处理，`afterEach` 方法用于在导航完成之后进行处理。例如，下面的代码实现了一个全局守卫，用于验证用户是否登录：
```javascript
const router = new VueRouter({
  routes: [...],
});
router.beforeEach((to, from, next) => {
  const isLogin = localStorage.getItem('token');
  if (to.meta.requireAuth) { // 需要登录验证的路由
    if (isLogin) {
      next();
    } else {
      next({ path: '/login' }); // 跳转到登录页面
    }
  } else {
    next();
  }
});
```
2. 路由独享守卫
路由独享守卫是针对某个路由的守卫，只有该路由才会触发守卫的回调函数。可以在路由配置中使用 `beforeEnter` 属性定义路由独享守卫。例如：
```javascript
const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      beforeEnter: (to, from, next) => {
        const isLogin = localStorage.getItem('token');
        if (isLogin) {
          next();
        } else {
          next({ path: '/login' }); // 跳转到登录页面
        }
      }
    }
  ],
});
```
3. 组件内守卫
组件内守卫是针对某个组件的守卫，可以在组件内部定义 `beforeRouteEnter`、`beforeRouteUpdate` 和 `beforeRouteLeave` 方法。其中，`beforeRouteEnter` 方法只能在组件实例创建之前调用，`beforeRouteUpdate` 方法只有在当前路由改变，而该组件被复用时才会调用，`beforeRouteLeave` 方法在离开当前路由时调用。例如：
```javascript
const User = {
  template: '<div>User</div>',
  beforeRouteEnter(to, from, next) {
    const isLogin = localStorage.getItem('token');
    if (isLogin) {
      next();
    } else {
      next({ path: '/login' }); // 跳转到登录页面
    }
  },
  beforeRouteUpdate(to, from, next) {
    // ...
  },
  beforeRouteLeave(to, from, next) {
    // ...
  },
};
```

说下浏览器中输入url按回车后的全过程 ？

当在浏览器中输入URL并按下回车键时，会触发以下过程：

1. URL解析：浏览器会对输入的URL进行解析，将其分解成协议、主机名、端口号、路径等各个部分。
2. DNS解析：浏览器会将解析出来的主机名发送给DNS服务器进行解析，获取主机的IP地址。如果DNS缓存中已经有该域名对应的IP地址，则可以直接使用缓存中的IP地址。
3. 建立TCP连接：浏览器会通过TCP协议与目标主机建立连接。TCP协议是一种可靠的协议，通过三次握手来确保双方的连接可靠。
4. 发送HTTP请求：浏览器会发送HTTP请求，请求中包含了浏览器想要获取的资源的信息，如请求方法、头部信息、请求体等。
5. 服务器处理请求：服务器收到请求后，会根据请求的信息来处理请求，如查找请求的资源、执行后台逻辑等。
6. 服务器返回响应：服务器处理完请求后，会将处理结果封装成HTTP响应返回给浏览器。
7. 接收HTTP响应：浏览器接收到服务器返回的HTTP响应后，会对响应进行解析，根据响应的状态码来判断是否请求成功。
8. 渲染页面：如果响应成功，浏览器会根据响应中的HTML、CSS、JavaScript等资源来渲染页面，并展示给用户。
9. 断开连接：浏览器在获取到所有资源之后，会关闭TCP连接。 以上就是浏览器中输入URL后的全过程。

webpack使用哪些插件，原理是什么？

webpack有很多插件，常见的一些包括：

1. html-webpack-plugin：自动生成HTML文件，并将打包后的JS文件引入其中。
2. clean-webpack-plugin：每次打包前清除输出目录，避免旧文件的影响。
3. mini-css-extract-plugin：将CSS从JS文件中分离出来，提高页面加载速度和渲染性能。
4. optimize-css-assets-webpack-plugin：压缩CSS文件，减小文件体积。
5. uglifyjs-webpack-plugin：压缩混淆JS文件，减小文件体积。
6. copy-webpack-plugin：将指定的文件或目录复制到输出目录中，方便静态资源的管理。
7. webpack-bundle-analyzer：分析打包后的文件，查看哪些文件占用了较大的空间，优化打包效果。 这些插件的原理都是在Webpack的构建流程中进行操作，通过各种技术手段来优化打包效果、提高性能、减小文件体积等。插件可以在Webpack的配置文件中进行引入和配置，以实现各种功能目的。

说下js的宏任务和微任务？

       JavaScript 的任务可以分为两种类型：宏任务（Macro Task）和微任务（Micro Task）。

        宏任务可以理解为一组由 JavaScript 引擎排队执行的任务，比如 setTimeout、setInterval、setImmediate、I/O 操作、UI 渲染等。这些任务会被放入宏任务队列中，等待 JavaScript 引擎空闲时执行。

        微任务可以理解为一组由 JavaScript 引擎排队执行的高优先级任务，比如 Promise、process.nextTick 等。这些任务会被放入微任务队列中，在当前宏任务执行完毕后立即执行。

        JavaScript 引擎在执行完当前的宏任务后，会先执行微任务队列中的所有任务，然后再执行下一个宏任务。这就是为什么微任务可以在下一个宏任务之前执行的原因。

例如，当我们执行如下代码时：
setTimeout(() => {
  console.log('setTimeout');
}, 0);
Promise.resolve().then(() => {
  console.log('Promise');
});
console.log('Hello World');
输出结果为：Hello World -> Promise -> setTimeout。
    因为 setTimeout 会被放入宏任务队列，Promise.then 会被放入微任务队列，而 console.log('Hello World') 是当前宏任务的同步任务，会先执行。因此先输出 Hello World，然后执行微任务队列中的 Promise.then，输出 Promise，最后执行宏任务队列中的 setTimeout，输出 setTimeout。

说下js的宏任务和微任务的区别 ？

        JavaScript 中的任务可以分为宏任务和微任务两种类型，它们之间的区别如下：

1. 执行顺序不同：宏任务和微任务的执行顺序不同。在每次事件循环中，JavaScript 引擎会先执行当前宏任务中的所有同步任务，然后执行微任务队列中的所有任务，最后才会执行下一个宏任务。这意味着微任务的执行优先级比宏任务高。
2. 触发时间不同：宏任务和微任务的触发时间也不同。宏任务是由浏览器或 Node.js 等宿主环境在事件循环中触发的，比如 setTimeout、setInterval、I/O 操作等。而微任务是在当前宏任务执行完毕后立即执行的，比如 Promise.then、process.nextTick 等。
3. 存储方式不同：宏任务和微任务的存储方式也不同。宏任务是存储在宏任务队列中的，微任务是存储在微任务队列中的。微任务队列通常是在宏任务执行时创建的，而且每个宏任务都会有自己的微任务队列。
4. 使用场景不同：宏任务和微任务的使用场景也不同。宏任务适合执行一些耗时的任务，比如网络请求、文件操作等。而微任务适合执行一些轻量级的任务，比如修改 DOM、更新状态等。总之，宏任务和微任务是 JavaScript 事件循环机制中的两个重要概念，了解它们的区别可以帮助我们更好地理解 JavaScript 中的异步编程。

说下js的事件循环？

       

JavaScript 的事件循环是指一种机制，用于管理和处理异步事件的执行顺序。它是 JavaScript 运行时的核心机制之一，也是实现事件驱动编程的基础。 JavaScript 中的事件循环机制分为以下几个阶段：

        JS引擎是单线程的，这意味着所有的任务执行必须得排队，前一个任务结束了，下一个任务才能开始，但是如果遇到了异步的任务，后面的任务就需要等待，而中间等待的时候cpu其实是闲置的，这无疑是一种效率极低的行为，JavaScript对此的处理是这样的，针对异步的任务，会将其搁置，等待其结果返回后，再让其回到主线程。而异步任务临时存储的地方就是任务队列。

        我们的同步代码就存在执行栈中。而我们的异步代码则被分配给WebAPIs去执行，当其执行结束后，就会推入任务队列中，并注册回调函数，供主线程调用。

        当主线程处理完所有同步任务，这时执行栈就空了，主线程就会访问任务队列的头部，看看任务队列的头部有没有已经注册好的回调函数，如果有就把其放置执行栈，进行执行。执行完后执行栈又空了，就会继续前面的操作，如此循环往复，这就是JS的运行机制——EventLoop

js的两种开发模式？

1. 前端开发：前端开发主要是指使用 JavaScript、HTML 和 CSS 等技术开发客户端应用程序。前端开发的重点是实现用户界面和交互功能，通常使用框架和库，如 React、Vue、jQuery 等。前端开发需要熟悉浏览器的工作原理和 Web 标准，并能够处理跨浏览器兼容性问题。
2. 后端开发：后端开发主要是指使用 JavaScript 等技术开发服务器端应用程序。后端开发的重点是实现数据存储、业务逻辑和 API 接口等功能，通常使用 Node.js 平台和一些流行的框架和库，如 Express、Koa、MongoDB 等。后端开发需要熟悉数据库和服务器的工作原理，并能够处理网络安全和性能优化等问题。 需要注意的是，前端和后端开发虽然是不同的领域，但两者之间也有很多交叉点。比如，前端开发者需要了解一些后端开发的基础知识，如 HTTP 协议、RESTful API 等；而后端开发者也需要了解一些前端开发的知识，如 HTML、CSS、JavaScript 等。

前端开发中怎么生成二维码？

        1.qrcode.js

         qrcode.js是一个轻量级的二维码生成库，可以在浏览器中使用。使用该库，只需要引入qrcode.min.js文件即可，然后在需要生成二维码的地方调用qrcode.generate()方法即可。示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>生成二维码</title>
  <script src="https://cdn.bootcdn/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
</head>
<body>
  <h1>生成二维码</h1>
  <div id="qrcode"></div>
  <script>
    const qrcode = new QRCode('qrcode');
    qrcode.makeCode('https://www.baidu');
  </script>
</body>
</html>

        2.jsQR

         jsQR是一个解码二维码的JavaScript库，可以在浏览器中使用。使用该库，需要引入jsQR.min.js文件，并使用jsQR()方法解码数据，然后使用Canvas API生成二维码。示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>生成二维码</title>
  <script src="https://cdn.bootcdn/ajax/libs/jsqr/1.4.1/jsQR.min.js"></script>
</head>
<body>
  <h1>生成二维码</h1>
  <canvas id="qrcode"></canvas>
  <script>
    const canvas = document.getElementById('qrcode');
    const context = canvas.getContext('2d');
    const url = 'https://www.baidu';
    const qrCode = jsQR(url, canvas.width, canvas.height);
    if (qrCode) {
      context.drawImage(qrCode, 0, 0);
    }
  </script>
</body>
</html>

        3.qr-image

        qr-image是一个基于Node.js的二维码生成库，可以在服务器端生成二维码。使用该库，需要先安装qr-image模块，并使用qr-image.create()方法生成二维码。示例代码如下：

const qr = require('qr-image');
const fs = require('fs');
const url = 'https://www.baidu';
const qrCode = qr.image(url, { type: 'png' });
qrCode.pipe(fs.createWriteStream('qrcode.png'));

        以上三种方式都可以在前端开发中生成二维码，具体选择哪种方式可以根据自己的需求和实际情况来决定。

web端复制功能怎么写？

实现Web端复制功能有多种方式，其中比较常用的两种方式是：

        1.使用Clipboard API Clipboard API是浏览器提供的一个API，可以使用它来操作剪贴板。该API支持复制、剪切和粘贴等操作，使用起来比较简单。 示例代码：

const copyText = '要复制的文本';
navigator.clipboard.writeText(copyText).then(() => {
  console.log('复制成功');
}, () => {
  console.log('复制失败');
});

         2.使用document.execCommand()方法 document.execCommand()方法是一个历史遗留的API，已经被标记为废弃。但是，它可以在大多数现代浏览器中使用，并且支持复制、剪切和粘贴等操作。 示例代码：

const copyText = '要复制的文本';
const input = document.createElement('input');
input.value = copyText;
document.body.appendChild(input);
input.select();
document.execCommand('copy');
document.body.removeChild(input);
console.log('复制成功');

微信h5怎么唤起打开微信小程序？

可以通过以下方式唤起打开微信小程序：

        1.使用微信小程序的跳转链接 在H5页面中，可以使用微信小程序的跳转链接来唤起打开对应的小程序。跳转链接的格式为：

https://servicewechat/{appid}/{version}/page-frame.html

 其中，{appid}为小程序的AppID，{version}为小程序的版本号。在H5页面中，可以使用window.location.href或window.open方法打开跳转链接。

        2.使用微信JS-SDK的API

        在H5页面中，可以使用微信JS-SDK的wx.miniProgram.navigateTo或wx.miniProgram.switchTab方法来唤起打开对应的小程序。 例如，使用wx.miniProgram.navigateTo方法：

wx.miniProgram.navigateTo({url: '/pages/index/index'})

其中，'/pages/index/index'为小程序中需要跳转的页面路径。 需要注意的是，使用微信JS-SDK的API需要先进行签名验证和权限配置。具体可以参考微信官方文档：概述 | 微信开放文档

uniapp怎么分包加载？

Uniapp的分包加载可以通过配置manifest.json文件实现。以下是具体步骤：

1. 在uniapp项目的根目录下找到manifest.json文件，没有则手动创建。
2. 在manifest.json文件中添加subPackages字段，用于配置分包信息。例如

{
  "subPackages": [
    {
      "root": "pages/sub1/",
      "pages": [
        "index",
        "page1",
        "page2"
      ]
    },
    {
      "root": "pages/sub2/",
      "pages": [
        "index",
        "page1",
        "page2"
      ]
    }
  ]
}

上述代码中，定义了两个分包，分别为pages/sub1/和pages/sub2/，每个分包中包含了多个页面，页面名称以字符串形式列出。

3. 在需要使用分包的页面中，使用uni.requireSubpackage()方法进行分包加载。例如：

uni.requireSubpackage({
  name: 'sub1',
  success() {
    console.log('分包加载成功')
  }
})

        以上代码中，使用uni.requireSubpackage()方法加载名为sub1的分包，加载成功后执行回调函数。

        需要注意的是，分包加载会增加小程序的启动时间和包体积，需要在实际开发中根据具体情况进行权衡和优化。同时，分包中的页面需要在pages.json文件中进行配置，否则会导致分包无法正常使用。

 列表分页功能？

我们使用了 vantui 里面的 van-list 组件实现这个组件自带无限滚动加载的功能.用这个组件的方法如下
1.用这个组件标签将可滚动的内容包起来
2.这个组件中重要的属性或事件有三个，@load,v-model:loading,:finished
3.每当进入页面或者滚动到底部都会尝试执行@load 事件
4.例外情况是如果 loading /finished 其中一个为 true,load 就会被阳止因为要么是正在加载中要么已经到最后-页5.其中v-model:loading 会在执行时自动变为 true,需要异步加载后手动改回 false 以便下一页加载6.finished 则是在加载完,如果你判断已经没有下一页就需要手动修改
7.综上所述，@load 函数里面的逻辑如下
（1）获取新一页的数据
（2）将新数据追加到日数据底部
（3）将loading 改为 false 方便下一页加载
（4）将页码 ++
（5）检查一下是否到了最后一页如果是,就将 finished 改为 true

代码：

<script setup lang="ts">
import KnowledgeCard from './KnowledgeCard.vue'
import type { KnowledgeType, KnowledgeList } from '@/types/consult'
import { ref } from 'vue'
import { getKnowledgePage } from '@/services/consult'

const props = defineProps<{
  // 父组件传入的类型
  type: KnowledgeType
}>()

const list = ref<KnowledgeList>([])

// 获取列表的请求参数, 应该是个变量
const params = {
  type: props.type,
  current: 1,
  pageSize: 5
}

// van-list 的 loading 属性绑定一个布尔值, 控制当前是否正在加载中
const loading = ref(false)
// 决定页面是否已经拉到底
const finished = ref(false)
// 监听 van-list load 事件, 会在页面进来时, 和组件滚动到底部时执行
const load = async () => {
  // 加载新一页
  const res = await getKnowledgePage(params)
  // 现在可以翻页, 不应该覆盖旧数组, 而是追加
  list.value = [...list.value, ...res.data.rows]

  // 每当触发加载 loading 都会被变成true, 一致阻拦更多请求
  // 如果加载完数据, 就要变回 false, 允许继续加载
  loading.value = false
  // 读取完毕, 应该讲页码++
  params.current++
  // 如果发现, 我们现在的页码 跟后台返回的总页数相等, 就证明已经到底了
  if (params.current > res.data.pageTotal) finished.value = true
}
</script>

<template>
  <div class="knowledge-list">
    <van-list
      @load="load"
      v-model:loading="loading"
      :finished="finished"
      finished-text="已经到底啦"
    >
      <knowledge-card
        v-for="item in list"
        :key="item.id"
        :item="item"
      ></knowledge-card>
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.knowledge-list {
  padding: 0 15px;
}
</style>

后缀为vue的文件怎么转成浏览器可以使用浏览器可以识别的语言？

        后缀为vue的文件实际上是Vue.js的单文件组件（Single-File Components），它需要通过构建工具将其转换为浏览器可以识别的语言（HTML、CSS 和 JavaScript）。具体的转换过程如下： 

1. 解析：使用Vue.js的编译器将.vue文件解析成JavaScript对象。
2. 编译：将JavaScript对象转换为渲染函数（render function），渲染函数用于将组件渲染成HTML。
3. 打包：将编译后的渲染函数和组件依赖的CSS样式、JavaScript脚本等打包成一个JavaScript文件
4. 加载：在浏览器中加载打包后的JavaScript文件，即可使用浏览器可以识别的语言。              通常，开发者会使用Webpack等构建工具来完成上述转换过程，从而实现单文件组件的打包和加载。

vue3的proxy ? 

        Vue 3中引入了基于JavaScript原生的Proxy对象来实现响应式数据的实现。Proxy对象允许我们拦截对象上的操作，从而实现对数据的监听和响应式更新。 在Vue 3中，使用reactive函数创建一个响应式的对象。reactive函数内部使用了Proxy对象来拦截对象上的操作，从而实现了对对象的监听和响应式更新。

        示例代码：

import { reactive } from 'vue'
const state = reactive({
  count: 0
})
console.log(state.count) // 0
// 对对象进行操作
state.count++
console.log(state.count) // 1
// 手动触发响应式更新
state.count = 2
console.log(state.count) // 2

        在上述示例代码中，我们使用reactive函数创建了一个响应式的对象state。当我们对state对象进行操作时，Proxy对象会拦截这些操作，并自动更新视图中对应的数据。 除了reactive函数外，Vue 3还提供了其他一些API，如ref函数和computed函数，用于创建响应式数据和计算属性。这些API都是基于Proxy对象实现的。

vue2的Object.defineProperty ?

        在 Vue 2 中，通过 Object.defineProperty 方法来实现响应式数据，它的原理是利用了 JavaScript 对象的 getter 和 setter 两个方法来监听数据变化，从而实现数据的响应式更新。         示例代码 

var data = { count: 0 }
Object.defineProperty(data, 'count', {
  get: function() {
    console.log('get count')
    return this._count
  },
  set: function(newValue) {
    console.log('set count')
    this._count = newValue
  }
})
data.count = 1 // set count
console.log(data.count) // get count, 1

        在上述代码中，我们使用Object.defineProperty来监听data对象的count属性的变化，当我们通过data.count = 1来修改count属性的值时，会触发set方法，从而实现了数据的响应式更新。 需要注意的是，在 Vue 2 中，只能对已经存在的属性进行监听，如果需要监听新增属性，需要使用Vue.set方法或者vm.$set方法来实现响应式数据的更新。

怎样改变大小不触发回流 ?

        回流（reflow）是指浏览器为了重新渲染部分或全部文档而重新计算文档中每个元素的大小、位置等属性的过程。在页面中频繁发生回流会导致页面性能下降，因此需要尽量避免回流的发生。

        以下是一些可以避免回流的方法： 

        1、使用transform属性来进行缩放、旋转等变换操作。transform属性不会触发回流，因此可以用来避免频繁的回流。

        2、使用position属性的fixed或absolute值来脱离文档流，避免引起其他元素的位置变化，从而避免回流的发生。

        3、避免频繁地修改样式属性。如果需要频繁地修改样式属性，可以将这些属性合并到一个class中，然后通过修改元素的className属性来进行样式的修改。

        4、使用DocumentFragment来进行元素的批量操作。在需要添加多个元素时，可以先将这些元素添加到DocumentFragment中，然后再将DocumentFragment添加到文档中，这样可以避免多次回流。

        5、避免在浏览器窗口大小变化时频繁地修改样式属性。可以使用debounce或throttle等方法来限制事件的触发频率，从而避免频繁地触发回流。

        需要注意的是，虽然使用上述方法可以减少回流的发生，但并不能完全避免回流的发生。在实际开发中，需要根据具体情况综合使用多种方法来进行优化。

页面上控制文字不可被选中 ？

可以使用CSS中的user-select属性来控制页面上的文字是否可被选中。具体做法如下：

body {
  -webkit-user-select: none; /* Chrome, Safari, Opera */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
}

         上述代码中，我们使用了user-select属性来控制文字是否可被选中。将它设置为none即可禁止用户选中页面上的文字。需要注意的是，该属性可能会影响到页面上其他元素的交互，因此需要谨慎使用。如果需要在某个元素上禁止文字选中，可以将上述样式应用到该元素上。

隐藏input边框有哪些方式 ?

//使用CSS的border属性将边框宽度设置为0
input {
  border: 0;
}

//使用CSS的outline属性将轮廓线宽度设置为0
input {
  outline: none;
}

//使用CSS的appearance属性将控件的外观设置为none
input {
  -webkit-appearance: none;
  appearance: none;
}

//使用CSS的box-shadow属性将阴影大小设置为0
input {
  box-shadow: none;
}

         需要注意的是，以上方法可能会影响到输入框的交互效果，例如聚焦时的虚线框等。如果需要保留输入框的交互效果，可以使用CSS的box-shadow属性来实现。另外，如果需要在某个输入框上应用上述样式，可以将样式应用到该输入框的类名或ID上。

new Set()出来的数据可以不可以用数组的map方法吗 ?

        new Set() 函数返回一个 Set 对象，它表示一个集合，其中的元素是唯一的。Set 对象可以使用迭代器来访问元素，但它没有 map 方法。 如果需要使用 map 方法对 Set 对象中的元素进行遍历和处理，可以先将 Set 对象转换为数组，然后再使用 map 方法。例如：

const mySet = new Set([1, 2, 3]);
const myArray = Array.from(mySet);
const result = myArray.map(item => item * 2);
console.log(result); // [2, 4, 6]

      在这个例子中，我们使用 Array.from() 方法将 Set 对象转换为数组，然后使用 map 方法对数组中的元素进行遍历和处理。

后端返回大量数据前端渲染的时候不用分页怎样处理 ?

        如果后端返回的数据量很大，而前端不需要进行分页展示，那么可以考虑使用虚拟滚动（Virtual Scrolling）的技术来提高页面性能和用户体验。

        虚拟滚动是指只渲染可视区域（Viewport）内的数据，而不是渲染所有的数据。当用户滚动页面时，虚拟滚动会动态地加载新的数据并渲染到可视区域中。这样可以减少页面的渲染时间和内存占用，提高页面的响应速度和流畅度。

        具体实现虚拟滚动的方法有很多，可以使用现成的 UI 组件库，如 React-Virtualized、ngx-virtual-scroller、vue-virtual-scroller 等，也可以自行实现虚拟滚动的逻辑。

        无论哪种方法，都需要计算可视区域的高度和位置，以及每个元素的高度和位置，从而决定哪些元素需要被渲染。

        另外，如果后端返回的数据量很大，也可以在后端进行数据过滤和分组，只返回前端需要的数据，从而减少数据的传输和处理时间。这样可以进一步提高页面的性能和用户体验。 

webpack环境部署 ?

        将 webpack 打包后的文件部署到生产环境时，需要进行以下几个步骤：

        1、生成生产环境的代码：使用 webpack -p 命令来生成生产环境的代码。这个命令会对代码进行压缩、混淆等操作，以减小文件体积和提高代码安全性。

        2、配置服务器：将打包后的文件部署到一个 Web 服务器上，例如 Apache、Nginx 等。需要在服务器上配置静态资源目录，以便浏览器可以访问到打包后的文件。具体配置方式可以参考服务器相关的文档。

        3、配置 CDN：如果需要使用 CDN 加速静态资源的访问，可以将打包后的文件上传到 CDN，然后修改页面中的静态资源链接地址，使其指向 CDN 的地址。

        4、配置缓存：在服务器和 CDN 上可以配置缓存策略，以减少静态资源的访问次数和提高页面加载速度。可以使用 HTTP 头中的 Cache-Control、Expires 等字段来控制缓存的时间和方式。

        5、配置域名和 SSL：为了提高访问速度和安全性，可以使用自定义域名和 SSL 证书来访问静态资源。需要在服务器和 CDN 上配置对应的域名和证书，然后修改页面中的链接地址。

        以上是 webpack 环境部署的基本步骤，具体实现方法会根据实际情况而有所不同。在实际部署过程中，还需要考虑文件版本控制、自动化部署、监控和日志等方面的问题，以确保静态资源的可靠性和稳定性。

多服务器代理 ？

        在使用 webpack 打包应用程序时，如果需要通过代理将请求转发到多个服务器上，可以使用 webpack-dev-server 提供的代理功能。 具体做法是，在 webpack 配置文件中添加 devServer.proxy 配置项，指定需要代理的请求路径及其目标服务器，例如： 

module.exports = {
  // ...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 目标服务器地址
        pathRewrite: {'^/api' : ''} // 路径重写，用于将请求中的 /api 前缀去掉
      },
      '/static': {
        target: 'http://localhost:8080', // 目标服务器地址
        changeOrigin: true // 是否改变请求头中的 Host 字段
      }
    }
  }
};

        在上述代码中，我们使用 devServer.proxy 配置项定义了两个代理规则。第一个规则将所有以 /api 开头的请求转发到本地的 3000 端口上，第二个规则将所有以 /static 开头的请求转发到本地的 8080 端口上。pathRewrite 选项用于将请求路径中的 /api 前缀去掉，changeOrigin 选项用于改变请求头中的 Host 字段，以便目标服务器能正确识别请求来源。         当使用 webpack-dev-server 启动应用程序时，所有匹配到代理规则的请求都会被转发到目标服务器上。这样可以方便地将请求分发到多个服务器上，从而实现负载均衡和高可用性。

小程序的打包流程 ？

1. 开发代码编写：开发者使用微信开发者工具编写小程序代码。
2. 代码上传：开发者将代码上传至微信公众平台的小程序管理后台。
3. 审核发布：开发者提交小程序审核申请，等待审核通过后发布小程序。
4. 小程序打包：微信公众平台自动将小程序代码打包成一个压缩包，供用户下载安装。 其中，开发代码编写和代码上传是开发者需要完成的工作，审核发布和小程序打包是由微信公众平台自动完成的。在小程序打包完成后，开发者可以将压缩包分享给其他用户，或者通过微信公众平台的小程序码进行推广和分享。

vue样式scope原理 ?

        在 Vue 组件中，可以使用 scoped 属性来给样式添加作用域，这样在组件中定义的样式只会作用于当前组件中的元素，不会影响到其他组件。 样式的作用域是通过给元素添加 data-v-<hash> 属性实现的，其中 <hash> 是一个哈希值，用来保证每个组件的样式作用域是唯一的。在组件渲染时，Vue 会自动将样式中的选择器加上 [data-v-<hash>]，这样就能确保样式只作用于当前组件中的元素。

        例如，以下代码中的样式： 

<template>
  <div class="example">
    <h1>Example Component</h1>
  </div>
</template>
<style scoped>
  .example {
    background-color: #f5f5f5;
  }
  h1 {
    color: blue;
  }
</style>

在组件渲染时，<div> 元素会添加 data-v-<hash> 属性，例如 data-v-1a2b3c4d，样式会被编译成：

.example[data-v-1a2b3c4d] {
  background-color: #f5f5f5;
}
h1[data-v-1a2b3c4d] {
  color: blue;
}

这样，样式就只作用于当前组件中的元素，不会影响到其他组件。

浏览器访问项目页面出现卡顿闪退 ？

浏览器访问项目页面出现卡顿闪退可能有多种原因，下面列举一些常见的原因和解决方法：

1. 页面代码过于复杂，导致页面加载缓慢或者浏览器内存不足。 解决方法：优化页面代码，减少页面请求和资源加载，使用懒加载等技术。
2. 浏览器插件或者扩展过多，导致浏览器内存不足。 解决方法：删除不必要的插件或者扩展，或者使用更加轻量的浏览器。
3. 项目中使用了过多的动画效果，导致页面性能下降。 解决方法：减少动画效果的使用，优化动画效果的代码。
4. 项目中使用了过多的第三方库或者框架，导致页面加载缓慢或者内存占用过高。 解决方法：删除不必要的第三方库或者框架，或者使用更加轻量的库或者框架。
5. 项目中存在内存泄漏或者代码错误，导致浏览器崩溃。 解决方法：使用调试工具进行排查，修复代码错误和内存泄漏问题。 总之，解决浏览器访问项目页面出现卡顿闪退的问题需要对具体情况进行分析和排查，找到问题的根源，然后采取相应的解决方法。

图片懒加载 ？

（一）

<img src="placeholder.jpg" data-src="image.jpg" class="lazyload" />
<script>
  window.addEventListener('DOMContentLoaded', function() {
    var lazyloadImages = document.querySelectorAll('.lazyload');
    function lazyload() {
      var scrollTop = window.pageYOffset;
      lazyloadImages.forEach(function(img) {
        if (img.offsetTop < (window.innerHeight + scrollTop)) {
          img.setAttribute('src', img.getAttribute('data-src'));
          img.classList.remove('lazyload');
        }
      });
      if (lazyloadImages.length == 0) {
        document.removeEventListener('scroll', lazyload);
        window.removeEventListener('resize', lazyload);
        window.removeEventListener('orientationChange', lazyload);
      }
    }
    document.addEventListener('scroll', lazyload);
    window.addEventListener('resize', lazyload);
    window.addEventListener('orientationChange', lazyload);
  });
</script>

代码解释：

1. 将图片的实际路径存储在 data-src 属性中，占位符图片的路径存储在 src 属性中。
2. 在页面加载完成后，获取所有需要懒加载的图片节点，并添加事件监听器。
3. 监听用户滚动页面、调整窗口大小以及屏幕旋转事件，实现图片懒加载。
4. 当用户滚动到图片所在的位置（图片顶部距离浏览器视口顶部的距离小于窗口高度加上滚动条滚动的距离）时，将 data-src 属性中的图片路径赋值给 src 属性，并移除 lazyload 类名，实现图片懒加载。
5. 当所有图片都加载完成后，移除事件监听器，避免不必要的性能损失。

（二） 

        以下是使用Intersection Observer实现图片懒加载的示例代码：
HTML代码：

< img class="lazy" data-src="real-image.jpg" src="placeholder-image.jpg" alt="Real Image">

// 获取所有需要懒加载的图片
const lazyImages = document.querySelectorAll('.lazy');
// 配置Intersection Observer
const options = {
  rootMargin: '0px',
  threshold: 0.5  // 图片50%进入视口时触发加载
};
// 创建Intersection Observer实例
const observer = new IntersectionObserver(function(entries, observer) {
  entries.forEach(function(entry) {
    // 如果图片进入视口，开始加载真实图片
    if (entry.isIntersecting) {
      const lazyImage = entry.target;
      lazyImage.src = lazyImage.dataset.src;
      lazyImage.classList.remove('lazy');
      observer.unobserve(lazyImage);
    }
  });
}, options);
// 遍历所有需要懒加载的图片，并观察它们
lazyImages.forEach(function(lazyImage) {
  observer.observe(lazyImage);
});

        在上面的代码中，我们首先获取了所有需要懒加载的图片，然后创建了一个Intersection Observer实例，配置了触发加载真实图片的条件，即图片进入视口并至少50%可见。

        接着，我们遍历所有需要懒加载的图片，并使用Intersection Observer观察它们。当某张图片进入视口时，触发Intersection Observer的回调函数，将图片的data-src属性赋值给src属性，开始加载真实图片。

        最后，我们在回调函数中取消观察该图片，避免重复加载。

前端路由的实现方式 ？

        前端路由的实现方式有两种：hash模式和history模式。

         

1. Hash 模式：使用 URL 中的 hash（#）来模拟路由，即将路由信息放到 URL 的 hash 中。当 URL 发生变化时，可以通过监听 hashchange 事件来实现路由的切换，从而实现单页应用的路由功能。例如：http://example/#/path/to/page。
2. History 模式：使用 HTML5 History API 来实现路由，即利用浏览器提供的 pushState 和 replaceState 方法来改变 URL，实现路由的切换，从而实现单页应用的路由功能。例如：http://example/path/to/page。
3. 无论是哪种路由实现方式，都需要借助前端框架来进行实现。常用的前端框架如 Vue、React 和 Angular 都提供了路由功能的支持。例如，Vue 提供了 vue-router，React 提供了 react-router，Angular 提供了 @angular/router。这些框架都提供了对 hash 和 history 两种路由实现方式的支持，并且提供了一些常用的路由功能，如路由参数、嵌套路由、路由守卫等。

路由传参 ？

        路由传参是指在前端路由切换时，将一些参数传递给目标页面，以供目标页面使用。常见的路由传参方式有以下几种： 

1. 路径参数：将参数拼接在 URL 路径中，例如 /users/:id，其中 :id 表示一个动态参数，可以在路由切换时传递不同的值。
2. 查询参数：将参数拼接在 URL 查询字符串中，例如 /users?id=1，其中 id=1 就是一个查询参数。
3. 状态参数：将参数存储在路由状态中，例如在使用 Vue Router 时，可以使用 route.state 来存储一些状态参数。
4. Props 参数：将参数作为组件的 props 属性传递，例如在使用 Vue Router 时，可以在路由配置中使用 props: true 来自动将参数作为组件的 props 属性传递给目标组件。             在实际开发中，路由传参常常用于实现一些动态的页面功能，例如根据用户 ID 显示不同的用户信息页面，或者根据商品 ID 显示不同的商品详情页面等。

vue组件的通讯 ?

在 Vue 中，组件之间的通讯可以通过以下几种方式实现：

1. props 和 events：父组件通过 props 将数据传递给子组件，在子组件中通过 $emit 触发事件，将子组件中的数据传递给父组件。这种方式适用于父子组件之间的通讯。
2. $refs：在父组件中通过 $refs 引用子组件，然后直接调用子组件的方法或访问子组件的属性进行通讯。这种方式适用于父组件需要主动调用子组件的方法或获取子组件的信息时。
3. Vuex：Vuex 是 Vue 的状态管理器，可以将共享的状态抽离出来，存放在全局的 store 中，供组件之间共享和访问。这种方式适用于多个组件需要共享同一个状态时。
4. Event Bus：通过创建一个空的 Vue 实例作为事件总线，然后在需要通讯的组件中分别 $emit 和 $on 事件来进行通讯。这种方式适用于组件之间的通讯比较复杂，需要跨越多层组件的情况。
5. Provide / Inject：通过在父组件中使用 provide 来提供数据，然后在子组件中使用 inject 来注入数据，从而实现跨层级的组件通讯。这种方式适用于需要跨层级传递数据的情况。 综上所述，不同的组件通讯方式有不同的适用场景，开发者需要根据实际情况进行选择。

vue2和vue3的区别 ？

Vue 3 相对于 Vue 2 的主要变化和优化如下：

1. 更好的性能：Vue 3 在编译和渲染性能上有了大幅度的提升。其中，编译优化提高了模板编译的速度和体积，渲染优化提高了首次渲染和更新渲染的速度。
2. 更小的体积：Vue 3 的体积比 Vue 2 更小，同时还提供了更多的功能和特性。
3. 更好的 TypeScript 支持：Vue 3 对 TypeScript 提供了更好的支持，包括更好的类型推导和更好的类型检查。
4. 更强大的组合 API：Vue 3 提供了更强大的组合 API，使得组件的逻辑可以更好地组织和封装，同时还提供了更好的 TypeScript 支持。
5. 更好的响应式系统：Vue 3 的响应式系统使用了更高效的 Proxy 实现，使得响应式数据的监听和更新更加高效。
6. 更好的错误处理：Vue 3 提供了更好的错误处理机制，可以更容易地捕获和处理错误。
7. 更好的自定义渲染器 API：Vue 3 提供了更好的自定义渲染器 API，使得开发者可以更容易地自定义渲染器，从而实现更多的定制化需求。 综上所述，Vue 3 的变化和优化主要体现在性能、体积、TypeScript 支持、组合 API、响应式系统、错误处理和自定义渲染器 API 等方面。开发者可以根据自己的需求和项目特点来选择使用 Vue 2 还是 Vue 3。

304缓存原理 ？

       HTTP 304 是一种状态码，表示客户端发送了一个带有条件的请求（例如使用 If-Modified-Since 头部），服务器检查了该请求所指定的资源，发现资源未被修改，于是服务器返回 304 状态码，告诉客户端直接使用本地缓存即可。

        当客户端第一次请求资源时，服务器会返回资源的完整内容和缓存标识（例如 ETag 或者 Last-Modified）给客户端，客户端会将资源内容缓存到本地。当客户端再次请求该资源时，会将缓存标识带上，发送给服务器。服务器会根据缓存标识判断该资源是否已经被修改，如果未修改，则返回 304 状态码，告诉客户端可以直接使用本地缓存。如果已经被修改，则返回新的资源内容和新的缓存标识，客户端会将新的内容缓存到本地，以备后续使用。

       通过使用 HTTP 304 状态码，可以有效减少网络传输的数据量，提高网站的访问速度和响应速度，减轻服务器的负担，提高用户体验。

New Promise是宏任务吗 ？

创建Promise实例的过程属于宏任务。具体来说，当执行 new Promise() 语句时，会先创建一个新的Promise实例，然后立即执行Promise构造函数中的代码，这些操作都是在当前宏任务中完成的。然后，当Promise构造函数中的代码执行完毕后，会将后续的resolve或reject操作放入微任务队列中，等待当前宏任务执行完毕后再执行。

前端架构模式MVC ？

前端架构模式MVC

前端架构模式MVC

MVC是前端架构模式中最常见的模式之一，也是一种分层思想的体现。MVC分别代表了模型（Model）、视图（View）和控制器（Controller），是一种通过将应用程序分成三个核心部分来组织代码的软件设计模式。

模型（Model）

模型是应用程序的数据层，它负责管理应用程序的数据和业务逻辑。它通常是一个纯 JavaScript 对象，可以与后端服务器进行交互，获取数据并将其保存在本地存储中。模型还提供了一些数据操作方法，如增加、删除和更新数据等。

视图（View）

视图是应用程序的用户界面层，它负责呈现数据并响应用户的操作。视图通常由 HTML 和 CSS 组成，但也可以使用其他技术进行实现。视图不应该包含任何业务逻辑，而是只负责呈现数据和响应用户的操作。

控制器（Controller）

控制器是应用程序的逻辑层，它负责处理用户的输入和数据交互。它负责协调模型和视图之间的交互，以便根据用户的操作更新数据并显示正确的视图。控制器通常是一些 JavaScript 函数，可以从视图中获取用户输入，然后使用模型来更新数据并更新视图。

工作流程

MVC 的工作流程如下：

1. 用户与视图进行交互，如输入数据或点击按钮。
2. 视图将用户的操作传递给控制器。
3. 控制器接收到用户的操作后，使用模型来更新数据。
4. 控制器更新完数据后，将结果传递给视图。
5. 视图将数据呈现给用户。

优点

MVC 架构模式的优点如下：

1. 分离关注点：MVC 将应用程序分成三个核心部分，每个部分都有不同的职责。这种分离使得代码更加可维护和可扩展，也使得团队更容易协作开发。
2. 代码复用：MVC 模式使得代码复用更加容易。例如，模型可以在多个控制器之间共享，并且视图可以被多个控制器使用。
3. 易于测试：MVC 模式将应用程序分成三个核心部分，每个部分都可以单独测试。这使得测试更加容易和可靠。

缺点

MVC 架构模式的缺点如下：

1. 学习成本高：MVC 模式需要对应用程序进行更好的分层和抽象，这对于初学者来说可能是一项挑战。
2. 代码量增加：MVC 模式需要编写更多的代码来完成应用程序的分层，这可能会导致代码量的增加。
3. 适用范围有限：MVC 模式适用于大型应用程序，但对于小型应用程序来说，可能会显得过于复杂。

前端开发中数据埋点代码怎么写？

        数据埋点是前端开发中非常重要的一环，通过数据埋点可以收集用户行为数据，进行数据分析和优化。在前端开发中实现数据埋点可以通过以下步骤：

1. 定义埋点事件：根据业务需求，定义需要收集的埋点事件，如点击事件、页面浏览事件等。

2. 实现埋点代码：根据定义的埋点事件，在相应的代码逻辑中添加埋点代码。常用的方式是通过JavaScript代码来实现，可以使用第三方库如Google Analytics、百度统计等，也可以自己编写代码实现。

3. 发送埋点数据：在埋点代码中，需要将收集到的数据发送到后端进行存储和分析。可以使用Ajax请求、Image请求等方式来发送数据。

4. 数据分析和可视化：收集到的埋点数据需要进行数据分析和可视化，可以使用第三方工具如Google Analytics、神策分析等，也可以自己编写代码实现。

下面是一个简单的数据埋点代码示例：

// 点击事件埋点
function trackClickEvent() {
  var element = arguments[0].target;
  var data = {
    event: 'click', // 事件类型
    element: element.tagName, // 元素标签名
    text: element.innerText, // 元素文本内容
    href: element.href // 元素链接地址
  };
  sendData(data); // 发送数据
}

// 发送数据
function sendData(data) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/api/track', true);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.send(JSON.stringify(data));
}

// 绑定事件
document.addEventListener('click', trackClickEvent);

        以上代码实现了一个简单的点击事件埋点，当用户点击页面上的元素时，会将元素的标签名、文本内容、链接地址等信息发送到后端进行存储和分析。需要注意的是，埋点代码需要在页面加载时就执行，否则会漏掉部分数据。

单点登录 ？

        单点登录（Single Sign-On，简称 SSO）是一种用户只需要一次登录即可访问多个应用系统的登录方式。在前端开发中实现单点登录可以通过以下步骤：

1. 集成认证中心：选择一个认证中心，如CAS、OAuth2等，并将其集成到应用中。

2. 配置认证中心：在认证中心中配置应用系统的信息，如应用系统的名称、URL等。

3. 应用系统集成：在应用系统中配置认证中心的信息，如认证中心的URL、回调URL等。

4. 登录认证：用户在任意一个应用系统中输入用户名和密码进行登录，认证中心会验证用户的身份，并将用户的身份信息存储在会话中。

5. 会话同步：认证中心会将用户的身份信息同步到所有已经集成的应用系统中，保证用户在任意一个应用系统中都能访问受保护的资源。

6. 登出操作：当用户在任意一个应用系统中进行登出操作时，认证中心会注销用户的会话，并将注销信息同步到所有已经集成的应用系统中。

下面是一个简单的单点登录方法示例，使用JavaScript编写：

function ssoLogin() {
  // 认证中心的登录URL
  var authUrl = 'https://auth.example/login';

  // 应用系统的回调URL
  var callbackUrl = 'https://app.example/callback';

  // 生成随机的state参数
  var state = Math.random().toString(36).substring(2);

  // 将state参数存储到本地，用于后续验证
  localStorage.setItem('sso_state', state);

  // 重定向到认证中心的登录页面
  var redirectUrl = authUrl + '?callbackUrl=' + encodeURIComponent(callbackUrl) + '&state=' + state;
  window.location.href = redirectUrl;
}

function ssoCallback() {
  // 获取认证中心返回的参数
  var state = localStorage.getItem('sso_state');
  var code = getQueryString('code');
  var callbackUrl = getQueryString('callbackUrl');

  // 验证state参数是否一致
  if (state !== getQueryString('state')) {
    console.error('Invalid state');
    return;
  }

  // 发送获取access token的请求
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'https://auth.example/token', true);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        // 获取access token成功，将token存储到本地
        var data = JSON.parse(xhr.responseText);
        localStorage.setItem('access_token', data.access_token);

        // 重定向到应用系统的首页
        window.location.href = callbackUrl;
      } else {
        console.error('Failed to get access token');
      }
    }
  };
  xhr.send(JSON.stringify({
    code: code
  }));
}

// 获取URL参数的方法
function getQueryString(name) {
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
  var r = window.location.search.substr(1).match(reg);
  if (r != null) {
    return decodeURIComponent(r[2]);
  }
  return null;
}

         以上代码实现了一个简单的单点登录方法，包括登录和回调两个步骤。在登录方法中，会将state参数存储到本地，并重定向到认证中心的登录页面，传递回调URL和state参数。在回调方法中，会验证state参数是否一致，获取认证中心返回的code参数，并发送获取access token的请求。获取access token成功后，将token存储到本地，并重定向到应用系统的首页。需要注意的是，该代码仅供参考，实际应用中需要根据具体的业务需求进行修改。

 最常考的 30 个 Vue 面试题总结