Vue3基础面试题
Composition API 解决了什么问题?
- 在逻辑组织和逻辑复用方面,Composition API 是优于 Options API
- 因为 Composition API 几乎是函数,会有更好的类型推断。
- Composition API 对 tree-shaking 友好,代码也更容易压缩
- Composition API 中见不到
this
的使用,减少了this
指向不明的情况 - 如果是小型组件,可以继续使用 Options API,也是十分友好的
Vue3 性能有什么提升吗?
主要有三个方面的提升
- 编译阶段
- 源码体积
- 响应式系统
编译阶段
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
来实现属性的劫持。所以针对数组不需要递归遍历,大大提升了性能。