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，$once，v-on 修饰符等等，配合 tree shaking，使得整体的体积小很多。

响应式系统

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