Vue2 和 Vue3 最大的区别不只是 API 写法变了而是响应式底层、组件组织方式、性能优化能力都发生了升级。面试里最常问的就是Object.defineProperty和Proxy有什么区别setup/ Composition API 为什么更好Vue3 为什么性能更高Tree-shaking 是怎么减少体积的一、Vue2 和 Vue3 整体区别维度Vue2Vue3响应式实现Object.definePropertyProxyAPI 风格Options APIComposition API Options API组件逻辑组织按 data、methods、computed 分散可以按功能集中组织性能相对较弱编译和运行时都有优化Tree-shaking支持有限更适合按需打包Fragment不支持多根节点支持Teleport无支持Suspense无支持TypeScript支持一般支持更好二、响应式原理defineProperty vs ProxyVue2Object.definePropertyVue2 主要通过Object.defineProperty()劫持对象已有属性。例如const obj {} Object.defineProperty(obj, name, { get() { return Tom }, set(value) { console.log(name 被修改了, value) } })这样就可以监听obj.name JackVue2 的问题1. 只能监听已有属性例如data() { return { user: { name: Tom } } }如果后来直接新增this.user.age 18Vue2 默认无法正常监听这个新增属性。通常需要this.$set(this.user, age, 18)2. 删除属性也不能直接监听例如delete this.user.nameVue2 也不能直接感知。一般需要this.$delete(this.user, name)3. 数组监听也需要特殊处理Vue2 不能直接劫持数组索引变化因此对push pop shift unshift splice sort reverse这些方法做了额外封装。三、Vue3ProxyVue3 改成了Proxy例如const user { name: Tom } const proxy new Proxy(user, { get(target, key) { return target[key] }, set(target, key, value) { target[key] value return true } })Proxy 监听的是整个对象而不是某一个属性。所以proxy.age 18新增属性可以监听。delete proxy.name删除属性也可以监听。四、Proxy 为什么比 defineProperty 更适合 Vue3最核心区别defineProperty → 劫持对象已有属性 Proxy → 代理整个对象因此 Proxy 可以更自然地处理新增属性 删除属性 数组变化 属性访问 属性修改所以 Vue3 不再需要this.$set() this.$delete()这种额外 API。五、Options API 和 Composition APIVue2 常见写法export default { data() { return { count: 0 } }, computed: { double() { return this.count * 2 } }, methods: { add() { this.count } } }这种写法叫Options API代码按照data methods computed watch进行分类。六、Options API 的问题小组件里非常清晰。但是组件越来越复杂之后一个功能的代码可能被拆散在很多地方。例如“搜索功能”可能分布在data computed methods watch mounted另外一个“分页功能”又分散在data methods watch最后代码就会变成搜索逻辑 分页逻辑 用户逻辑 请求逻辑互相穿插。维护起来比较麻烦。七、Vue3 的 Composition APIVue3 引入 Composition API。例如import { ref, computed } from vue export default { setup() { const count ref(0) const double computed(() { return count.value * 2 }) const add () { count.value } return { count, double, add } } }这里setup()就是 Composition API 的入口之一。八、setup 是干什么的setup的核心作用在组件创建时组织响应式数据、方法、计算属性和副作用逻辑。可以在里面使用ref() reactive() computed() watch() watchEffect()例如setup() { const count ref(0) const add () { count.value } return { count, add } }模板就可以直接使用button clickadd {{ count }} /button九、Composition API 最大优势不是单纯“写法更新”而是可以按照功能组织代码。例如用户功能 ├─ 用户数据 ├─ 用户请求 ├─ 用户方法 └─ 用户监听 搜索功能 ├─ 搜索关键字 ├─ 搜索方法 └─ 搜索监听而不是全部拆成data methods computed watch对于大型组件更容易维护。十、Vue3 一定要用 Composition API 吗不是。Vue3 同样支持Options API所以你仍然可以export default { data() {}, methods: {}, computed: {} }Vue3 只是新增了 Composition API。所以更准确地说Vue2 → 主要使用 Options API Vue3 → Options API Composition API十一、Vue3 为什么性能更好Vue3 在多个方面做了优化。比较重要的有响应式系统优化 编译优化 虚拟 DOM 优化 Tree-shaking Fragment 静态提升 Patch Flag其中面试比较常见的是Tree-shaking和虚拟 DOM 编译优化。十二、什么是 Tree-shakingTree-shaking 可以简单理解成打包时把没有使用到的代码删除。例如import { ref, reactive, computed } from vue如果实际只使用ref现代打包工具会尽可能把没有使用到的部分移除。最后打包只保留真正需要的代码从而减少bundle 体积十三、为什么 Vue3 更适合 Tree-shaking因为 Vue3 很多 API 都改成了独立导出形式。例如import { ref } from vue import { computed } from vue import { watch } from vue用什么就导入什么。这样构建工具就更容易分析哪些代码使用了 哪些代码没使用然后把没用的代码去掉。十四、Fragment 是什么Vue2 一个组件模板通常需要一个根节点div h1标题/h1 p内容/p /divVue3 支持 Fragmenth1标题/h1 p内容/p不再强制额外包一层div。这样DOM 结构更干净 无意义节点更少十五、Teleport 是什么Vue3 新增Teleport可以把组件内容渲染到 DOM 的其他位置。例如弹窗Teleport tobody div classmodal 弹窗 /div /Teleport虽然代码写在当前组件里但最终 DOM 可以直接挂到body下面。很适合Modal Dialog Popover十六、Suspense 是什么Suspense主要用于处理异步组件加载状态。可以理解为异步内容还没加载好 → 显示 loading 加载完成 → 显示真正内容这也是 Vue3 增强异步组件体验的一部分。十七、Vue2 和 Vue3 响应式核心区别面试时可以直接这样回答Vue2 使用Object.defineProperty劫持对象已有属性新增和删除属性不能直接监听数组也需要额外处理。而 Vue3 使用Proxy代理整个对象因此可以更完整地监听属性读取 属性修改 属性新增 属性删除 数组变化响应式实现更加统一。十八、setup 的核心优势怎么回答可以这样答setup是 Composition API 的入口可以把同一个功能相关的数据、方法、computed、watch 集中组织在一起。相比 Vue2data methods computed watch按类型拆分代码Composition API 更适合复杂组件 逻辑复用 大型项目 TypeScript十九、Tree-shaking 面试怎么回答可以直接说Tree-shaking 是构建工具在打包时分析 ES Module 的导入导出把没有被使用的代码移除从而减小最终 bundle 体积。Vue3 API 更加模块化import { ref, computed } from vue所以更容易进行 Tree-shaking。总结Vue2 和 Vue3 最核心的区别可以压缩成三点1. 响应式升级Vue2 Object.defineProperty ↓ 监听已有属性 Vue3 Proxy ↓ 代理整个对象2. 逻辑组织升级Vue2 Options API ↓ data / methods / computed / watch Vue3 Composition API ↓ setup / ref / reactive / computed / watchComposition API 更适合按业务功能组织代码。3. 性能与构建升级Vue3 增加和强化Tree-shaking Fragment Teleport Suspense 编译优化 虚拟 DOM 优化所以 Vue3 在性能 体积 代码组织 TypeScript 大型项目维护方面整体更优秀。总结Vue3 不只是 Vue2 的语法升级而是从响应式底层、组件逻辑组织到编译和性能体系的一次整体升级。
