大多数Vue团队在迁移,Vue方向面试基本必问。
响应式:Vue 2用Object.defineProperty(监听不到新增属性、数组索引赋值);Vue 3用Proxy(全拦截)。
API:Options API(data/methods/computed)→ Composition API(setup/ref/reactive)——逻辑复用更强、TS推导更好。
多根节点:Vue 3支持Fragment(template可以多个根)。
性能:编译器重写,静态提升+patch flag+tree-shaking友好——包体积小约40%,更新更快。
新增Teleport(传送门)、Suspense(异步组件)、自定义渲染器API。
对我影响最大的三点:响应式重写(Proxy可以响应新增属性和数组索引赋值,不用$set了)、Composition API(setup+ref/reactive能像React hooks那样抽可复用的composable)、编译器重写(静态提升+patch flag让每次更新派发的代码更少)。TypeScript体验从Vue 2的"能用但难受"变成Vue 3的"一等公民"——script setup+defineProps真香。迁移策略:新文件用Composition API,老Options API别动,两者共存互操作没问题。
Vue 2已于2023年12月EOL——新项目必须Vue 3。
Pinia取代Vuex成为Vue 3官方状态管理。
即答侠特别标了响应式的坑(Vue 2的$set、Proxy对Map的限制)——面试官最爱问边角。
可以,但Vue 3对集合做了特殊handler——直接Proxy Map会返回未包装的值,所以reactive()用专门的tracked collection handler包装。
@vue/composition-api插件把大部分功能反向移植到Vue 2.7+。推荐作为迁移的前置步骤。