前端开发面试题总结-vue3框架篇

Vue3高频问答

一、vue2/vue3中常用的构建工具和脚手架分别是什么? 有什么区别?

● vue2中常用的构建工具和脚手架: webpack + vue-cli
● vue3中常用的构建工具和脚手架: vite + create-vue

webpack和vite的区别

总结起来:
Webpack是⼀个功能强⼤且灵活的静态模块打包⼯具，适⽤于⼤型复杂项⽬，但构建速度较慢。
Vite是⼀种基于原⽣ES模块的开发⼯具，提供了快速的开发体验和较快的构建速度， 适⽤于中⼩型项⽬和快速原型开发。在选择使⽤时，可以根据项⽬需求和特点进⾏评估和选择。

追问1: 何为插件(Plugin)？
专注处理在编译过程中的某个特定的任务的功能模块，可以称为插件。

二、请说一说vue2和vue3的区别？

1. 响应式原理
   ● Vue2：通过 Object.defineProperty 劫持对象属性的 getter/setter，无法直接监听新增属性和数组下标变化（需用 Vue.set）。
   ● Vue3：改用 Proxy 代理整个对象，完美监听所有属性（包括新增/删除）和数组变化，性能更好且代码更简洁。
2. 代码组织方式
   ● Vue2（Options API）：逻辑分散在 data、methods、computed 等选项中，复杂组件代码难维护。
   ● Vue3（Composition API）：用 setup 函数集中组织逻辑，类似 React Hooks，相同功能代码可聚合，复用性更强（自定义 Hook）。
3. 性能优化
   ● 虚拟 DOM 优化：Vue3 编译时标记静态节点，跳过比对（静态提升），减少渲染开销。
   ● Tree-shaking：按需引入 API，打包体积更小（如未用 v-model 则不打包相关代码）。
4. 新特性
   ● Fragment：支持组件多根节点（Vue2 必须单根）。
   ● Teleport：将组件渲染到任意 DOM 位置（如弹窗）。
   ● Suspense：异步组件加载状态管理（类似 React）。
5. TypeScript 支持
   ● Vue3 源码用 TypeScript 重写，提供完整类型推导，开发体验更友好。
6. 生命周期变化
   ● beforeCreate 和 created 被 setup 替代，其他钩子名前加 on（如 onMounted）。
   总结：
   Vue3 核心升级在 响应式（Proxy）、代码组织（Composition API） 和 性能优化，同时引入新特性（Fragment/Teleport）和更好 TypeScript 支持，适合复杂项目开发。

三、请说一说vue2和vue3响应式原理的区别？

一、底层实现机制

1. Vue2：基于 Object.defineProperty
   ○ 数据劫持：通过递归遍历对象属性，为每个属性添加 getter/setter 监听数据变化。
   ○ 局限性：
   ■ 无法检测对象新增/删除属性（需用 Vue.set/Vue.delete）。
   ■ 数组需重写方法（如 push、splice）才能触发更新。
2. Vue3：基于 Proxy
   ○ 代理整个对象：通过 Proxy 拦截对象的任意操作（包括属性增删、数组索引修改）。
   ○ 按需响应：仅在属性被访问时递归代理深层对象（性能更优）。
   二、性能优化
3. 依赖收集：
   ○ Vue2：初始化时递归遍历所有属性，全量劫持，性能消耗大。
   ○ Vue3：通过 Proxy 懒代理，仅在属性被访问时建立依赖，减少递归开销。
4. 数组处理：
   ○ Vue2：需重写7种数组方法（如 push、pop），无法直接通过索引修改。
   ○ Vue3：直接通过索引修改或修改数组长度（arr[0] = 1）即可触发响应。
   三、功能扩展
5. 动态属性支持：
   ○ Vue2：新增属性需手动调用 Vue.set，否则无法响应。
   ○ Vue3：支持动态增删属性（obj.newProp = value），无需额外API。
6. API 设计：
   ○ Vue3引入 ref 和 reactive：
   ■ ref 处理基本类型（如 number、string），通过 .value 访问。
   ■ reactive 代理对象，支持深层嵌套属性响应。

面试高频追问：为什么Vue3改用Proxy？
○ 解决Vue2无法监听动态属性/数组索引的问题，且减少递归性能损耗。
2. Vue3的响应式API如何选择（ref vs reactive）？
○ 基本类型用 ref，对象/数组用 reactive；ref 内部通过 reactive 包装对象实现。
3. Vue3如何优化依赖收集？
○ 通过 WeakMap 建立三级依赖关系（对象→属性→副作用），实现精准更新。

四、vue3 如何定义响应式数据?

Vue3 通过 ref 和 reactive 定义响应式数据：
1.ref：处理基本类型（如 string/number），通过 .value 读写。

const count = ref(0);
count.value++; 

2.reactive：处理对象/数组，直接访问属性。

const state = reactive({ name: 'Vue' });
state.name = 'Vue3'; 

3.解构保持响应性：用 toRefs 解构 reactive 对象：

const { name } = toRefs(state);

ref和reactive的区别?
● ref：支持所有类型，通过 .value 操作数据（基本类型直接响应，对象内部自动转 reactive）。
● reactive：仅支持对象/数组，直接操作属性。
● ref：必须通过 .value 读写数据。reactive：直接访问属性。
● reactive 对象解构会丢失响应性，需用 toRefs 包裹, ref 解构后仍需通过 .value 操作。
建议:
● 简单值用 ref，复杂对象用 reactive；
● 需要灵活传递响应性变量时，优先 ref（如组合式函数返回值）。

五、说一说你对vue3中的setup函数?

● setup 是 Vue3 组合式 API 的入口函数，替代 Vue2 的 data/methods/生命周期 等选项，集中定义响应式数据、方法、逻辑。
● 在组件实例创建前执行，早于 beforeCreate 生命周期，此时无法访问 this。
●在实际开发中都是用setup语法糖

六、说一说vue3中的路由和vue2中的区别?

● 路由实例创建方式
○ Vue2：通过 new VueRouter({ mode: ‘history’, routes }) 创建
○ Vue3：使用 createRouter + 明确的路由模式函数（如 createWebHistory）
● 路由 API 的 Composition 支持
○ Vue3：在 setup 中使用 useRouter/useRoute 替代 this.$router/this.$route
○ Vue2：通过组件实例的 this 访问路由对象
● 导航守卫的 next 行为变更
○ Vue2：必须显式调用 next() 控制跳转
○ Vue3：next 变为可选，可通过返回值控制
● 路由匹配规则调整
○ Vue3：废弃  通配符，改用 /:pathMatch(.)* 捕获 404 路由4
● 移除的 API
○ 废弃 router.app（改用 router.currentRoute.value 获取当前路由）；
○ 移除 router.match 方法；
○ 部分过渡类名变更（如 .router-link-active 保留，但行为微调）。