跳到主内容

Vue3基础面试题

Composition API 解决了什么问题?

  • 在逻辑组织和逻辑复用方面,Composition API 是优于 Options API
  • 因为 Composition API 几乎是函数,会有更好的类型推断。
  • Composition API 对 tree-shaking 友好,代码也更容易压缩
  • Composition API 中见不到 this 的使用,减少了 this 指向不明的情况
  • 如果是小型组件,可以继续使用 Options API,也是十分友好的

Vue3 性能有什么提升吗?

主要有三个方面的提升

  1. 编译阶段
  2. 源码体积
  3. 响应式系统

编译阶段

vue2,每个组件都有一个 watcher 实例,会在渲染过程中收集属性依赖,当依赖改变时,通知 watcher 通知组件更新。

举个栗子 🌰

<template>
<div id="content">
<p class="text">静态文本</p>
<p class="text">静态文本</p>
<p class="text">{{ message }}</p>
<p class="text">静态文本</p>
...
<p class="text">静态文本</p>
</div>
</template>

上面的组件,里面很多节点,只有一个节点用到了 message 变量,这个就是动态节点。在 diff 过程会把静态节点也参与进去,导致不必要的计算,造成性能浪费。

vue3 则在编译阶段做了以下优化

  • diff 算法优化,增加了静态标记,减少 diff 计算
  • 静态提升,对不参与更新的元素,做静态提升,首次渲染时创建一次,后面更新时复用。
  • 事件监听缓存
  • SSR 优化

源码体积

移除掉一些不常用的 API,例如 $on$off$oncev-on 修饰符等等,配合 tree shaking,使得整体的体积小很多。

响应式系统

使用 Proxy 代替 defineProperty 来实现属性的劫持。所以针对数组不需要递归遍历,大大提升了性能。