Vue 面试题：响应式与组件设计

1. Vue 的响应式系统原理是什么？

• Vue 3 使用 Proxy 代理对象，实现读写拦截。
• 依赖收集将组件渲染函数与响应式数据关联。
• 数据变化时触发依赖的组件重新渲染。

2. Composition API 和 Options API 有何区别？

• Options API 通过 data、methods、computed 等组织逻辑。
• Composition API 通过 setup 和组合函数组织逻辑。
• Composition API 更适合逻辑复用和大型项目。

3. computed 与 watch 的区别是什么？

• computed 适合基于响应式数据计算衍生值。
• watch 适合响应数据变化执行副作用。
• computed 默认缓存，只有依赖变化才重新计算。

4. Vue 生命周期钩子有哪些？

• 创建阶段：beforeCreate、created。
• 挂载阶段：beforeMount、mounted。
• 更新阶段：beforeUpdate、updated。
• 卸载阶段：beforeUnmount、unmounted。

5. 模板与渲染函数的关系是什么？

• Vue 模板最终编译成渲染函数。
• 渲染函数更灵活，可动态创建 VNode。
• 普通开发中模板更简洁易读。

6. Vue 中如何实现组件通信？

• 父传子：props。
• 子传父：emit 事件。
• 跨级通信：provide / inject、状态管理库。
• 全局状态：Pinia、Vuex 等。

7. ref 和 reactive 有何不同？

• ref 包装基本类型或对象，返回 .value。
• reactive 直接返回响应式对象。
• 对象可使用 toRefs 将 reactive 转为多个 ref。

8. 你如何优化 Vue 应用性能？

• 使用 v-show / v-if 视情况控制渲染。
• 为列表提供稳定 key。
• 避免在模板中执行昂贵计算，使用 computed。
• 使用 defineAsyncComponent 和路由懒加载。

9. Vue Router 与动态路由有哪些常见用法？

• 使用 createRouter 定义路由表。
• 动态路由参数：/user/:id。
• 嵌套路由和导航守卫可实现权限控制。

10. 如何处理 Vue 应用中的表单、校验和状态？

• 使用 v-model 双向绑定表单数据。
• 表单校验可借助 VeeValidate、Yup 等库。
• 对复杂页面使用局部 state 和全局状态分离。