Vue3 和 Vue2 主要区别（结合项目怎么说）

约 830 字大约 3 分钟

Vue3 Vue2 Composition API 面经

布欧-Lewyon

2026-05-05

从 Vue2 迁到 Vue3 的项目现在不少，面试官喜欢问「你为什么升」「升完爽在哪、烦在哪」。我按性能、API、生态三块记，避免只背官方 release note。

题目

Vue3 与 Vue2 的区别？

响应式底层换了

Vue2：Object.defineProperty，不能监听对象新增属性、数组下标直接赋值，所以要 $set。

Vue3：基于 Proxy，可以拦截属性的增删、数组索引和 length 变化，配合 Reflect 做依赖收集。

面试一句话：Vue3 响应式更完整，TS 推导友好，但 IE11 不支持 Proxy（官方也不维护 IE）。

API 风格：Options → Composition

Vue2 以 data、methods、computed 分块，组件一大坨选项，逻辑一多很难复用。

Vue3 推出 Composition API（setup、ref、computed、watch），同一块业务可以抽成 useXxx 函数：

// composables/usePagination.js
import { ref, computed } from 'vue'

export function usePagination(fetchFn) {
  const page = ref(1)
  const pageSize = ref(10)
  const total = ref(0)
  const list = ref([])

  async function load() {
    const res = await fetchFn({ page: page.value, size: pageSize.value })
    list.value = res.list
    total.value = res.total
  }

  const totalPage = computed(() => Math.ceil(total.value / pageSize.value))

  return { page, pageSize, total, list, totalPage, load }
}

<script setup>
import { usePagination } from '@/composables/usePagination'
import { onMounted } from 'vue'

const { page, list, load, totalPage } = usePagination(getUserList)
onMounted(load)
</script>

注意：Vue3 仍兼容 Options API，老项目可以渐进迁移，不必一夜重写。

性能与打包

编译器优化：静态提升、补丁 flag，更新时 diff 更小
支持 Tree-shaking，没用到的 API 不打进包里，createApp 按需引入
多个根节点（Fragment）、Teleport、Suspense 等内置能力更顺手

实际感受：中后台列表页、表单多的项目，Vue3 + Vite 冷启动和 HMR 通常比 Vue2 + Webpack 舒服一截（也看团队配置）。

其它常被问到的点

维度	Vue2	Vue3
入口	`new Vue()`	`createApp()`，可多应用实例
全局 API	`Vue.use`、`Vue.mixin` 污染全局	`app.use`，实例隔离
自定义事件	无 `emits` 选项，监听器算在 attrs	`defineEmits`，未声明会进 `$attrs`
v-model	默认 `value` + `input`	默认 `modelValue` + `update:modelValue`，可多 v-model
过滤器 filter	有	移除，用方法或计算属性
`$listeners`	有	合并进 `$attrs`
官方状态库	Vuex 3/4	更推荐 Pinia（也支持 Vue2）

TypeScript：Vue3 源码用 TS 重写，<script setup lang="ts"> + defineProps 泛型在项目里成熟很多。

迁移时我踩过的坑（可当实例讲）

事件名：Vue3 推荐 kebab-case 监听，emits 要提前声明，否则容易变成原生 attribute 透传。
v-model：子组件要改 modelValue / update:modelValue，老组件还在用 value / input 会对不上。
全局 API：Vue.prototype.xxx 改成 app.config.globalProperties.xxx。
第三方库：部分只支持 Vue2 的 UI 库要换版本或替代（面试提一句显得你真迁过）。

面试口述结构（建议）

底层：Proxy 响应式、性能与 Tree-shaking
开发体验：Composition API、TS、<script setup>
生态与破坏性：filter 移除、v-model 变更、Pinia、多应用实例
结合项目：我们是 xx 模块先迁、xx 仍 Options，因为…

写在最后

别把所有区别一口气背完，挑和岗位相关的（比如他们栈是 Element Plus + Vue3，就多讲 Composition 和 Pinia）。Vue2 维护期已过，新项目默认 Vue3 是常态，但能把迁移成本讲清楚，反而像干过事的人。

创作不易，转载请注明出处和作者。