Vue面试集锦

南华秋水007
80 阅读6分钟

问题1：react和vue的主要区别？

1、设计理念和核心思想

  • React：
    • 函数式编程：React强调函数式编程，将UI视为状态的纯函数。组件可以是无状态的函数组件，也可以是有状态的类组件；
    • 单向数据流：数据从父组件流向子组件，通过props传递。React提倡不可变数据，这有助于理解和调试应用；
  • Vue：
    • 渐进式框架：Vue设计为渐进式，开发者可以逐步引入框架的特性。可以只使用Vue的核心库，也可以使用完整的生态系统；
    • 双向数据绑定：Vue通过v-model实现了双向数据绑定，这使得表单处理和数据同步更加方便；

2、组件化

  • React：
    • JSX语法：React使用JSX语法，将HTML嵌入到JavaScript中。JSX本质上是语法糖，允许开发者在JavaScript中编写类似HTML的代码；
    • 组件复用：React组件是高度可复用的，可以通过props定制化。每个组件都是独立的，彼此之间没有强依赖；组件复用的粒度更小（函数级）
  • Vue
    • 单文件组件(SFC)：Vue使用单文件组件，将模板（HTML）、逻辑（JavaScript）和样式（CSS）封装在一个文件中；
    • 模板语法：Vue的模板语法更接近于传统HTML，开发者可以很容易地上手；

3、状态管理不同

  • React
    • 依赖外部状态管理库：React本身不包含全局状态管理，需要借助外部库如Redux，MobX来管理应用状态；
    • ContextAPI：React提供了ContextAPI，可以在不使用Redux的情况下实现简单的全局状态管理；
  • Vue
    • 内置了状态管理：Vue内置了Vuex作为状态管理解决方案。Vuex和Vue的响应式系统紧密集合，提供了更为一致的状态管理模式。

4、性能优化方面

  • React：
    • 虚拟DOM：React通过虚拟DOM进行高效的DOM更新。虚拟DOM是一个轻量级的JavaScript对象，用于表示真实DOM的结构；
    • 高效的diff算法：React使用高效的diff算法比较新旧虚拟DOM树，最小化真实DOM的更新次数；
  • Vue
    • 虚拟DOM和响应式系统：Vue也使用虚拟DOM，并且更注重细粒度的响应式系统。Vue的响应式系统基于依赖追踪，能够更精细地进行数据更新；
    • 模板编译优化：Vue在编译模板时会进行优化，生成高效的渲染函数；
      • 使用静态提升：Vue在编译时会自动识别静态内容，并将这些内容提升到渲染函数的外部。这意味着静态内容（如：文本、HTML元素等）只会被创建一次，并在每次组件重新渲染时重用；
      • 避免不必要的计算属性：计算属性是基于它们的响应式依赖进行缓存的。如果计算属性依赖于多个响应式数据，而这些数据在组件的多次渲染中很少改变，那么这个计算属性就会被缓存，从而避免不必要的计算；
      • 使用v-once指令：如果一个元素或组件的内容在组件的生命周期内不会改变，可以使用v-once指定，高速Vue只渲染该元素/组件一次，之后的渲染将跳过这部分；
      • 避免在模板中使用大数组或对象直接渲染：如果需要在模板中展开大数组或对象。可以使用计算属性预先处理这些数据，例如将大数组分页或者过滤后再渲染；
      • 使用v-show而非v-if在条件渲染时频繁切换
      • 优化大型列表的渲染性能：对于大型列表，使用 v-for 时可以结合 key 和虚拟滚动库（如：vue-virtual-scroll-list）来提高性能。虚拟滚动只渲染可视区域内的元素，从而减少DOM操作和内存消耗；
      • 减少全局响应式数据的数量和复杂性：全局响应式数据（如：Vuex中的状态）应该尽可能地保持简单和专注。过多的全局状态和复杂的响应式依赖链会降低应用的性能。尽量将状态分割为更小的模块，并优化它们的交互方式。

5、学习曲线

  • React
    • JavaScript高级特性：React要求开发者掌握较多的JavaScript高级特性，如ES6+、函数式编程等；
    • 生态系统复杂：React有庞大的生态系统，开发者需要学习和配置多个工具，如Webpack、Babel等
  • Vue
    • 学习曲线平缓：Vue的设计更加直观，模板语法接近HTML，适合初学者
    • 渐进式引入：Vue可以渐进式引入，开发者可以从简单的模板语法开始，逐步学习Vue的高级特性；

问题2：vue中的虚拟dom是如何工作的？

1、什么是虚拟DOM？

虚拟DOM是一种在内存中表示真实DOM结构的数据结构。它是一个轻量级的JavaScript对象，包含了真实DOM节点的描述，例如标签名、属性、子节点等；

2、虚拟DOM的作用

虚拟DOM的主要目的是减少直接操作真实DOM的开销，因为直接操作真实DOM性能开销很大。通过在内存中构建虚拟DOM树，vue可以比较新旧虚拟DOM树之间的差异，然后只对实际DOM进行必要的更新，而不是整个页面或组件的重新渲染。

3、Vue中虚拟DOM的工作原理

1）渲染函数和模板编译

在Vue中可以使用模板（template）或渲染函数（render function）来定义组件的结构。当使用模板时，Vue会自动将其编译成渲染函数。渲染函数返回一个虚拟节点（VNode），这个节点包含了组件的描述信息；

2）初次渲染

当组件初次渲染时，Vue会将渲染返回的虚拟节点转换为真实DOM节点，并插入到实际DOM中。这个过程通过 createElement 方法完成，它会根据虚拟节点的描述创建真实的DOM元素；

3）更新过程

当组件的数据发生变化时，Vue会触发重新渲染过程。具体过程如下：

  • 重新渲染：新的数据会触发组件的渲染函数重新执行，生成新的虚拟DOM树；
  • diff比较：Vue使用diff算法来比较新旧虚拟DOM树的差异。此过程中，它会识别哪些元素被添加、删除或更改了；
  • 最小化更新：基于diff比对结果，Vue会计算出最少的更新操作，然后只对这些必要部分进行真实DOM的更新，而不是整个树的重绘；

问题4：vue和react中的key有什么作用？

1、帮助识别元素和组件，确保高效更新

2、优化渲染性能：通过提供key属性，框架可以更高效地执行差分算法，从而减少不必要的DOM操作，提高应用的性能；

3、常见误区：

1）使用随机值：很多开发者通过Math.random() 或 Date.now() 生成的值作为key， 这会导致每次渲染时key都不同，失去了优化的效果；

2）使用数组索引：数组索引在数据变动时可能会导致错误的更新；

avatar
文章
阅读
粉丝