2024Vue面试题

\1. Vue中data为什么必须是个函数？

如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data(类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据)

Object是引用数据类型，里面保存的是内存地址，单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

所以说vue组件的data必须是函数。

\2. 说一下vue事件修饰符有哪些 分别有什么作用

.stop：阻止冒泡

.prevent：阻止事件的默认行为

.self：只有是自己触发的自己才会执行

.once：事件只触发一次

.lazy：在input框失去焦点时进行数据同步

.trim：输入时自动过滤掉首尾空格

.number：输入值将会被自动转为数值类型

\3. 说一下v-model的修饰符有哪些 有什么作用

.lazy：在input框失去焦点时进行数据同步

.number：自动将用户输入的值转为数值类型

.trim：自动过滤用户输入的首尾空白字符

\4. 简述父子之间是如何使用props进行 相互通信的？

父传子：

​ \1. 在父组件的模板中，通过使用v-bind指令将数据绑定到子组件的props上，定义子组件需要接收的数据。

​ \2. 在子组件的定义中，通过props选项来接收需要的属性。

​ \3. 当父组件将数据绑定到子组件的props时，子组件就能够访问并使用这些数据

​ \4. 在子组件的模板中，可以直接使用props中的数据

​ 子传父：

​ \1. 在子组件中，可以使用$emit方法触发一个自定义事件，并传递需要通信的数据。

​ \2. 在父组件中，使用v-on或@指令来监听子组件触发的自定义事件，并执行相应对方法。

\5. 说一下keep-alive 的作用 及涉及到的两个生命周期钩子函数

作用：是将其包裹的组件进行缓存，减少组件的销毁和重新创建开销，提升应用的性能

activated 钩子函数在被缓存的组件激活时调用，即组件从缓存状态切换到活动状态时执行

deactivated 钩子函数在被缓存的组件停用时调用，即组件从活动状态切换到缓存状态时执行

\6. Vue中数据发生变化，视图不更新怎么处理？

在Vue中，只有响应式的数据才能触发视图的更新。因此，需要确保在组件中使用的数据是响应式的。可以使用Vue.set()或this.$set()方法来确保响应式。

(1) 动态给对象添加或删除属性

(2) 根据数组下标修改数组值或手动修改数组的长度

解决方案：

1）：利用v-if的特性，静默刷新

2）使用this.$set

3）使用this.$forceUpdate 强制更新

4）使用assign

5）push()、pop()、shift()、unshift()、splice()、sort()、reverse()操作数组

\7. 简述vuex的执行机制

Vuex 的执行流程涉及将应用中的状态存储在集中的 Store 中，然后通过 Mutations 和 Actions 进行状态的修改和管理，最终实现状态与视图的同步更新。这种集中式的状态管理可以让你更好地跟踪状态变化，以及更容易地处理复杂的数据流和异步操作。

\8. vue中进行绑定css样式的方式有哪些

对象绑定：:class="{'class名':表达式|布尔值}"，表达式的值为true时显示class名；

数据绑定：:class="{'class名1','class名2','...'}"

​ :class="['class名1',{'class名':表达式|布尔值}]"

​ :class="['class名1',表达式?'class名':' ']"

\9. Axios拦截器在什么场景下可以使用

​ \1. 认证和授权：你可以使用拦截器来添加认证信息（如令牌）到每个请求的头部，或者在响应返回时进行授权检查。

​ \2. 错误处理：拦截器可以用于捕获请求和响应的错误，并进行统一处理。例如，你可以在拦截器中捕获特定的错误状态码，并在发生错误时执行相应的操作。

​ \3. 请求转换：拦截器可以用于在发送请求之前对请求数据进行修改。这可以包括添加、删除或修改请求的参数、标头或URL等。

​ \4. 响应转换：拦截器还可以在接收到响应后对其进行修改。你可以使用拦截器来处理常见的响应格式（如JSON），将其转换为更适合前端使用的结构。

​ \5. 缓存策略：拦截器可用于实现缓存策略，以减少对服务器的重复请求。你可以在拦截器中检查缓存是否存在，并根据需要返回缓存数据或继续发出请求。

总之，Axios拦截器提供了在发送请求和处理响应之前进行干预的能力，可以用于实现许多与网络请求相关的功能和需求。

\10. 使用token登录和cookie登录的区别

token登录：用户在登录成功后，服务器生成一个唯一的token，并返回给客户端保存，客户端每次请求都携带该token，服务器验证token的有效性来判断用户身份。

cookie登录：用户登录成功后，服务器在返回的响应中设置一个cookie，浏览器会自动保存cookie。每次请求都会自动携带该cookie，服务器通过解析cookie来验证用户身份。

\11. Vue中如何管理全局状态

在Vue中，可以使用Vuex来管理全局状态。Vuex是一个专门为Vue.js应用程序开发的状态管理模式。

​ 1、 安装Vuex：首先，在你的Vue项目中安装Vuex。可以使用npm或yarn进行安装

​ 2、 创建store：在你的Vue项目的根目录中创建一个名为store.js（或者你喜欢的其他名称）的文件。在store.js中，你需要导入Vue和Vuex，并创建一个新的Vuex实例。在这个实例中，你可以定义全局状态和变更状态的方法。

​ 3、 在Vue应用中使用store：在你的Vue应用的入口文件（通常是main.js）中导入并使用刚刚创建的store。

​ 4、 使用全局状态：现在，你可以在你的Vue组件中使用全局状态了。可以使用来访问全局状态，并使用store.commit来触发状态变更的方法。

\12. Vue路由和后台路由的区别

vue路由：用于在单页面应用（SPA）中管理客户端（浏览器）内部的页面切换和状态变化，通过修改 URL 而无需向服务器发出请求。前端路由主要由前端框架（如Vue Router）管理，优化用户体验和页面加载性能。

后台路由：用于传统的多页面应用，将不同的 URL 请求映射到后端服务器的不同处理逻辑或页面。后端路由由 服务器端框 架（如Django）管理，用于处理服务器端的业务逻辑和数据交互。

简述前端路由与后端路由的区别

1.映射关系不同。前端路由是一个路径映射一个组件，后端路由是一个路径映射一个处理本次请求的响应函数。

2.前端路由不需要走网络，而后端路由需要走网络。

3.前端路由切换页面不会使得网页刷新，后端路由切换页面会导致网页刷新

4.前端路由采用的是客户端渲染，后端路由是服务端渲染。

13、说说你的Node的理解，优缺点及应用场景？

​ ● 理解：

​ \1. node.js是一个开源与跨平台的js运行环境，在浏览器外运行v8 js引擎，利用事件驱动，非阻塞和异步输入输出模型等技术提高性能

​ \2. node.js就是一个服务器端的、非阻塞时I/O的、事件驱动的js运行环境

​ \3. node.js采用非阻塞I/O机制，在做I/O操作的时候不会造成任何阻塞，当完成之后以时间的形式通知执行操作

​ \4. 事件驱动就是当进来一个新的请求时，请求将会被压入一个新的事件队列中，然后通过一个循环来检测队列中的事件状态变化，如果检测到有状态变化的事件，那么就会执行该事件对应的处理代码，一般都是回调函数

​ ● 优缺点：

​ ○ 优点：

​ ○ 处理高并发场景性能更佳

​ ○ 适合I/O密集型应用，应用在运行极限时CPU占用率依然比较低，大部分时间是在做I/O硬盘内存读写操作

​ ○ 缺点：

​ ○ 不适合CPU密集型应用

​ ○ 只支持单核CPU，不能充分利用CPU

​ ○ 可靠性低，一旦代码某个环节崩溃，整个系统都崩溃

​ ● 应用场景：

​ \1. web开发、开发程序的后端、构建工具、实时通信

14、说说对Nodejs中的事件循环机制理解?

(1)Node.js的事件循环是指node.js运行时执行的一系列操作，以处理事件和I/O操作。
(2)Node.js的事件循环包含一个主循环和几个阶段，每个阶段都执行一些特定的任务
(3)它的执行过程是：在启动时初始化事件循环，并监听事件队列中的事件，当有事件存在时，会将事件分发给相应的处理程序，它会处理事件队列中的所有事件，直到队列为空或者执行超时。

在 Node.js 中，事件循环是实现非阻塞 I/O 操作的核心机制。事件循环允许 Node.js 在单线程中处理多个并发操作，同时保持高性能和低延迟。

事件循环机制基于事件驱动模型，主要包括以下几个组件：

事件队列（Event Queue）：所有的事件和回调函数都会被放入事件队列中，等待处理。

事件循环（Event Loop）：事件循环是一个持续运行的程序，用于监听并处理事件队列中的事件。

观察者（Observers）：观察者负责监听特定类型的事件，并将其回调函数添加到事件队列中。

I/O 线程池（I/O Thread Pool）：I/O 线程池负责处理非阻塞的 I/O 操作，例如文件读写、网络请求等，使得这些操作可以在后台进行而不会阻塞事件循环。

Node.js 事件循环的工作流程如下：

执行同步代码：首先，Node.js 会执行当前的同步代码。

执行异步操作：当遇到异步操作时，Node.js 会将操作分发给 I/O 线程池进行处理，并立即继续执行下一行代码，不会阻塞其他操作。

将回调函数加入事件队列：当异步操作完成后，I/O 线程池会将对应的回调函数添加到事件队列中。

事件循环监听事件队列：事件循环会不断监听事件队列中的事件，如果有事件出现，则会取出并执行相应的回调函数。

处理事件：事件循环会执行事件的回调函数，并处理相应的逻辑。

通过这种事件循环机制，Node.js 可以实现高度并发的处理能力。它能够处理大量的请求和连接，不会因为一个 I/O 操作的耗时而影响其他操作的执行。同时，通过异步编程模型，可以更高效地利用 CPU 和其他系统资源，提供出色的性能和可伸缩性。

15、 Npm是什么？他的作用有哪些？

npm是一个node的包管理仓库 ，也是一个网站 ，还是一条命令

nodejs中的第三方模块就叫做 包

它的作用有以下几个方面：

​ \1. 包管理：Npm允许开发者在自己的项目中引入、安装、更新和删除第三方的软件包。开发者可以通过Npm来获取其他开发者发布的模块，以便在自己的项目中使用。

​ \2. 版本控制：Npm可以帮助开发者管理项目中所使用的软件包的版本。开发者可以在package.json文件中指定需要的软件包的版本范围，Npm会确保安装项目所需要的正确版本。

​ \3. 脚本执行：Npm提供了一个脚本执行的功能，开发者可以在package.json文件中定义自定义的脚本命令。这些脚本可以用于执行一些预定义的操作，比如启动应用程序、运行测试等。

​ \4. 构建和打包：Npm可以与其他构建工具（如Webpack、Gulp等）结合使用，帮助开发者构建和打包项目。通过配置package.json文件中的脚本命令，开发者可以实现自动化的构建和打包过程。

16、说说你对回调函数的理解？

回调函数是一个作为参数传递给另一个函数的函数。它的作用是在某个特定的事件发生或者异步操作完成后被调用，用于处理相应的结果或者执行特定的任务。

特点有：异步操作、事件驱动、高阶函数

回调函数的优点在于它提供了一种灵活的异步编程方式。通过将回调函数传递给其他函数，我们可以实现在特定事件发生时执行相应的操作，而不需要等待同步操作完成。这样可以避免线程阻塞，提高程序的性能和响应能力。

然而，回调函数也存在一些问题，比如回调地狱（Callback Hell）和难以处理错误等。为了解决这些问题，可以使用一些异步编程的解决方案，如Promise、async/await等。这些方案可以使异步代码更加可读、可维护和可控。

17、Express是如何管理路由的？

Express管理路由的方式是通过Router对象进行管理，即使用Express提供的app对象的Router()方法创建路由器。路由器是一个独立的中间件处理函数，可以通过调用其get、post、put、delete等方法来注册路由,调用express.Router()方法创建了路由器，通过router.get()方法注册了GET请求的根路径路由，最后使用app.use()方法将路由器挂载到应用程序的根路径下。

使用路由器可以将应用程序的路由拆分成多个模块或者文件，使得代码更加清晰和易于维护。

18、说说Express连接MongoDB的步骤是什么？

安装MongooseDB 驱动程序:在项目根目录下运行npm install mongodb安装Mongoose驱动

引入MongooseDB驱动程序，在app.js中使用require引入

创建MongooseDB连接

对数据库进行操作

19、GET和POST有什么区别？

get请求一般是去获取数据；post请求一般是去提交数据

get因为参数会放在url中，所以隐私性，安全性较差，请求的数据长度是有限制的

post请求是没有长度限制，请求数据是放在body中

get请求刷新服务器或者回退没有影响，post请求回退时会重新提交数据请求

get请求可以被缓存，post请求不会被缓存

get请求会被保存在浏览器历史记录当中，post不会。get请求可以被收藏为书签，因为参数就是url中，post不能，它的参数不在url中，get请求只能进行url编码

20、 Session，Cookie, sessionStorage，localStorage的区别是什么？

​ Session**：**

​ 有效时间：会话数据在用户关闭浏览器或完成一段时间的不活动后会被清除

​ 数据与服务器之间的交互：适合存储敏感信息和大量数据，但每次请求都需要在服 务器端验证会话 ID

​ S**essionStorage** ：

有效时间：关闭浏览器 即可消失

数据与服务器之间的交互：不会自动把数据发给服务器，仅在本地保存

​ Cookie：

有效时间： 设置的cookie过期时间之前 一直有效

数据与服务器之间的交互：数据会自动的传递到服务器，服务端也可以写cookie到客户端

​ L**ocalStorage：**

​ 有效时间：永久性存储

​ 数据与服务器之间的交互：不会自动把数据发给服务器，仅在本地存储

21、 关系型数据库和非关系型数据库的区别是什么？

//Nosql非关系型数据库，sql关系型数据库

​ \1. 成本：Nosql数据库易部署，不用像Oracle那般花费较高成本选购。

​ \2. 查询速率：Nosql数据库将数据储存于缓存当中，不用历经SQL层的分析；关系型数据库将数据储存在电脑硬盘中，查询速率远不如Nosql数据库。

​ \3. 储存格式：Nosql的储存文件格式是key,value方式、文本文档方式、照片方式这些，能储存的对象种类灵活；关系数据库则只适用基础类型。

​ \4. 可扩展性：关系型数据库有join那样的多表查询机制限定造成拓展性较差。Nosql依据键值对，数据中间沒有耦合度，因此容易水平拓展。

​ \5. 数据一致性：非关系型数据库注重最终一致性；关系型数据库注重数据整个生命周期的一致性。

​ \6. 事务处理：SQL数据库支持事务原子性粒度控制，且方便进行事务回滚；NoSQL也支持事务处理，但可靠性不足，其价值在于可扩展性和大数据量处理。

22、 MVVM和MVC的区别是什么？

(1) MVC:通过分离Model、View、Controller来实现，Model层是负责用户在页面的数据以及相对应的数据操作，View层是负责视图更新，Controller是Model和View的联系，主要负责用户与应用交互的操作，当用户与页面进行交互时，Controller会通过Model层来更新用户在页面进行的数据操作，更新好后再通知View层来进行视图更新

(2) MVVM：分为Model、View、ViewModel，Model负责存储数据和相对应的数据操作、View是负责UI视图、ViewModel是Model和View之间的桥梁、View和Model之间没有直接的联系，Model和ViewModel有着双向绑定的关系、当Model层的数据根据用户所进行修改更新时会通知View进行更新视图、当用户在页面进行交互时会通知Model进行对应的数据处理

23、 Vue双向绑定的原理？

Vue中的双向绑定原理可以简单解释为以下几步：

​ \1. 数据劫持：当Vue创建一个实例时，它会遍历数据对象中的所有属性，并使用Object.defineProperty()方法将它们转换为getter和setter。这样当属性被读取或修改时，Vue能够悄悄地为其添加额外的操作。

​ \2. 监听器和依赖收集：当页面中使用数据时，Vue会进行依赖收集。在模板编译时，Vue会对指令或插值表达式中的属性进行监听，当这些属性发生变化时，会触发相应的更新操作。同时，Vue也会在数据变动时通知依赖进行更新。

​ \3. 更新视图：当数据发生改变时，setter方法会被调用，Vue会通知依赖进行更新，然后更新DOM中受到影响的部分。这样就实现了数据的自动更新，实现了双向绑定。

总结起来，Vue的双向绑定原理是通过数据劫持和依赖收集来实现的。当数据发生变化时，Vue能够自动检测到变化并更新相关的视图部分，而当视图被修改时，Vue也能够将变化反映到数据上。这样就可以实现数据和视图的同步更新，提高了开发效率和用户体验。

24、 说说你对js中同步和异步的理解？有哪些异步编程方法？

jvaScript中，同步和异步是用来描述代码执行的方式。同步代码按照顺序执行，每一行代码都会等待前一行代码执行完毕后再执行。而异步代码不会阻塞后续代码的执行，它会在后台执行，并在完成后通知主线程。

​ 异步编程方法有以下几种：

​ \1. 回调函数：通过将函数作为参数传递给其他函数，在异步操作完成后调用回调函数来处理结果。

​ \2. Promise：Promise是一种用于处理异步操作的对象，它可以表示一个异步操作的最终完成或失败，并可以链式调用多个操作。

​ \3. async/await：async/await是ES2017引入的异步编程语法糖，它可以让异步代码看起来像同步代码，提供了更直观的编程方式。

​ \4. 事件监听器：通过注册事件监听器来处理异步操作的完成事件。

​ \5. 发布/订阅模式：通过发布者发布事件，订阅者订阅事件并在事件发生时执行相应的操作。

26、说说Vue中封装一个组件的步骤是什么？

​ \1. 确定组件功能： 首先，你需要明确组件的功能和用途。一个好的组件应该关注于特定的功能，并且尽量保持单一职责原则。

​ \2. 创建组件文件： 在你的项目中，创建一个新的 .vue 文件作为组件的容器。一个典型的 .vue 文件包含模板、脚本和样式部分。

​ \3. 编写模板： 在组件的模板部分，使用 Vue 的模板语法来定义组件的外观和结构。

​ \4. 编写脚本： 在组件的脚本部分，定义组件的行为、逻辑和数据。你可以在这里声明组件的属性（props）、计算属性（computed）、方法（methods）、生命周期钩子等。

​ \5. 样式化： 在组件的样式部分，添加组件的样式规则，可以使用普通的 CSS 或者 CSS 预处理器（如 Sass、Less）。

​ \6. 暴露组件： 在组件文件的底部，通过 export default 语句将组件暴露出来，以便在其他地方引用和使用。

​ \7. 使用组件： 在需要使用该组件的地方，通过 import 语句引入组件，并将其注册为局部组件或全局组件。然后，你可以在模板中使用该组件。

​ \8. 传递数据： 如果需要，可以通过组件的属性（props）向组件传递数据。这样可以使组件更具通用性和灵活性。

​ \9. 交互与通信： 如果组件之间需要交互和通信，可以使用事件（Event）或全局状态管理工具（如 Vuex）来实现。

​ \10. 测试： 对你的组件进行单元测试，确保组件在各种情况下都能正常工作。

​ \11. 文档化： 为你的组件提供清晰的文档，描述其用途、属性、用法等，以便其他开发人员能够理解和使用它。

​ \12. 优化与维护： 持续优化和维护组件，处理反馈和 Bug，确保组件在项目中的稳定性和性能。

27、ES6有哪些新特性？至少说8个

1. 箭头函数（Arrow Functions）：箭头函数是一种更简洁的函数声明方式，它使用箭头（=>）来定义函数，并且自动绑定了上下文（this）。

2. 模块化（Modules）：ES6引入了模块化系统，允许开发者将代码分割成多个独立的模块，以便更好地组织和管理代码。

3. 解构赋值（Destructuring Assignment）：解构赋值允许你从数组或对象中提取值，并将其分配给变量，这有助于简化代码和提高可读性。

4. 类和继承（Classes and Inheritance）：ES6引入了类的概念，让面向对象编程更容易，并支持类之间的继承关系。

5. 模板字符串（Template Strings）：模板字符串允许你在字符串中插入表达式，而不需要复杂的字符串连接操作，提高了字符串的可读性和可维护性。

6. Promise：Promise是一种处理异步操作的方式，它提供了更好的控制流和错误处理机制，用于处理回调地狱问题。

7. const 和 let：ES6引入了const和let关键字，用于声明变量，const用于声明常量，而let用于声明块级作用域变量，改善了变量的作用域控制。

8. 默认参数（Default Parameters）：ES6允许你在函数声明中为参数设置默认值，这样在调用函数时可以省略某些参数，而不会导致错误。

9. 块级作用域（Block Scope）：引入let和const关键字，允许在块级作用域中声明变量，使得变量的作用范围更加清晰和可控。

28、 从输入URL到页面加载完成经历了那些过程？

1. 域名解析：首先，浏览器需要将输入的URL解析为一个IP地址，以便与Web服务器建立连接。这一步通常涉及到DNS（域名系统）查询，将域名转换为相应的IP地址。

2. 建立TCP连接：一旦浏览器知道了Web服务器的IP地址，它就会尝试建立一个TCP连接。这个连接是通过三次握手过程建立的，确保了浏览器和服务器之间的可靠通信。

3. 发送HTTP请求：一旦建立了TCP连接，浏览器会向Web服务器发送一个HTTP请求，该请求中包含了要获取的页面资源的详细信息，例如网页文档、图像、样式表等。

4. 服务器处理请求：Web服务器接收到浏览器发送的HTTP请求后，会根据请求的内容进行处理。这可能涉及到从数据库中检索数据、生成动态内容、或者简单地返回静态文件。

5. 服务器发送HTTP响应：一旦服务器处理完请求，它会生成一个HTTP响应，其中包含了请求的资源以及响应的状态信息（如HTTP状态码）。

6. 接收和渲染页面：浏览器接收到服务器的HTTP响应后，它会开始解析响应，从中提取出页面的HTML、CSS、JavaScript等资源。浏览器会根据HTML构建DOM（文档对象模型）、CSS构建CSSOM（样式对象模型），然后合并它们以构建渲染树。接着，浏览器会使用渲染树来布局页面，并将页面内容绘制到屏幕上。

7. 处理JavaScript：如果页面包含JavaScript代码，浏览器会执行这些代码。JavaScript可以修改DOM、处理用户交互、发起额外的网络请求等等。JavaScript执行可能会导致页面的进一步修改和重绘。

8. 加载附加资源：页面可能包含其他资源，如图像、样式表、字体文件等。这些资源会在页面加载过程中按需下载，并在下载完成后被浏览器渲染或应用到页面中。

9. 完成页面加载：一旦所有的资源都加载完成，并且页面的渲染树已经构建完毕，浏览器会触发页面加载完成的事件。此时，用户可以与页面进行交互，浏览器会持续渲染动态内容。

29、Http常见的状态码及含义？

200 ：OK 请求成功

301 : 永久重定向

302：临时重定向

400：客户端请求错误

401：未授权，表示请求需要身份验证

403：禁止访问，权限不足

404：未找到，服务器无法找到请求的资源

500：服务器内部错误

31、v-if和v-show指令的区别是什么?

(1) 他们都可以实现对元素显示和隐藏的控制

(2) 区别：

① 控制手段：v-show是通过控制元素的css属性display：none\block来进行操作，DOM元素依旧存在，而v-if是将DOM元素整个进行添加或删除

② 编译过程：v-if在切换的时候有着局部添加或删除的过程，会适当的进行其内部的事件监听和子组件的添加或删除，而v-show只是简单的基于css的操作

③ 编译条件：v-if是真正意义的条件渲染，他在切换时会确切的根据条件块中的事件监听和子组件来进行适当的添加删除，只有当条件为真的时候才会进行渲染

33、请简述Vue中组件通信的流程

父子组件通信：

父组件通过props属性向子组件传递数据。

子组件通过$emit方法触发自定义事件，父组件可以在模板中使用@监听这些事件。

子父组件通信：

子组件通过this.$parent访问父组件的实例，然后调用父组件的方法或访问父组件的数据。

不推荐过度使用这种方式，因为它会增加组件之间的耦合度。

兄弟组件通信：

如果两个组件没有直接的父子关系，可以使用一个共享的父组件或者使用Vue的事件总线来实现兄弟组件之间的通信。

通过共享的父组件，将数据传递给一个兄弟组件，然后再由兄弟组件传递给另一个兄弟组件。

使用Vue的事件总线，可以创建一个Vue实例作为事件中心，一个组件可以触发事件，另一个组件可以监听这些事件来实现通信。

使用Vuex：

Vuex是Vue的状态管理库，可以用于在多个组件之间共享状态。

在Vuex中，有一个集中的状态存储，任何组件都可以读取和修改这个状态。

组件可以通过提交mutations来修改状态，也可以通过触发actions来进行异步操作。

1. Vue中数据发生变化，视图不更新怎么处理？

35、简单叙述Vuex的五大核心及运行机制

​ \1. State（状态）：存储应用程序的状态数据，类似于组件中的data属性。

​ \2. Getters（获取器）：用于从状态中派生出新的数据，类似于组件中的计算属性。

​ \3. Mutations（变更）：用于修改状态的方法，必须是同步的，类似于组件中的方法。

​ \4. Actions（动作）：用于处理异步操作和提交多个变更的方法，可以包含任意异步操作，类似于组件中的方法。

​ \5. Modules（模块）：用于将大型的状态树拆分成多个模块，每个模块都有自己的state、getters、mutations和actions。

36、Express中如何配置静态资源

可以使用express.static()中间件，这个中间件可以将指定目录下的文件作为静态资源直接提供给客户端。

首先，在项目下安装express模块npm i express ，接下来配置静态资源，先引入express const express = require('express'); const app = express(); 将public目录下的文件作为静态资源提供给客户端 app.use(express.static(__dirname+'/public'))

37、简单叙述你对ES6模块化的理解

ES6模块化是ECMAScript 6引入的模块化系统，它提供了一种方便的方式来组织和管理JavaScript代码。模块化可以将代码划分为独立的模块，每个模块都有自己的作用域，可以定义导出（export）和导入（import）的功能、变量、类等，实现了模块间的依赖管理

所谓的模块化无非就是把一部分功能代码放到别的js文件中，再使用exports将需要导出的变量或方法或对象导出，然后当需要该功能时就使用require引入到其他的js文件中使用该模块导出的功能代码。

模块化的好处 ：提高代码的复用性 可维护性

​ 功能独立 便于后期管理和维护

​ 防止全局变量的污染（浏览器中没有模块作用域的概念）

​ 可以实现按需加载

38、 JS模块化规范是什么？

(1)是一个用于组织和管理JavaScript代码模块的规范，定义了导入和导出的方法，使开发者可以通过模块的方式拆分成不同的独立的模块，并通过导入导出方式来实现模块之间这种依赖关系
(2)Commonjs规范，我们可以使用require来导入其他模块的功能等，并且我们也可以通过module.exports的方式将自己的模块暴露给其他模块使用。这种方式大大提升了代码的维护性、复用性和更易于适应大型应用的开发需求

JavaScript 是一个强大面向对象语言，它有很多快速高效的解释器。然而， JavaScript 标准定义的 API 是为了构建基于浏览器的应用程序。并没有制定一个用于更广泛的应用程序 的标准库。CommonJS 规范的提出,主要是为了弥补当前 JavaScript 没有标准的缺陷。

它的终 极目标就是：提供一个类似 Python，Ruby 和 Java 语言的标准库,而不只是停留在小脚本程序 的阶段。

用 CommonJS API 编写出的应用，不仅可以利用 JavaScript 开发客户端应用，而且 还可以编写以下应用。

•服务器端 JavaScript 应用程序。（nodejs） •命令行工具。 •桌面图形界面应用程序。

CommonJS 就是模块化的标准（规范），nodejs 就是 CommonJS（模块化）的实现。

39、请说出数组中常用的方法及含义（至少10个）

1、arr.push():向数组的末尾添加元素

2、arr.unshift():向数组的开头添加元素

3、arr.pop():从数组的末尾删除元素

4、arr.shift():从数组的开头删除元素

5、arr.sort():数组的排序方法

6、arr.reverse():数组的倒序方法

7、arr.slice(): 数组的截取方法

8、arr.splice():数组的替换方法

9、arr.concat():数组的联接方法

10、arr.includes():判断数组中的元素是否存在

11、arr.filter():过滤数组中元素

12、arr.forEach():对数组中的元素进行遍历

13、arr.map(): 数组的映射方法

14、arr.reduce():数组的迭代方法

40、什么是事件回调？

同步回调：同步回调是在事件发生后顺序调用回调接口方法，该种调用在事件调用触发之后，会顺序的调用回调方法；（什么是回调方法，回调可以简单理解为一种约定机制，假设有类A和类B,约定就是，当类B的方法被调用之后，就通知类A的某个方法）。

异步回调：比如现在有一个异步的请求方法，当它被调用了但后端服务器还没有响应数据，那么这时就会先去执行同步代码，等后端服务器响应回来数据了，再接着执行那个异步请求的方法，接收后端响应的数据。

42、说一下对nodejs的理解，应用场景有哪些？

Nodejs是js的后端运行环境，可以操作底层接口，也可以创建目录和文件，不可以操作DOM和BOM；

nodejs是一个基于chrome v8引擎的JavaScript的运行环境，由ECMAScript和Node模块API组成。

应用场景：可以操作数据库，为前端提供基于json的API接口等

43、现在有一个字符串“getElementById”,封装一个方法把所有的大写字母转换为下划线小写字母，比如“get_element_by_id” 请写出思路分析

​ \1. 创建一个空字符串，用于存储转换后的结果。

​ \2. 遍历原始字符串中的每个字符

​ \3. 对于某个字符，检查它是否为大写字母

​ \4. 如果是大写字母，将其转换为下划线小写字母，并将其加到结果字符串中

​ \5. 如果不是大写字母，直接将其加入结果字符串中。

​ \6. 最后，返回结果字符串作为转换后的结果。

44、Npm 全局下载和本地下载的区别

1-安装位置

​ 局部 : 当前node项目下的node_modules目录中

​ 全局 : C:\Users\lce\AppData\Roaming\npm

​ 2-命令不同

​ 全局命令 npm i xxx -g

​ 局部命令 npm i xxx

​ 3-全局安装会产生一个命令行工具

​ 4-局部安装的包使用之前需要先进行导入

45、定义两个两个数组arr1=[18,33,20,56,77,89], arr2=[33,89,100,101,34,20,56,88,190], 找出这两个数组中都出现的数字和两个数组中不同的数字，请写出思路

先创建一个数组 存放两个数组都存在的数字

遍历 arr1 中的每个元素 检查是否存在于arr2 如果存在就添加到新数组中

找出两个数组中不同的数字

再创建两个数组 分别存储 arr1 和 arr2中不同数字的数组

遍历arr1 中每个元素 检查是否存在于arr2 中 如果不存在 则将该元素添加到arr1的新数组中

同样 遍历arr2 中每个元素 检查是否存在于arr1 中 如果不存在就将该元素添加到arr2的新数组中

46、Vue的路由和express的路由有什么区别？

1、express的router是属于后端的，Vue的router是属于前端的

​ 2、服务端渲染时，express的router把数据和模板传给模板引擎的；客户端渲染时，

​ 通过路由去获得静态页面，浏览器发送http请求向服务端获取数据，Vue router是不需要传数据的。

50、请简单叙述你是如何理解前后端分离开发模式

前后端分离开发模式是一种架构设计方式，它将前端（客户端）和后端（服务器端）的开发分离。前端负责界面展示和用户交互，后端负责数据处理和业务逻辑。两者通过接口进行通信，实现了部分解耦，提高了开发效率和可维护性

51、请简单说一下Vue的生命周期函数及含义？

beforeCreate: 在实例初始化之后、数据观测和事件配置之前被调用

created: 在实例准备就绪后被调用。可以访问已设置的数据、计算属性、方法、DOM等

beforeMount: 在挂载开始之前被调用。这时模板已编译完成，但尚未渲染到真实的DOM中

mounted: 在挂载完成后被调用。可以访问到渲染后的DOM，常用于进行API调用或添加事件监听

beforeUpdate: 在数据更新时、重新渲染之前被调用。可以在此修改数据，但不会触发附加的重新渲染

updated: 在数据更新时、重新渲染完成后被调用。可以执行依赖于DOM的操作

beforeDestroy: 在实例销毁之前被调用。可以进行清理工作，如取消定时器、解绑事件等

destroyed: 在实例销毁后被调用。此时Vue实例及其所有的直接父组件已被完全销毁

52、Vue中created和mounted生命周期函数有什么区别？谁更适合请求接口使用？为什么

created在实例创建后被立即调用，此时还未挂载DOM。它适合做一些初始化工作，如数据请求、事件监听等

mounted在实例挂载到DOM后被调用，此时可以访问到渲染后的DOM。它适合进行DOM相关的操作，如获 取DOM元素、添加事件监听、使用第三方库等

对于请求接口使用，一般推荐在mounted中进行。因为在created阶段，组件还未挂载到DOM，无法操作DOM元素。而在mounted阶段，组件已经挂载到DOM中，可以直接访问到DOM元素，适合发送异步请求获取数据，然后进行渲染和更新操作

53、说说你对Javascript中事件流的理解？

事件流（Event Flow）是指浏览器中处理和传递事件的流程。在JavaScript中，事件流由三个阶段组成：捕获阶段、目标阶段和冒泡阶段

55、如何实现JWT鉴权机制？说说你的实现思路

服务器当验证用户账号和密码正确时会给用户颁发一个令牌，这个令牌作为后续用户访问一些接口的凭证后续访问会根据这个令牌判断用户是否有权限进行访问