Vue面试题18问

关注公众号@笑果杂谈

Vue操作DOM的优势

如果在一个页面上频繁且大量的操作真实DOM，频繁的触发浏览器回流（Reflow）与重绘（Repaint），会带来很大的性能开销，从而造成页面卡顿，在大型项目的性能上很是致命。

而 Vue 则是通过操作虚拟DOM（ Virtual DOM ，简称 VDOM ），每一次数据更新都通过Diff算法找出需要更新的节点，只更新对应的虚拟 DOM，再去映射到真实 DOM 上面渲染，以此避免频繁或大量的操作真实 DOM。

在项目中封装过哪些自己觉得比较复杂的组件？可以详细说一下嘛？

1. 图片上传组件：这是一个用于上传图片并预览的组件，实现起来比较复杂。首先需要通过 input[type=“file”] 实现文件上传功能，并且可以通过 FileReader API 将图片文件转换成 Data URL 的形式进行预览。在实现预览功能时，要考虑到图片上传失败或者上传的不是图片的情况，需要进行相关的异常处理。

2. 表单填写组件：这是一个用于多步骤表单填写的组件，需要实现表单数据校验、数据回填、表单数据提交等多个功能。在设计这个组件时，我采用了动态表单生成的方式，通过解析 JSON 数据来生成表单项，然后通过动态组件的方式来渲染表单，实现多步骤表单填写。在表单数据回填和提交时，需要处理复杂的表单数据结构，确保数据的完整性和正确性。

3. 编辑器组件：这是一个用于编辑富文本的组件，需要实现各种样式、格式化、插入图片等功能，同时要确保生成的 HTML 代码是标准的，并且可以在不同浏览器中正确显示。在实现这个组件时，我采用了使用第三方富文本编辑器组件作为底层，然后根据具体的业务需求进行二次封装和定制。

以上是我曾经在项目中封装过的比较复杂的组件，它们的实现涉及到 HTML、CSS、JavaScript 等多个方面的知识和技能，需要对前端开发和组件封装有深入的了解和实践经验。

vue组件间的哪些通信方式？

在 Vue 中，组件间通信主要有以下几种方式：

1. 父子组件通信：通过 props 将数据从父组件传递到子组件，子组件可以通过 $emit 方法触发事件通知父组件。

2. 子父组件通信：通过在子组件中使用 $emit 方法触发一个事件，在父组件中使用 $on 方法监听该事件，从而实现子组件向父组件通信。

3. 兄弟组件通信：可以通过一个共同的父组件作为中介，在父组件中定义一个变量，然后通过 props 分别传递给两个子组件，当其中一个子组件修改了这个变量的值后，通过 emit 事件将修改后的值传递给父组件，再进行逐级传递给另一个子组件。

4. 无关组件通信：可以使用事件总线（Event Bus）实现无关组件间的通信，即在一个空的 Vue 实例（事件总线）上定义一个事件，然后在任意组件中通过 $emit 和 $on 方法分别触发和监听该事件来实现通信。（vue2时代使用的一种方式）

5. Vuex：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，通过共享一个全局状态对象，实现组件之间的数据共享和通信。Vuex 将所有的状态都保存在 state 中，然后通过 mutations 修改 state，最后在 actions 中触发 mutations 从而修改 state 中的数据，最终通过 getters 获取 state 中的数据。

在vue3时代的主要通信方式，和Vue2 中有所不同，主要有以下几种方式：

1. props 和 emit：和 Vue2 中一样，通过 props 将数据从父组件传递到子组件，子组件可以通过 emit 方法触发事件通知父组件。

2. provide 和 inject：provide 和 inject 是一种新的组件间通信方式，它可以在一个祖先组件中提供一个值，然后在后代组件中通过 inject 来注入这个值。通过 provide 和 inject 可以实现跨级组件通信。

3. Teleport：Teleport 是 Vue3 中新增的一个组件，它可以将组件的内容渲染到指定的 DOM 节点上。通过 Teleport 可以实现跨组件的渲染和通信。

4. ref 和 reactive：ref 和 reactive 是 Vue3 中引入的新的响应式 API，可以实现对组件内部状态的修改和跨组件访问。

5. EventBus / EventHub：和 Vue2 中一样，可以使用事件总线实现多个组件之间的通信。

6. Vuex 4（Pinia）：和 Vue2 中一样，Vuex 4 是一个专为 Vue.js 应用程序开发的状态管理模式，适用于大型应用程序中的状态共享和通信。

需要注意的是，在使用 provide 和 inject 进行跨级组件通信时，要注意避免依赖关系过于复杂或者不清晰的情况，以免影响代码的可维护性。

以上是 Vue 组件通信的几种方式，我们使用的时候可以根据具体场景选择合适的方法进行组件间通信。

一个父组件潜嵌套了子组件，他的生命周期函数顺序是怎么执行的？

在 Vue 中，一个父组件潜嵌套了子组件时，它们的生命周期函数的执行顺序如下：

1. 父组件 beforeCreate 钩子函数

2. 父组件 created 钩子函数

3. 父组件 beforeMount 钩子函数

4. 子组件 beforeCreate 钩子函数

5. 子组件 created 钩子函数

6. 子组件 beforeMount 钩子函数

7. 子组件 mounted 钩子函数

8. 父组件 mounted 钩子函数

父组件的 beforeCreate 钩子函数和 created 钩子函数在子组件的 beforeCreate 钩子函数和 created 钩子函数之前执行，因为父组件要先完成数据的初始化和事件的监听等操作，子组件需要依赖这些数据和事件。而在 beforeMount 钩子函数和 mounted 钩子函数中，子组件的钩子函数总是在父组件的钩子函数之前执行，因为子组件需要先完成自身的渲染和挂载，供父组件渲染使用。

需要注意的是，如果在潜嵌套的组件中使用了异步组件加载或者动态组件的方式，就可能会影响生命周期函数的执行顺序。此外，如果一个组件被多个父组件所使用，它的生命周期函数的执行顺序也会发生变化。因此，在使用组件时需要注意组件之间的嵌套关系和组件的复用性，以便正确处理生命周期函数。

vue的权限管理应该怎么做？路由级和按钮级分别怎么处理？

在 Vue 中，实现权限管理主要有以下两种方式：

1. 路由级别权限控制：在路由配置中添加 meta 属性，来标识该路由需要的权限或者角色，然后在路由导航守卫中进行控制。在路由导航守卫中，可以根据当前用户的权限或者角色信息，来判断是否有访问该路由的权限。如果没有权限，则可以重定向到登录页面或者提示用户没有权限访问。

2. 按钮级别权限控制：在 Vue 组件中，添加自定义指令或者方法，来控制按钮或者其他 DOM 元素的显示和隐藏。在指令或方法中，可以根据当前用户的权限或者角色信息，来判断是否有权限访问该元素。如果没有权限，则可以将该元素隐藏起来，或者禁用相关的操作。

需要注意的是，路由级别权限控制和按钮级别权限控制应该相互配合，形成一个完整的权限管理体系。用户在登录后会获取相应角色或权限信息，在路由导航守卫中对路由进行权限控制，同时在组件内部对按钮和其他 DOM 元素进行权限控制。同时，权限管理还需要保证数据的隔离性和安全性，避免用户越权访问和修改数据。

另外，实现权限管理还需要注意以下几点：

1. 权限信息的存储和传递。一般来说，权限信息需要从服务器获取，并存储在本地或者内存中，供路由和组件使用。

2. 不同用户角色的权限控制。不同用户可能拥有不同的角色和权限，所以在实现权限管理时需要考虑到不同用户的需求。

3. 权限粒度的控制。在实现权限管理时，需要确定权限控制的粒度，避免权限控制过于粗略或者细化程度过大，影响用户体验和开发效率。

说一下你对虚拟DOM的理解

虚拟DOM可以参考这一篇文章

了解diff算法吗？vue的diff算法是怎样的一个过程，和react的diff算法有啥区别？

Diff 算法是 Virtual DOM 中用于比较新旧节点差异的核心算法。Vue 和 React 都采用了 Diff 算法来优化 Virtual DOM 的更新，提高页面渲染性能。

Vue 的 Diff 算法与 React 的算法有些许不同。Vue 的 Diff 算法主要包括以下几个步骤：

1. 新节点和旧节点间的比较

Vue 的 Diff 算法是采用双端比较的方式，即新旧节点都从两端依次进行比较。这种方式可以最大程度地减少比较的次数和遍历次数，从而提高渲染效率。

2. Key 值的比较

在比较过程中，Vue 会对每个节点的唯一标识 Key 值进行比较，如果相同，则认为这是同一个节点，可以直接比较子节点。如果 Key 值不同，则会直接删除旧节点，创建并插入新节点。

3. 子节点的比较

在进行子节点比较时，Vue 会先对子节点的数量进行比较，如果新旧节点的子节点数量不同，则直接删掉旧节点的子节点，并创建新节点的子节点。如果数量相同，则对子节点进行逐个比较。

4. 子节点中 Key 值相同的节点的比较

在比较子节点时，如果发现新节点中有和旧节点中 Key 值相同的子节点，则认为它们是同一个节点，可以直接进行比较，而不需要重新创建和插入节点。

而 React 的 Diff 算法采用了 Fiber 架构和双缓存技术。Fiber 架构中每个节点都被打上标记，标记节点的状态和层级，再根据优先级安排任务的执行顺序，从而在保证页面渲染的优先级的情况下，提高渲染的效率和用户体验。而双缓存技术则是采用了两个 Virtual DOM 缓存，每次渲染时只比较这两个缓存的差异，无需对整个树进行比较，从而提高了渲染的效率。

总的来说，Vue 的 Diff 算法和 React 的算法都是基于 Virtual DOM 的快速更新和渲染技术，在比较方式和实现细节上略有不同，都可以有效提高页面的性能和用户体验。

做过vue项目哪些性能方面的优优化？

1. 路由懒加载

通过使用路由懒加载的方式，可以减少页面加载时的初始 JS 负载，从而提高页面的加载速度。

2. 图片懒加载

通过使用图片懒加载的方式，可以减少页面初始加载时的下载量，以及减少未浏览到的区域的资源请求，从而提高页面的响应速度。

3. CDN 加载常用库文件

通过使用 CDN 加载常用库文件，可以将文件加载速度和内容下载速度分离，从而提高内容下载速度。

4. 异步组件加载

通过使用异步组件加载的方式，可以减少页面初始化时的 JS 负载，从而提高页面的加载速度。

5. 数据缓存机制

通过使用数据缓存机制，可以将 API 请求数据缓存在本地或者内存中，减少页面刷新时的数据请求和网络传输，从而提高页面的响应速度和用户体验。

6. CSS 压缩和去重

通过使用 CSS 压缩和去重技术，可以减少网页的大小，提高页面的加载速度。

7. Webpack 打包优化

通过使用 Webpack 的优化插件，如 uglifyJS 等，可以减少 Vue 项目中的 JS 文件大小，提高页面加载时的速度。

8. 减少 DOM 操作

在 Vue 项目中，通过使用 v-for 和 v-if 等标签指令，可以减少 DOM 操作，从而提高页面的渲染效率。

9. 使用 CSS Sprite

通过使用 CSS Sprite 技术，可以将小图标合并成一个大的图像，减少 HTTP 请求次数，从而提高页面的加载速度。

以上是在 Vue 项目中进行的一些性能优化措施，这些措施可以提高页面的加载速度、响应速度和用户体验，提高项目的整体性能。但是需要注意，不同的项目场景需要选择不同的优化策略，具体优化方式需要根据具体情况来制定。

vue组件为什么只能有一个根元素？

Vue 中组件只能有一个根元素的限制是因为 Vue 的编译器需要将组件模板解析成抽象语法树（AST），以便于创建组件的 VNode 并进行渲染。而 AST 生成算法是基于 HTML 解析器的，HTML 解析器的特点是一个 DOM 元素只能有一个根节点。

如果一个组件中包含多个根节点，则编译器无法准确地将组件模板解析成 AST，从而导致编译错误或者运行时错误。因此，为了保证组件可以正常编译和渲染，Vue 强制要求组件模板必须只有一个根元素。

另外，只有一个根元素的限制还可以帮助开发者更好地组织和管理组件的结构，提高组件的复用和可维护性。因为在只有一个根元素的情况下，可以更加清晰和一致地定义组件的结构，而不用担心多个根元素的情况下会导致布局和样式的混乱。

但是，如果确实需要在组件中包含多个根元素，可以通过一些技巧绕过这个限制，比如使用 <template> 标签包裹多个元素，或者使用 Vue 的 Fragment 语法或 JSX 语法等高级特性。

如何实现路由懒加载呢

路由懒加载是指将路由切分成多个代码块，并在页面渲染时按需加载所需的代码块，可以有效提高页面的加载速度和性能。

在 Vue2.x 中，可以通过使用 Webpack 的 require.ensure 方法实现路由懒加载。具体步骤如下：

1. 在路由配置文件中将组件设置为一个函数，该函数应该返回一个 import 语句，用于动态导入组件。如下示例：

{
  path: '/home',
  name: 'home',
  component: () => import('./views/Home.vue')
}

2. 在 Webpack 配置文件中的 output 属性中，添加 chunkFilename 属性，用于指定动态路由组件生成的代码块文件名：

output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist'),
  chunkFilename: '[name].[chunkhash].js',
}

上述代码中，[chunkhash] 用于为每个生成的代码块文件添加一个唯一的哈希值，来保证缓存一致性。

此外，在 Vue3.x 中，路由懒加载可以简化为：

{
  path: '/home',
  name: 'home',
  component: () => import(/* webpackChunkName: "home" */ './views/Home.vue')
}

Vue3.x 中的路由懒加载无需添加 /src/router.js 中的繁琐配置，这是因为 Vue3.x 将 webpack block 融入到了自己的路由实现中。

除了使用 Webpack 的 require.ensure 方法，道理相同，也可以使用 Dynamic import 原生语法来实现路由懒加载。如下所示：

{
  path: '/about',
  name: 'about',
  component: () => import('./views/About.vue')
}

运行时，该语法会在需要时动态加载 About.vue 组件。注意：需要确保你的环境能够支持 Promise。

客户端渲染和服务端渲染有什么区别呢？

客户端渲染和服务端渲染是两种不同的前端渲染方式，它们的主要区别在于渲染的位置和时机。

客户端渲染（CSR，Client Side Rendering）是指在浏览器中通过 JavaScript 去动态生成和渲染页面的过程。当用户请求页面时，浏览器会下载HTML和JavaScript文件，并通过JavaScript来构建页面，然后将页面呈现给用户。在这种情况下，服务器负责提供API接口及静态资源的服务，而页面的渲染则由浏览器端完成。

服务端渲染（SSR，Server Side Rendering）是指在服务器端将组成页面的HTML、CSS、JavaScript等资源合并成一个渲染好的HTML页面，并将这个静态页面发送给浏览器进行展示。这种方式可以在服务端使用模板引擎，将数据与HTML模板进行结合后生成最终的HTML文件，然后将文件发送给浏览器。在这个过程中，服务器端负责构建页面，并将最终页面直接返回给用户，浏览器端则只需要解析HTML、CSS和JavaScript文件即可。

主要区别如下：

1.CSR渲染速度快，页面切换快，但对SEO不友好；SSR对SEO友好，但首屏渲染速度较慢。
2.CSR网络请求过多，容易造成卡顿；SSR网络请求较少，但对服务器负载较大。
3.CSR通常需要依赖前端框架，如Vue、React等；SSR则可以使用各种模板引擎进行渲染。
4.CSR性能主要取决于用户浏览器，而SSR性能主要取决于服务器和网络带宽。

总的来说，CSR更加适合交互较为复杂、页面切换较为频繁的应用，如单页面应用程序（SPA）；而SSR更加适合首屏体验和SEO要求较高的应用，如电商网站、博客或资讯网站等。但需要注意的是，根据实际场景和需求，可以根据具体情况来选择渲染方式。

render函数封装有什么特别的，或者用到比较巧妙的东西？

render 函数是 Vue 组件中的核心函数，用于描述组件页面结构和行为。相比于模板语法，render 函数的可控性更高，能够更加灵活地控制组件的渲染方式，并且可以支持更多的编程语法。在封装 render 函数时，可以进行一些比较巧妙的处理，下面介绍一些常见的技巧：

1. 递归渲染

在某些情况下，可能需要递归渲染组件。可以在 render 函数内部定义一个递归函数，通过递归自身来渲染多层级结构的用户界面。在递归渲染时，需要注意避免出现无限递归的情况，例如定义递归终止条件和限制递归层数等。

2. 插槽（Slot）

在 render 函数中，可以通过 vm.$slots 来访问插槽内容。通过动态计算插槽内容，并将其嵌入到组件内部的指定位置，可以实现更加灵活的组件布局结构。对于子组件，还可以通过 vm.$scopedSlots 来访问作用域插槽内容，在需要时进行渲染。

3. 模板函数

在 render 函数中，可以定义多个函数来进行模板化处理，从而可以把一些常用的渲染逻辑封装为函数，并在多个组件中进行复用。模板函数还可以接受一些参数，从而可以根据参数进行动态渲染。例如，可以定义一个 renderAvatar 函数，用于渲染用户头像区域，然后在多个组件中进行复用。

4. 动态组件

在 render 函数中，可以通过 vm.$options.components 寻找到所需的动态组件，然后调用 $options.render 函数或者 $slots 函数渲染组件。通过动态加载组件，可以在需要时进行渲染，从而实现更加灵活和高效的组件渲染逻辑。

5. VNode

在 render 函数中，可以通过封装 VNode 函数，来构建和操作虚拟 DOM 元素。通过自定义 VNode 函数，可以实现更加灵活和高效的组件渲染。例如，可以定义一个 createElement 函数，用于动态生成 VNode，然后通过 render 函数进行渲染。

以上是常见的一些技巧，封装 render 函数是 Vue 组件开发中的一个重要环节，需要根据具体情况进行适量封装和优化。同时，也需要注意避免代码过于复杂和不易维护，尽可能保持代码简洁和易读。

vuex的实现思路。

Vuex 是 Vue.js 中非常重要的状态管理库，用于管理和跟踪应用程序的状态。其实现思路如下：

1. State

定义应用程序的状态（state），即存储应用数据的地方。在应用程序中，状态通常是多个组件共享的数据。

2. Getter

定义进行状态计算的函数（getter），用于从状态中获取派生的状态。Getter 可以将一些常见的计算逻辑封装起来，使得组件可以轻松地重用状态计算。

3. Mutation

定义修改应用程序状态的方法（mutation），即修改 state 中数据的逻辑。由于只有 mutation 才能改变 state，因此 mutation 是状态变化的唯一入口。

4. Action

定义异步操作，可以是异步修改 state 的执行方法，也可以是提交 mutation。Action 中可以包含异步操作、条件判断语句以及多个 mutation 的组合。

5. Module

将应用程序的状态分解成多个模块，每个模块都包含自己的 state、mutation、action、getter。模块让状态管理逻辑更具组织性、可维护性和可扩展性。

Vuex 的实现思路可以归纳为 “单向数据流” 的设计模式，即在应用程序中，所有的状态都通过 Vuex 进行集中管理，并且只能通过调用 mutation 方法来修改 state。这种设计模式可以确保应用程序状态的单一来源和可追踪性，从而使状态管理变得更加可靠和易于开发。

nextTick, setTimeout 以及 setImmediate 三者有什么区别？

nextTick、setTimeout和setImmediate都是异步执行的API，但其具体实现以及执行顺序与执行时机有所不同，下面简要介绍一下它们的区别：

1. nextTick

nextTick 是 Vue 提供的异步 API，用于在 DOM 更新后执行延迟回调。在 Vue 内部，nextTick 会在微任务（Promise 或 MutationObserver）或宏任务（setImmediate 或 setTimeout）中执行回调。通常用于在当前线程执行结束后，批量更新组件的状态、操作 DOM 等等。

2. setTimeout

setTimeout 是 JavaScript 中提供的原生异步 API，用于在一定时间后执行回调。在浏览器中，setTimeout 回调函数会被推入任务队列中，并在任务队列中待待到 UI 线程空闲时才被执行。

3. setImmediate

setImmediate 是 Node.js 中提供的异步 API，也可以用于在当前时间循环迭代结束后执行回调函数，并将回调函数插入到事件队列的队首。由于 setImmediate 只能在 Node.js 中使用，所以在浏览器中不推荐使用。

总之，nextTick 更适合 Vue 应用中的异步更新场景，setTimeout 是一种浏览器原生 API，一般用于在当前执行栈执行完之后，设定一个时间间隔，以异步执行回调函数。而 setImmediate 只能在 Node.js 环境中使用，在异步回调方面和 setTimeout 类似，但性能可能更好些，建议在 Node.js 环境中使用。

另外，需要提醒的是，JavaScript 中的异步执行一般依赖于事件循环机制，因此在使用时需要注意其执行顺序和时机，以免出现不可预测的错误情况。

watch和computed哪一个可以实现异步

在 Vue.js 中，watch 和 computed 都可以用于响应式地监听数据变化，但它们的实现方式和应用场景有所不同，不过computed一般不用于异步操作。

computed 是一个计算属性，它可以根据已有的数据计算出新的数据，并将其缓存起来。计算属性的特点是：具有惰性计算特性，只有在其依赖的数据变化时才会重新计算。由于每次计算结果都会被缓存，因此多次获取该计算属性的值时，不会重复计算，而是直接返回缓存的结果。

computed 适用于处理简单的同步计算逻辑，一般不用于处理异步操作。

watch 是一个侦听器，可以观察一个复杂表达式的变化，从而执行一些异步或者开销较大的操作。watch 接收一个回调函数作为参数，当被监视的数据发生变化时，回调函数就会被执行。在回调函数中，可以处理异步操作，例如发送 AJAX 请求等。

可以使用 watch 的以下特性来支持异步：

• 立即执行：添加 { immediate: true } 选项，可以在组件创建时立即执行回调函数，而不用等待数据改变。

• “深度”侦听：添加 { deep: true } 选项，将可以深度遍历监视对象的所有子属性，从而可以监听页面数据更改的更精细的级别。

总的来说，computed 更适用于简单数据计算，watch 更适用于处理异步逻辑。需要注意的是，由于 watch 对比方式是内部采用了依赖收集的方式，因此在多次使用 watch 监听同一个变量时，可能会出现不必要的多次异步操作的情况。但是 watch 可以通过手动添加防抖/节流等操作来减少异步操作执行的次数，从而提高性能。

computed和watch的区别

Vue.js 中的 computed 和 watch 都是用于实现响应式数据的监听，但它们的实现方式和应用场景有所不同，具体区别如下：

1. 实现方式:

• computed 是计算属性，它根据已有的数据计算新的数据，并将其缓存起来。当其依赖的数据发生变化时，计算属性会自动更新。它会使用缓存策略，只有在相关的依赖数据更新时才会重新计算。在模板中直接使用计算属性，就像使用常规的数据属性一样。

• watch 利用 Vue.js 的观察者模式，实现监听到对象（或数据）的变化时自动执行相应的函数。它没有缓存策略，每当值发生变化时都会执行回调。需要在代码中手动添加需要监听的对象，比较适合在数据变化时执行异步或开销较大的操作。

2. 应用场景：

• computed 适用于处理简单的同步计算逻辑，例如格式化日期、转换数据类型等操作。 computed 是对已有数据的包装，可以理解为在原数据的基础上进行加工。

• watch 适用于监听数据变化后需要执行复杂或异步操作的场景，例如发送网络请求、操作 DOM 等。 watch 监听的被观察数据，可以是组件实例上一个属性或对象中的某个属性。

一般来说，computed 主要用来处理简单的计算逻辑，从而简化对模板数据的处理，而 watch 主要用来监听数据变化执行回调操作。需要根据具体的应用场景选择合适的方式。

history模式下会出现404，怎么处理

在使用 Vue Router 进行前端路由的时候，如果使用了 history 记录模式，即使用 mode: 'history'，那么在实际应用中经常会出现刷新页面或直接通过 URL 访问页面发生 404 错误的情况，因为在使用 history 模式时，URL 中的路径并不是一个实际存在的文件路径，而只是前端路由的路径，因此需要一些特殊的处理方式来解决这个问题。

解决方法：

一般来说，可以通过配置服务器返回 index.html 页面来解决这个问题。具体地，在服务器端进行如下配置即可：

• Apache

在 Apache 服务器上，可以通过使用 .htaccess 文件来对 URL 进行处理。在项目根目录下创建 .htaccess 文件，写入以下内容：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

• Nginx

在 Nginx 服务器上，需要配置 try_files 选项。在 Nginx 配置文件中添加以下配置：

location / {
  try_files $uri $uri/ /index.html;
}

• HTTP Server

对于其他支持 SPA 的 HTTP 服务器，只需在服务器配置文件中加入一个重定向规则，将所有请求都重定向到 index.html。
例如：

RewriteEngine On
RewriteBase /
RewriteRule ^(.*)$ /index.html [L]

总之，无论是什么类型的服务器，最终目的都是要将所有请求重定向到 index.html 页面，从而让前端路由能够正常工作。

Vue3相比Vue2有哪些优化

Vue3相比Vue2，有了许多优化和改进，主要包括以下方面：

1. 更快的渲染性能

Vue3中使用了更快的虚拟DOM算法，并对静态节点进行了优化，提高了渲染性能。此外，Vue3还采用了Tree-Shaking技术来消除未使用代码，减小了构建生成的代码量。

2. 更好的TypeScript支持

Vue3在设计时考虑了TypeScript，对TypeScript的支持更加友好，包括对TypeScript的类型检查和推断、对自定义指令类型推断等方面进行了优化。

3. 更好的组合API

Vue3中引入了组合API，它通过setup()函数来获取组件的状态，并且允许将组件的逻辑组织成小的、可复用的逻辑片段，使得组件更加易读、易维护。同时，组合API可以将数据和方法直接暴露给模板，消除了Vue2中经常出现的作用域丢失问题。

4. Composition API

Vue3中引入了Composition API，该API提供了更灵活和可重用的方式来组织组件逻辑，是在Vue2中Options API的改进。Composition API解决了在Vue2中由于组件变得更加庞大、复杂而存在的一些问题，并且能够更好地支持

5. 更好的数据响应式

Vue3中使用了Proxy替换了Object.defineProperty来实现响应式系统，使得在嵌套对象或数组时更加高效和灵活。

总之，相对于Vue2，Vue3在性能、开发效率、类型检查等方面都有了极大的改进和优化，让开发者可以更加便捷的构建高质量的Web应用。