跳到主要内容

题目 25- 题目 32

25.为什么 react 需要 fiber 架构，而 Vue 却不需要？​

React 引入 Fiber 架构的主要原因是为了实现更好的异步渲染和更高效的任务调度。Fiber 架构使得 React 能够更细粒度地控制和中断渲染过程，以便更好地响应用户交互、实现懒加载等功能。Vue 在设计上采用了不同的策略，因此并不需要类似于 Fiber 的架构。

以下是一些原因解释为什么 React 选择了 Fiber 架构，而 Vue 没有类似的架构：

  1. 异步渲染和任务优先级： React 的 Fiber 架构使得实现异步渲染和任务优先级变得更加容易。这对于复杂的用户界面和大规模应用中的性能优化非常重要。React 可以通过中断和恢复渲染过程，根据任务的优先级调度渲染工作，从而更好地响应用户输入和满足实时性要求。

  2. 更好的中断和恢复机制： Fiber 架构提供了一种更灵活的中断和恢复机制，允许 React 在渲染过程中暂停、中断，然后根据优先级恢复。这使得 React 能够更好地处理复杂的渲染逻辑，并在需要时放弃低优先级的工作。

  3. 增量更新： Fiber 允许 React 实现增量更新，即只更新变化的部分而不必重新渲染整个组件树。这对于提高渲染性能和减少不必要的工作非常有帮助。

Vue 在设计上采用了一种不同的响应式系统和渲染机制，不需要像 React 那样进行复杂的中断和任务调度。Vue 的设计目标可能更注重简洁性和开发体验，而 React 的目标之一是提供更灵活和强大的性能优化工具。每个框架在设计上都有权衡和取舍，选择适合其目标和使用场景的策略。

26. 如何打破 scope 对样式隔离的限制？​

在 Vue 中，作用域样式（Scoped Styles）的目的是将样式限制在单个组件的作用域中，以确保样式不会被其他组件影响。然而，有时候你可能需要打破作用域限制，让样式能够在组件外部生效。以下是几种打破作用域限制的方式：

  1. 使用 /deep/ 或 ::v-deep：

    • 在样式中使用 /deep/ 或 ::v-deep（Vue 2.x 中的别名）选择器可以覆盖作用域限制。
    • 这样可以使得样式选择器的范围扩大到所有子组件，甚至是整个应用程序的 DOM 树。
    • 例如，使用 .container /deep/ .child 可以选择 .child 类名的元素，即使 .child 是在另一个组件中定义的。

  2. 使用全局样式：

    • 如果你希望一些样式在多个组件之间共享，并且不受作用域限制，可以使用全局样式。
    • 在 Vue 单文件组件中，可以在 <style> 标签外部或使用 @import 引入全局样式文件，这样样式将不受作用域限制。

使用类名继承：

如果你希望某些样式继承自父组件或特定组件的样式，可以使用类名继承。 在子组件的 <style> 标签中使用 @extend 来继承父组件或其他组件的样式，这样可以打破作用域限制。

27.Vue 是怎么把 template 模版编译成 render 函数的？​

  1. 解析模板：首先，Vue 会解析模板字符串，将其转化为抽象语法树（AST）。AST 是一个表示模板结构和内容的树状数据结构。

  2. 优化 AST：接下来，Vue 会对 AST 进行优化处理，以提升渲染性能。这包括标记静态节点、静态属性和静态文本等。

  3. 生成渲染函数：利用优化后的 AST，Vue 会生成渲染函数。渲染函数是一个 JavaScript 函数，它接收一个上下文对象作为参数，并返回一个虚拟 DOM 树（VNode）。

  4. 渲染虚拟 DOM：当执行渲染函数时，它将生成一个新的虚拟 DOM 树。如果之前已经存在真实的 DOM 树，Vue 将通过比较新旧 VNode 来计算最小的更新操作并应用在真实 DOM 上，从而进行局部更新，提高效率。

  5. 生成 DOM：最后，Vue 将根据最新的 VNode 生成真实的 DOM 元素，并将其插入到页面中，完成渲染。

28.v-model 的原理是什么样的？​

  1. 在模板中，我们可以使用 v-model 指令来绑定一个变量到表单元素（或组件）上，例如：<input v-model="message">。

  2. Vue 解析模板时，会将 v-model 指令转换成合适的属性和事件绑定。对于大多数表单元素，它会将 value 属性与输入框的当前值进行绑定，并监听 input 事件来实时更新绑定的数据。

  3. 当用户在输入框中键入或选择内容时，触发 input 事件。Vue 会捕获该事件并更新绑定的数据，以及根据数据的变化重新渲染视图。

  4. 同样地，如果在表单元素上使用 v-model 的 lazy 修饰符，Vue 会监听 change 事件而不是 input 事件。这样，只有当用户完成输入并触发 change 事件时，才会更新绑定的数据。

v-model 指令实现双向绑定的原理是通过监听表单元素的输入事件（如 input 或 change），将用户的输入同步到 Vue 实例中的属性，并在属性值变化时重新渲染视图。这使得我们可以轻松地将表单数据与 Vue 实例的状态保持同步，消除了手动监听和更新的冗余代码。

29.说说 Vuex 的原理​

  1. State（状态）：应用程序的数据存储在一个单一的状态树中，即 state。这个状态树是响应式的，当状态发生变化时，相关的组件将自动更新。

  2. Getter（获取器）：getter 允许从 state 中派生出一些衍生的状态，类似于计算属性。可以使用 getter 来对 state 进行处理和计算，并将其暴露给组件使用。

  3. Mutation（突变）：mutation 是用于修改 state 的唯一途径。它定义了一些操作函数，每个函数都有一个特定的名称（称为 type），并且可以在这些函数中改变 state 的值。mutation 必须是同步的，以确保状态变更是可追踪的。

  4. Action（动作）：action 用于处理异步操作和复杂的业务逻辑。类似于 mutation，但 action 可以包含异步操作，可以在 action 中触发多个 mutation，也可以在 action 中调用其他 action。

  5. Module（模块）：为了更好地组织和拆分大型的应用程序，Vuex 允许将 state、getter、mutation 和 action 划分为模块。每个模块都有自己的 state、getter、mutation 和 action，并且可以被嵌套和组合。

30.React 和 Vue 在技术层面有哪些区别？​

组件化方式不同：React 是基于组件实现的，组件包含了状态和行为，所有组件共享一个状态树。Vue 也是基于组件实现的，但是每个组件都有自己的状态，并且可以很容易地将数据和行为绑定在一起。

  • 数据驱动方式不同：React 使用单向数据流来管理数据，即从父组件到子组件的传递，所以 React 中组件之间的数据交互相对更加复杂。Vue 则使用双向数据绑定来管理数据，使得组件之间的数据交互更加简洁。

  • 模板语法不同：React 使用 JSX 语法，将 HTML 和 JavaScript 结合在一起，使得编写组件更加直观和灵活。Vue 则使用模板语法，并且支持模板内的表达式和指令，使得编写组件具有更高的可读性和可维护性。

  • 生命周期不同：React 组件的生命周期分为三个阶段：初始化、更新和卸载。Vue 组件的生命周期分为八个阶段：创建、挂载、更新、销毁等。

  • 状态管理方式不同：React 使用 Redux 或者 MobX 来管理应用程序的状态。Vue 则提供了自己的状态管理库 Vuex，可以更方便地管理组件之间的共享状态。

  • 性能优化方式不同：React 使用虚拟 DOM 技术来实现高效的渲染性能，可以减少每次渲染时需要操作真实 DOM 的次数。Vue 则使用模板编译和响应式系统来实现高效的渲染性能，并且还提供了一些优化技术，例如懒加载和缓存等。

31. Vue 模板是怎么解析的​

在 Vue 中，render 函数的生成过程涉及模板编译，它将.vue 文件中的模板转换为浏览器可识别的代码。这个过程主要包括三个步骤：

  1. 模板解析：使用正则等方法提取模板中的原生 HTML 和非原生 HTML，如绑定的属性、事件、指令等，并解析成抽象语法树（AST）。
  2. 优化：遍历 AST，找出其中的静态节点和静态根节点，并添加标记。
  3. 代码生成：根据 AST 生成渲染函数 render。
  4. 此外，Vue 还支持自定义 render 函数，这种方式可以跳过模板编译的过程，直接生成渲染函数。自定义 render 函数的优先级高于模板编译生成的 render 函数。

32.说下 Vite 的原理​

Vite 是一个基于 ESbuild 和 Rollup 的新一代前端构建工具，它旨在提供极致的开发体验。Vite 的工作原理包括依赖预构建、按需加载和文件系统缓存等，这些特性使得 Vite 在开发环境中能够快速启动和响应。Vite 的主要特点包括：

  1. 快速启动：Vite 利用浏览器原生的 ES Module 解析能力，直接提供开发环境源码，无需等待整个应用的构建。
  2. 按需编译：Vite 只在浏览器请求相关模块时进行编译，从而实现真正的按需加载。
  3. 依赖预构建：Vite 使用 esbuild 对项目依赖进行预构建，以提高编译速度。
  4. 缓存优化：Vite 利用 HTTP 缓存和文件系统缓存来优化性能。
  5. 生产环境集成：Vite 集成 Rollup 进行生产环境打包，提供成熟的插件机制。
  6. 高度集成：Vite 提供了开箱即用的配置，简化了开发流程。
  7. 支持多种框架：Vite 不仅支持 Vue，也支持 React 等其他框架。
  8. 内置 SSR 支持：Vite 内置了服务端渲染支持。
  9. TypeScript 支持：Vite 原生支持 TypeScript。

Vite 与 Webpack 的主要区别在于 Vite 更注重开发环境的性能，而 Webpack 则提供了更丰富的配置和更灵活的构建流程。尽管 Vite 在生产环境中使用 Rollup 打包，但它的开发环境体验已经足够强大，适合大多数前端开发需求。

Loading Comments...