react 和 vue 对比

虚拟 DOM 是什么

1. 虚拟 DOM 是什么？
   • 虚拟 DOM 是一个轻量级的 JavaScript 对象树，它对应着真实 DOM 树的结构。
   • 在 Vue 和 React 中，组件状态（数据）的改变会触发虚拟 DOM 的重新构建。
   • 虚拟 DOM 是一个抽象层，它存储了应用的状态和 UI 结构，但并不直接与浏览器交互。
2. 工作原理：
   • 当应用状态发生变化时，Vue 和 React 会首先生成新的虚拟 DOM 树。
   • 然后，它们会将新的虚拟 DOM 与之前的虚拟 DOM 进行比较，找出两者之间的差异，这个过程称为"虚拟 DOM 的协调"。
   • 接下来，框架将只更新真正需要改变的部分，而不是重新渲染整个页面。这样可以提高性能，因为直接操作 DOM 通常比操作虚拟 DOM 慢得多。
3. 框架差异：
   • 虽然 Vue 和 React 都使用了虚拟 DOM 的概念，但它们的实现方式有所不同。Vue 的虚拟 DOM 是响应式的，而 React 的虚拟 DOM 需要手动触发更新。
   • 此外，Vue 使用了模板语法，而 React 使用了 JSX，这也导致了一些不同的开发风格。

总之，虚拟 DOM 是 Vue 和 React 等现代前端框架的核心概念，它通过在内存中操作轻量级的 JavaScript 对象来提高性能和开发效率，减少了直接操作 DOM 的成本，并使得组件化开发更加容易。通过对比前后两次虚拟 DOM 的差异，框架可以智能地更新只有改变的部分，而不是整个页面，从而提供更好的用户体验。

react 和 vue 为什么要使用虚拟 dom ?

Vue 和 React 使用虚拟 DOM 的主要目的是提高页面渲染性能和开发效率。

传统的 DOM 操作是直接对页面上的实际 DOM 元素进行增删改查，这样的操作会涉及到浏览器的重绘（Repaint）和重排（Reflow），性能开销比较大，特别是在大型应用中频繁更新 DOM 时。

虚拟 DOM 则是在内存中构建一个虚拟的 DOM 树，通过对比新旧虚拟 DOM 树的差异，找出需要更新的部分，然后再一次性地对实际 DOM 进行更新，从而减少了实际 DOM 操作的次数，提高了性能。

具体来说，使用虚拟 DOM 的好处包括：

• 减少 DOM 操作次数： 通过比较虚拟 DOM 树的差异，只对需要更新的部分进行实际 DOM 操作，减少了浏览器重绘和重排的次数，提高了性能。
• 跨平台支持： 虚拟 DOM 的抽象层使得框架可以在不同的平台上运行，比如 React Native 可以使用相同的虚拟 DOM 技术来实现原生应用的 UI 渲染。
• 更简洁的代码，开发效率： 开发者可以专注于应用的状态和数据逻辑，而不需要过多地关注 DOM 操作的细节，使得代码更易于维护和理解。
• 提高渲染性能： 虚拟 DOM 可以通过一些优化策略（比如批量更新、异步更新等）来进一步提高页面的渲染性能。

总的来说，虚拟 DOM 技术有效地解决了传统 DOM 操作的性能问题，使得 Vue 和 React 在构建大型、高性能的前端应用时更加高效和灵活。

vue 和 react 有哪些区别

• 模板渲染方式不同
  • Vue 使用拓展的 HTML 模板语法进行渲染
  • React 使用 JSX 语法糖
  • 在深层上，模板的原理不同，这才是他们的本质区别：React 是在组件 JS 代码中，通过原生 JS 实现模板中的常见语法，比如插值，条件，循环等，都是通过 JS 语法实现；Vue 是在和组件 JS 代码分离的单独的模板中，通过指令来实现的，比如条件语句就需要 v-if 来实现
• 组件通信不同
  • Vue 使用 Props Event Provide/Inject
  • React 使用 Props Callback Context
• 监听数据变化的实现原理不同
  • Vue 通过 getter/setter 以及一些函数的劫持，能精确知道数据变化，不需要特别的优化就能达到很好的性能
  • React 默认是通过比较引用的方式进行的，如果不优化（PureComponent/shouldComponentUpdate）可能导致大量不必要的 VDOM 的重新渲染
• 数据流不同
  • vue 支持通过 v-model 进行双向数据绑定
  • react 只能通过 onChange/setState 进行绑定
• 为组件拓展功能
  • react 使用 HOC
  • vue 使用 mixins

vue 和 react 的 diff 算法有什么区别

Vue 和 React 在虚拟 DOM 的 diff 算法上有一些相似之处，但也存在一些区别。以下是它们之间的一些主要区别：

1. 策略的不同：
   • React 采用了一种基于 Fiber 的增量更新策略，即将整个更新过程分割成多个小的任务单元，并根据任务的优先级和剩余时间来动态调整任务的执行顺序，从而实现更加灵活和高效的更新。
   • 而 Vue 则采用了一种基于双端比较的策略，在对比新旧虚拟 DOM 树时，会同时从新旧两棵树的头部和尾部开始遍历，以尽量减少比较的节点数量。
2. 算法的不同：
   • 在具体的 diff 算法实现上，React 使用了一种类似于长子优先（First Child）的策略，即会优先比较新旧节点的第一个子节点。这种策略可以在大多数情况下减少遍历的节点数量，提高 diff 算法的效率。而 Vue 采用了双端比较的策略，从新旧两个虚拟 DOM 树的头部和尾部同时开始遍历，每次比较一对节点，直到两个指针相遇。
3. 优化的不同：
   • React 通过 Fiber 架构和调度器来实现增量更新和任务优先级调度，可以更灵活地控制更新的时机和顺序，并且在渲染性能和用户体验方面具有一定的优势。而 Vue 则通过一些其他的优化技术，如静态节点提升、事件侦听器的缓存等，来提高渲染性能和效率。

vue 和 react 在 diff 算法上做了哪些改进?

Vue 的改进

1. 双向绑定：Vue 引入了双向绑定系统，允许开发者轻松地将视图与模型同步。Vue 的响应式系统使用了 Object.defineProperty，它会追踪数据的依赖关系，只更新发生变化的部分，减少了不必要的 DOM 操作。
2. 虚拟 DOM 优化：Vue 在虚拟 DOM 的 diff 算法中实现了一些优化，例如，通过标记静态子树，避免不必要的比较和渲染。
3. 异步更新：Vue 的更新是异步的，默认情况下会使用微任务（Promise、MutationObserver）来批量处理 DOM 更新，从而提高性能。

React 的改进

1. Fiber 架构：React 引入了 Fiber 架构，它是一个重新设计的协调引擎，使得 React 能够在渲染过程中更好地管理任务的优先级和中断，以提高渲染性能。
2. 可中断的渲染：Fiber 架构允许 React 在渲染过程中进行中断和恢复，这意味着 React 可以根据任务的优先级动态调整渲染进程，提高用户体验。
3. 增量渲染：React Fiber 支持增量渲染，允许将大型组件树的渲染工作分割成多个步骤，并在多个帧中逐渐完成，以保持界面的响应性。
4. Suspense 和 Concurrent Mode：React 引入了 Suspense 和 Concurrent Mode，使得开发者能够更容易地处理异步数据加载、代码拆分和资源加载，从而提高应用的性能和用户体验。
5. memoization：React 采用了 memoization 技术，通过缓存组件的渲染结果，减少了重复渲染的成本。

vue2 在 diff 算法上做了哪些优化

1. 虚拟 DOM 的双端比较：
   • Vue 2 中使用了双端比较的策略，在对比新旧虚拟 DOM 树时，会同时从新旧两棵树的头部和尾部开始遍历，以尽量减少比较的节点数量。这种优化策略使得 diff 过程更加高效。
2. 静态节点优化：
   • Vue 2 中引入了静态节点优化的策略，通过 v-once 指令将不需要频繁更新的静态节点提升为静态内容，从而减少渲染开销。这样可以避免不必要的 diff 操作和 DOM 更新。
3. DOM 更新的最小化：
   • Vue 2 会尽量减少对 DOM 的直接操作，而是通过虚拟 DOM 进行 diff 比较，并生成最小化的更新操作，然后批量更新到真实 DOM 中。这样可以减少 DOM 操作的次数，提高渲染性能。
4. 异步更新队列（批量更新）：
   • Vue 2 使用了异步更新队列的策略，在数据变化时并不会立即触发视图更新，而是将更新操作放入异步队列中，然后在下一个事件循环中进行处理。这样可以将多个更新操作合并成一个批量更新，提高性能和效率。

这些优化措施使得 Vue 2 在 diff 算法上的性能得到了一定程度的提升，尤其是在处理大型应用和大量数据更新时，能够更高效地进行虚拟 DOM 的 diff 比较和 DOM 更新操作。

vue3 相对于 vue2，有什么改进？

Vue 3 相对于 Vue 2 进行了许多改进和优化，主要包括以下几个方面：

1. 性能优化：
   • 引入了 Patch Flag（静态标记） 和 Dynamic Directive（动态指令），可以在更新过程中跳过不需要比较的节点，减少了不必要的 diff 操作。
   • Vue 3 支持静态节点提升（Static Node Hoisting），将不需要响应式更新的静态节点提升到渲染函数之外，减少了渲染的开销。
   • Vue 3 使用了 Tree-shaking 技术，可以更好地优化打包后的代码，减小应用的体积。
2. Composition API：
   • Vue 3 引入了 Composition API，提供了一种更灵活、更易于组织代码的方式来编写组件逻辑。Composition API 可以将组件的逻辑按照功能划分为多个函数，使得代码更易于维护和复用。
3. TypeScript 支持：
   • Vue 3 对 TypeScript 的支持更加友好，通过重新设计 API 和改进类型定义，提供了更好的类型推断和编辑器支持，使得开发者可以更轻松地使用 TypeScript 来开发 Vue 应用。
4. 更好的 TypeScript 集成：
   • Vue 3 改进了对 TypeScript 的支持，包括对 Vue 组件的类型推断的改进、更好的编辑器支持以及更准确的类型检查。
5. 更好的递归组件支持：
   • Vue 3 对递归组件的支持更加友好，提供了新的 <teleport> 组件和 v-model 的改进，使得递归组件的使用更加简洁和灵活。
6. 更好的响应式系统：
   • Vue 3 对响应式系统进行了改进，提供了更强大的响应式 API，包括 ref、reactive、computed、watch 等，使得状态管理更加灵活和方便。
7. 更好的编译器优化：
   • Vue 3 的编译器进行了改进，提供了更好的优化和更好的错误提示，使得开发者可以更轻松地编写和调试 Vue 应用。

总的来说，Vue 3 在性能、开发体验、TypeScript 支持和编译器优化等方面都进行了许多改进和优化，使得 Vue 更加强大、更易于使用和维护。

Proxy 为什么要替代 Object.defineProperty：

1. 更强大的功能：Proxy 对象提供了更强大和灵活的功能，可以监听更多类型的操作，包括属性的读取、赋值、删除等，而 Object.defineProperty 只能监听属性的读取和赋值。
2. 更方便的语法：使用 Proxy 可以更直观和简洁地定义响应式行为，而不需要像使用 Object.defineProperty 那样需要逐个定义属性的 getter 和 setter 方法。
3. 更易于扩展：Proxy 可以轻松地实现递归监听和数组的监听，而 Object.defineProperty 需要额外的逻辑来处理嵌套对象和数组的情况。
4. 更好的性能：Proxy 对象相对于 Object.defineProperty 有更好的性能，特别是在监听大型对象或数组时，如果使用 Object.defineProperty，你需要逐个定义每个属性的 getter 和 setter 方法，这可能会导致性能下降；而使用 Proxy 对象则可以直接对整个对象或数组进行监听，而不需要逐个定义每个属性的 getter 和 setter 方法。Proxy 可以监听对象的所有操作，包括属性的读取、赋值、删除等，而且使用 Proxy 对象时可以提供更加简洁和优雅的语法。。
5. 更好的兼容性：Proxy 是 ES6 新增的特性，而 Object.defineProperty 有一些限制和兼容性问题，尤其是在 IE8 及以下版本的浏览器中不支持，使用 Proxy 可以避免这些兼容性问题。

vue3 在 diff 算法上的优化

1. 双端比较（双指针算法）：
   • Vue 3 引入了双端比较（双指针算法），在某些情况下可以减少比较的节点数量。双端比较会从新旧两个虚拟 DOM 的头尾同时开始遍历，每次比较一对节点，直到两个指针相遇。
2. 静态节点提升（Static Node Hoisting）：
   • Vue 3 引入了静态节点提升技术，能够将不需要响应式更新的静态节点提升到渲染函数之外，减少不必要的比较和渲染，提高渲染性能。
3. 事件侦听器的优化：
   • Vue 3 使用了事件侦听器的缓存策略，避免了在每次更新时重新创建事件侦听器，提高了性能。
4. 标记静态根节点：
   • Vue 3 在编译阶段会标记出静态根节点，这些节点不需要进行比较，可以直接跳过，减少了不必要的比较开销。
5. Patch Flag：
   • Vue 3 使用 Patch Flag 来标记节点的动态内容，这样在 diff 过程中可以快速判断出哪些节点需要进行比较，从而减少了比较的节点数量。

这些优化措施使得 Vue 3 在 diff 算法上的性能得到了显著的提升，特别是在大型应用中能够更高效地处理更新和渲染，提升了整体的性能表现。虽然 Vue 2 和 Vue 3 都引入了双端比较（双指针算法），但它们的实现细节可能有所不同。基本的双端比较思想是相似的，即从新旧两个虚拟 DOM 树的头部和尾部同时开始遍历，每次比较一对节点，直到两个指针相遇。然而，Vue 3 可能对此进行了更深层次的优化，以提高性能和效率。 Vue 3 在其源代码中进行了大量的改进和优化，包括对虚拟 DOM 的 diff 算法进行了重构和改进。因此，Vue 3 的双端比较可能会使用更高效的算法，或者采用了一些 Vue 2 中没有的新技术。例如，Vue 3 引入了 Patch Flag 来标记节点的动态内容，这可以帮助 diff 算法更快地识别出需要更新的节点，从而提高性能。 因此，尽管 Vue 2 和 Vue 3 的双端比较的基本思想是相似的，但 Vue 3 可能会在实现细节上进行了更多的改进，以提高性能和效率。

vue 和 react 里的 key

vue 和 react 里的 key 的作用是什么?

• 作用：唯一性标识、优化性能、处理动态列表

为什么不能用 Index？

• 不能使用索引（index）的原因：不具备唯一性、性能问题

用了会怎样? 如果不加 key 会怎样?

• 不加 key 的后果：性能下降、渲染问题