vue-react面试资料

1. Vue 和 React 的区别

核心区别概述： Vue 和 React 都是用于构建用户界面的 JavaScript 框架，但它们在设计理念、API 使用、生态系统等方面存在一些显著差异。

1.1 设计理念：

• React: React 倡导组件化的理念，通过单向数据流来管理数据。核心是 JSX (JavaScript XML) 语法，将 HTML 结构写在 JavaScript 代码中，强调UI 是数据的函数。React 专注于 View 层，其他功能（如路由、状态管理等）通常需要借助第三方库。
• Vue: Vue 也采用组件化，但更倾向于渐进式框架。Vue 允许开发者使用 Template (HTML 模板)、JSX 或 Render Function 来定义 UI。Vue 更容易上手，提供了官方的路由 (Vue Router) 和状态管理 (Vuex) 等解决方案，开箱即用。

1.2 模板/JSX:

• React: 使用 JSX，将 HTML 结构嵌入 JavaScript 代码中。这种方式带来了灵活性，但也可能使代码结构看起来比较复杂，需要学习 JSX 语法。
• Vue: 支持 Template (HTML 模板)、JSX 和 Render Function。Template 语法更接近 HTML，对前端开发者来说更容易上手；JSX 提供了 React 类似的灵活性；Render Function 则提供了更底层的控制。

1.3 数据绑定:

• React: 采用单向数据流。数据从父组件流向子组件，子组件不能直接修改父组件传递的数据，需要通过回调函数或事件通知父组件进行修改。
• Vue: 支持双向数据绑定 (通过 v-model 指令)，也支持单向数据流。双向数据绑定简化了表单处理等场景，但需要注意数据流向的可控性。

1.4 状态管理:

• React: 社区有 Redux、MobX 等第三方状态管理库，用于管理复杂应用中的状态。React 本身不提供内置的状态管理解决方案。
• Vue: 提供官方的 Vuex 状态管理库，方便管理应用中的状态。Vuex 设计简洁，易于上手，也更容易与 Vue 组件集成。

1.5 性能优化:

• React:
  • 虚拟 DOM (Virtual DOM): React 使用虚拟 DOM 减少直接操作 DOM 的次数，提高性能。
  • Diff 算法: 通过 Diff 算法比较新旧虚拟 DOM 的差异，只更新需要改变的部分，提高更新效率。
  • shouldComponentUpdate 和 React.memo: 提供了控制组件渲染时机的机制，可以进行性能优化。
• Vue:
  • 虚拟 DOM: Vue 同样使用虚拟 DOM，也有 Diff 算法进行优化。
  • 依赖追踪: Vue 的响应式系统可以精确追踪到组件依赖的数据变化，只有数据变化时才会更新相关的 DOM，提高性能。
  • 模板编译优化: Vue 的模板编译系统在编译阶段进行优化，减少运行时的开销。

1.6 学习曲线:

• React: 学习曲线相对较陡峭，需要学习 JSX、函数式编程等概念，以及第三方库的使用。
• Vue: 学习曲线相对平缓，更容易上手，文档也更友好。

1.7 生态系统:

• React: 生态系统庞大，有大量的第三方库和工具，可以满足各种需求。
• Vue: 生态系统也在快速发展，拥有 Vue Router、Vuex、Vue CLI 等官方和社区的优秀库和工具。

1.8 总结表格：

特性	React	Vue
设计理念	组件化，单向数据流	渐进式，组件化，双向数据绑定
模板/JSX	JSX	Template, JSX, Render Function
数据绑定	单向	双向 (v-model)，单向
状态管理	Redux, MobX 等第三方库	Vuex
学习曲线	较陡峭	相对平缓
生态系统	庞大	快速发展
核心优势	灵活性，大型项目，生态系统	易上手，渐进式，文档友好
性能	虚拟 DOM，Diff 算法，优化机制	虚拟 DOM，依赖追踪，模板编译优化

1.9 应该选择哪个框架？

• React: 适合于大型、复杂的项目，需要高度的灵活性和可定制性，并且团队对 JavaScript 和函数式编程有较好的掌握。
• Vue: 适合于中小型项目，或者需要快速开发、注重用户体验的场景，以及希望更容易上手和维护的团队。

2. Vue2 和 Vue3 的区别，Vue3 有哪些改进

核心区别概述： Vue 3 是 Vue.js 的重大升级版本，带来了性能提升、 Composition API、更好的 TypeScript 支持等多个方面的改进。

2.1 核心改进:

• 性能提升:
  • 虚拟 DOM 优化: Vue 3 在虚拟 DOM 的实现上做了优化，使用了静态提升 (Static Hoisting)、补丁优化 (Patch Flag) 等技术，减少了不必要的 DOM 操作，提高了渲染性能。
  • Tree-shaking 支持: Vue 3 采用了模块化设计，更易于进行 Tree-shaking，减少了打包后的文件体积。
  • Proxy 实现的响应式系统: Vue 3 使用 Proxy 代替了 Vue 2 中的 Object.defineProperty 实现响应式，解决了 Vue 2 中一些响应式系统的限制，例如无法检测到对象属性的添加和删除，以及无法检测到数组索引和长度的变化。
  • 更小的体积: Vue 3 经过优化，打包后的体积更小，提高了页面加载速度。
• Composition API:
  • API 组织方式: Vue 3 引入了 Composition API，允许开发者将相关的逻辑组织在一起，提高了代码的可读性、可维护性和可复用性。
  • 代码复用: 通过 Composition API，可以更容易地实现逻辑复用，例如使用 hooks 来提取和共享组件的逻辑。
  • TypeScript 友好: Composition API 更适合 TypeScript，提供了更好的类型推导和类型检查。
• 更好的 TypeScript 支持:
  • 全面拥抱 TypeScript: Vue 3 核心代码使用 TypeScript 编写，并提供了更好的 TypeScript 支持。
  • 类型推导: Composition API 提供了更好的类型推导，减少了手动编写类型声明的工作量。
• Fragment 和 Teleport:
  • Fragment: 允许组件返回多个根节点，避免了不必要的 DOM 元素。
  • Teleport: 可以将组件的内容渲染到 DOM 树的任何位置，方便实现模态框、通知等效果。
• 自定义渲染器 (Custom Renderer):
  • 定制渲染目标: Vue 3 提供了自定义渲染器的 API，允许开发者将 Vue 渲染到非浏览器环境，例如 NativeScript、Weex 等。

2.2 Vue3 的优势总结：

• 更快的性能
• 更灵活的开发方式 (Composition API)
• 更好的代码组织和可维护性
• 更好的 TypeScript 支持
• 更小的体积
• 更强大的功能 (Fragment, Teleport, 自定义渲染器)

2.3 Vue2 到 Vue3 的迁移:

• Vue 3 提供了兼容性构建，允许开发者逐步将 Vue 2 项目迁移到 Vue 3。
• 需要学习新的 Composition API 和了解 Vue 3 的新特性。
• 可以使用 Vue 官方提供的迁移助手工具，帮助检测 Vue 2 代码中的不兼容性，并提供迁移建议。

2.4 总结表格：

特性	Vue 2	Vue 3
响应式系统	Object.defineProperty	Proxy
API 组织方式	Options API	Composition API
性能	相对较好	更好 (虚拟 DOM 优化，Tree-shaking)
TypeScript	支持有限	更好，全面拥抱
Fragment	不支持	支持
Teleport	不支持	支持
自定义渲染器	不支持	支持
体积	较大	较小

3. Leaflet 的优点，与高德地图 webjs 的不同

3.1 Leaflet 的优点：

• 轻量级: Leaflet 是一个轻量级的、移动友好的交互式地图 JavaScript 库，核心代码只有几十 KB，加载速度快。
• 开源且免费: Leaflet 是开源的，使用 MIT 许可证，可以自由使用和修改。
• API 简洁易用: Leaflet 提供了简洁、直观的 API，易于学习和使用，可以快速构建地图应用。
• 跨平台支持: Leaflet 可以在各种平台和设备上运行，包括桌面浏览器、移动设备和 WebViews。
• 插件丰富: Leaflet 拥有丰富的插件生态系统，可以扩展地图功能，例如添加标记、绘制图形、处理地理编码、进行数据可视化等。
• 可定制性强: Leaflet 允许开发者高度定制地图的外观和行为，可以满足各种个性化需求。
• 支持多种地图瓦片: Leaflet 支持多种地图瓦片提供商，例如 OpenStreetMap、Mapbox、Google Maps 等，可以根据需求选择不同的地图底图。
• 扩展性好: Leaflet 易于扩展，开发者可以轻松地添加自定义功能和插件。
• 性能优化: Leaflet 针对移动设备进行了优化，提供了流畅的地图交互体验。

3.2 与高德地图 WebJS 的不同：

特性	Leaflet	高德地图 WebJS
地图数据源	支持多种瓦片，包括 OpenStreetMap，可以自定义地图数据源	高德地图数据，可以接入其他数据源
地图样式	可定制性强，可以自定义地图样式	高德地图提供多种地图样式，自定义程度相对较低
功能	核心功能较少，需要通过插件扩展，生态丰富	功能丰富，集成定位、搜索、路径规划等 API
性能	轻量级，加载速度快，性能优化好	功能较多，加载速度可能相对较慢
API	简洁易用	API 功能丰富，需要更多学习成本
使用场景	需要灵活定制地图，不需要依赖高德地图完整功能的场景	需要使用高德地图数据和功能的场景，地图功能需求丰富
商业授权	MIT 许可证，免费使用	免费使用，但有流量限制
维护更新	社区维护	高德地图官方维护
地理信息处理	基础地理信息处理能力，需要插件扩展	提供丰富的地理信息处理功能

3.3 总结：

• Leaflet: 适合于需要轻量级地图、高度定制地图样式、使用多种地图数据源、或者不需要依赖高德地图完整功能的场景。
• 高德地图 WebJS: 适合于需要使用高德地图数据和功能，例如定位、搜索、路径规划等，地图功能需求丰富的场景。

3.4 选择哪个库的建议：

• 如果你的项目需要地图功能，但对地图样式、数据源有高度的定制需求，并且希望减少 JavaScript 代码的体积，Leaflet 可能是更好的选择。 你可以根据需求选择插件，扩展 Leaflet 的功能。
• 如果你的项目需要使用高德地图的数据和功能，例如定位、搜索、路径规划等，或者希望快速构建地图应用，高德地图 WebJS 会更方便。 高德地图提供了丰富的 API 和功能，可以快速满足你的需求。

4. Vite 相对于 Webpack 的优缺点，或者说不同

1. 核心区别：

• Vite: 利用浏览器原生的 ES Modules (ESM) 特性，在开发环境下，按需加载模块，实现快速的冷启动和更新。在生产环境下，Vite 使用 Rollup 进行打包。
• Webpack (和其他基于打包的构建工具，例如 Parcel): 在开发环境下，Webpack 需要先打包整个应用，然后启动开发服务器。每次代码更改后，Webpack 需要重新打包，即使只修改了很小的部分。

2. 优点 (Vite 相对于 Webpack 的优势)：

• 更快的冷启动 (Cold Start):
  • Vite: 由于基于 ESM，无需打包整个应用。启动开发服务器时，只需扫描入口文件，快速启动。
  • Webpack: 需要打包整个应用，启动时间较长，特别是在项目越来越大的时候。
• 更快的热更新 (HMR - Hot Module Replacement):
  • Vite: 利用 ESM 的特性，HMR 速度非常快。只更新发生变化的模块，无需重新加载整个页面。
  • Webpack: HMR 速度也很快，但相比 Vite，可能略有延迟，特别是在大型项目中。
• 更快的构建速度 (Build Speed):
  • Vite: 在生产环境下，Vite 使用 Rollup 进行打包，Rollup 打包速度很快，并且可以进行代码分割、Tree-shaking 等优化。
  • Webpack: 构建速度相对较慢，尤其是在复杂的项目中。
• 开发体验更好 (DX - Developer Experience):
  • Vite: 开发服务器启动速度快，HMR 速度快，整体开发体验更流畅。
  • Webpack: 在开发大型项目时，可能会感到开发服务器启动和 HMR 速度较慢，影响开发体验。
• 更简单的配置:
  • Vite: 配置更简单，开箱即用，更容易上手。
  • Webpack: 配置相对复杂，需要配置各种 Loader 和插件。
• 原生支持 TypeScript, JSX, CSS Modules 等:
  • Vite: 内置支持 TypeScript、JSX、CSS Modules 等，无需额外的配置。
  • Webpack: 需要配置额外的 Loader 和插件来支持 TypeScript、JSX、CSS Modules 等。
• 更现代的架构: Vite 采用更现代的架构，基于浏览器原生的特性，可以更好地利用现代浏览器的性能。

3. 缺点 (Vite 相对于 Webpack 的劣势，或者说需要注意的地方)：

• 生态不如 Webpack 丰富:
  • Vite: 生态正在快速发展，但插件和工具的丰富程度不如 Webpack。
  • Webpack: 生态系统非常庞大，有大量的插件和工具，可以满足各种需求。
• 对旧浏览器支持有限:
  • Vite: 默认情况下，Vite 需要现代浏览器支持 ESM。对于需要支持旧浏览器的项目，需要进行额外的配置。
  • Webpack: 可以通过配置，更好地支持旧浏览器。
• 打包灵活度可能不如 Webpack:
  • Vite: Vite 使用 Rollup 进行打包，虽然速度快，但配置选项不如 Webpack 灵活。
  • Webpack: Webpack 的配置非常灵活，可以进行更细粒度的控制。
• 某些高级功能可能需要额外的配置:
  • Vite: 对于一些高级功能，例如代码分割、懒加载等，可能需要进行额外的配置或使用插件。
  • Webpack: 提供了更丰富的内置功能，可以更方便地实现这些高级功能。

4. 总结表格:

特性	Vite	Webpack (及其他打包工具)
核心原理	基于 ESM，开发时按需加载，生产时 Rollup 打包	打包整个应用，开发时 HMR，生产时打包
冷启动	极快	较慢
HMR (热更新)	极快	较快
构建速度	快	较慢
开发体验	更好	可能较差，尤其是在大型项目中
配置	简单，开箱即用	复杂
生态系统	快速发展，但不如 Webpack 丰富	庞大
对旧浏览器支持	默认需要现代浏览器，需要额外配置	更好，可以通过配置支持旧浏览器
打包灵活性	相对较少	更多
适用场景	现代项目，希望快速开发，对旧浏览器支持要求不高的项目	各种项目，需要更灵活的配置、支持旧浏览器、生态需求丰富的项目

5. 什么时候选择 Vite?

• 新项目： Vite 是构建新项目的理想选择。
• 快速开发需求： 希望快速启动开发服务器、快速进行热更新，提升开发效率。
• 对旧浏览器支持要求不高： 如果项目不需要支持旧版浏览器，Vite 会更方便。
• 希望简化配置： 享受开箱即用的便利。
• 小型到中型项目： Vite 在小型到中型项目中的表现通常更出色。

6. 什么时候选择 Webpack (或其他打包工具)?

• 大型项目： Webpack 在大型项目中的优化经验更丰富，有更多的插件和工具支持。
• 需要高度定制： 需要更灵活的配置和更精细的控制。
• 需要支持旧浏览器： Webpack 的配置更方便支持旧浏览器。
• 项目对生态系统有高度依赖： 需要使用大量 Webpack 生态中的插件和工具。
• 已经使用了 Webpack，并且项目维护良好： 如果项目已经在使用 Webpack，并且维护良好，迁移的成本可能大于收益。

总结：

Vite 在开发体验、构建速度方面具有显著优势，是构建现代 Web 应用的理想选择。然而，Webpack 在生态系统、配置灵活性方面更胜一筹，并且对旧浏览器支持更好。 在选择构建工具时，需要根据项目的具体情况进行权衡。 总体来说，Vite 的发展趋势非常好，而且越来越受欢迎，并且很多 Vue 和 React 的新项目都选择了 Vite 作为构建工具。