Vue、React、Angular 三大框架高频面试题及详细答案

Vue、React、Angular三大框架高频面试题及详细答案一、Vue面试题（高频核心）1.Vue2和Vue3的核心区别是什么？答：核心区别主要集中在底层原理、API设计、性能和工程化几个方面。第一，响应式原理不同。Vue2是基于Object.defineProperty劫持对象属性，无法监听新增、删除属性，也不能原生监听数组下标修改，所以需要$set方法弥补缺陷。Vue3改用Proxy代理整个对象，能够监听任意属性的增删、数组下标和长度变化，覆盖全场景响应式。第二，API风格差异。Vue2以Options选项式API为主，代码按照选项拆分，复杂组件逻辑分散、复用困难。Vue3支持组合式API，可按业务逻辑聚合代码，逻辑复用、抽离更加灵活，适合大型项目。第三，性能优化升级。Vue3重写了虚拟DOM，diff算法做了大量优化，增加静态标记，静态节点不会重复对比渲染；同时支持按需编译、组件按需引入，打包体积更小、渲染速度更快。第四，架构升级。Vue3采用模块化拆分，核心代码与编译器、运行时解耦，支持跨平台开发，同时更好支持TypeScript，类型推导更完善。2.Vue3组合式API相比选项式API的优势？答：首先是逻辑聚合性更强。选项式API把数据、方法、生命周期按配置项拆分，同一个业务逻辑会分散在data、methods、生命周期中，复杂页面维护成本极高。组合式API可以把一套完整的业务逻辑统一封装，代码关联性更强。其次是逻辑复用更方便。选项式API复用逻辑主要靠mixin，多个mixin容易出现命名冲突、来源不清晰、覆盖优先级混乱等问题。组合式API可通过自定义hooks抽离通用逻辑，复用清晰、无冲突，还能传递参数、返回状态。最后是适配大型项目和TS。组合式API语法更贴合函数式编程，类型推导精准，代码可维护性、可扩展性远优于选项式API，适合中大型团队协作开发。3.Vue响应式原理详细讲解答：Vue响应式核心是数据劫持+依赖收集+派发更新。Vue2中，通过Object.defineProperty对数据对象的每一个属性设置get和set方法。页面渲染时，组件会触发数据的get方法，此时会收集当前组件的渲染watcher，建立数据和视图的依赖关系。当数据被修改时，触发set方法，通知收集到的所有watcher执行更新，重新渲染视图。Vue3基于Proxy实现，直接代理整个数据对象，无需遍历每个属性。读取数据时收集依赖，修改、删除、新增数据时触发更新，解决了Vue2的响应式漏洞。同时配合effect、track、trigger三个核心方法，精准完成依赖收集和更新派发，响应式粒度更细、效率更高。4.Vue生命周期常用钩子及使用场景答：常用核心钩子分为四大阶段：1.创建阶段：beforeCreate、created。created是最常用的，此时组件实例已创建、数据和方法已挂载，但DOM还未生成，一般用于初始化接口请求、数据初始化。2.挂载阶段：beforeMount、mounted。mounted代表DOM渲染完成，页面节点已挂载，可操作DOM、初始化第三方插件、绑定DOM事件。3.更新阶段：beforeUpdate、updated。数据变化触发视图更新前执行beforeUpdate，更新完成后执行updated，可用于监听数据更新后的DOM状态。4.销毁阶段：beforeUnmount、unmounted。组件销毁前执行beforeUnmount，用于清除定时器、解绑事件、取消接口请求，防止内存泄漏；unmounted代表组件完全销毁。5.Vue中v-for和v-if为什么不建议一起使用？如何优化？答：因为Vue编译优先级中，v-for优先级高于v-if。如果两者一起写，会先循环遍历所有列表项，再根据条件判断是否渲染，哪怕列表全部不需要展示，也会完整执行一次循环，造成严重的性能浪费。优化方案：第一，优先把v-if写在v-for的外层容器上，先判断条件再循环渲染，避免无效遍历；第二，如果是列表数据筛选场景，直接通过computed计算属性过滤数据，再遍历过滤后的新数组，性能最优。6.Vue组件通信方式有哪些？答：根据组件关系分为多种方式：1.父子组件：父传子通过props，子传父通过自定义事件$emit；父组件可通过$refs获取子组件实例和方法，子组件可通过$parent访问父组件。2.跨层级/祖孙组件：通过provide/inject实现上层组件向下层任意组件穿透传值，无需逐层传递。3.任意组件：Vue2可使用事件总线EventBus，Vue3推荐自定义mitt事件库；全局状态统一用Pinia（替代Vuex），管理全局公共状态。4.兄弟组件：借助父组件中转，或直接使用全局状态、事件总线通信。二、React面试题（高频核心）1.React函数组件和类组件的区别？答：核心区别体现在语法、状态管理、生命周期、性能和使用场景上。第一，语法不同。类组件是ES6类的写法，代码冗余、结构固定；函数组件是纯函数写法，代码简洁、轻量化。第二，状态和生命周期。类组件通过this.state、this.setState管理状态，生命周期钩子单独拆分，逻辑分散。函数组件本身无状态和生命周期，依靠Hooks实现状态管理和生命周期功能，逻辑可以按业务聚合。第三，this指向问题。类组件存在this绑定丢失问题，需要手动绑定或箭头函数处理，容易出错；函数组件无this困扰，代码更稳定。第四，性能和趋势。函数组件配合Hooks更精简，渲染开销更小，是目前React官方主推的写法，新项目基本全部使用函数组件，类组件多用于老项目维护。2.ReactHooks的使用规则及常用Hooks答：Hooks有两个硬性使用规则，必须遵守。第一，只能在函数组件顶层调用，不能在循环、条件判断、嵌套函数中使用，保证调用顺序固定，否则会导致状态错乱。第二，只能在React函数组件或自定义Hooks中调用，不能在普通JS函数、类组件中使用。常用核心Hooks：1.useState：定义和更新组件状态，是最基础的Hook。2.useEffect：处理副作用，替代类组件的生命周期，可实现数据请求、事件绑定、定时器、清理副作用等功能。3.useRef：获取DOM节点、保存组件可变数据，数据更新不会触发组件重渲染。4.useMemo：缓存计算结果，避免每次渲染重复计算，优化性能。5.useCallback：缓存函数引用，防止子组件不必要的重渲染，配合React.memo使用。6.useContext：获取全局上下文，实现跨组件传值。3.useEffect依赖数组的作用，常见坑点答：依赖数组用来控制useEffect的执行时机。不传依赖数组时，组件每次渲染都会执行；传空数组时，仅在组件首次挂载时执行一次，等同于componentDidMount；传入指定依赖项时，只有依赖项发生变化才会执行。常见坑点：第一，依赖项遗漏，导致副作用数据滞后、功能异常；第二，依赖项是引用类型，地址变化会触发无效执行；第三，未清理副作用，定时器、事件监听、接口请求未取消，造成内存泄漏、重复请求。4.React虚拟DOM及diff算法原理答：虚拟DOM是对真实DOM的JS对象描述，本质是树形结构的JS对象，用来映射页面DOM结构。操作数据时，不会直接操作真实DOM，而是先修改虚拟DOM，通过对比新旧虚拟DOM的差异，只更新需要变动的真实DOM，极大减少DOM操作次数，提升页面性能。diff算法是虚拟DOM的对比策略，核心是同层对比、不跨层比较，大幅降低对比复杂度。对比流程：首先对比节点类型，类型不同直接销毁旧节点、创建新节点；类型相同则对比属性，更新差异属性；最后递归对比子节点。列表对比时通过key标记节点唯一性，精准匹配新旧节点，避免错乱复用，提升diff效率。5.React性能优化方案有哪些？答：日常开发常用的优化手段主要有：1.组件缓存：使用React.memo缓存函数组件，props不变时不重渲染；类组件使用PureComponent、shouldComponentUpdate阻止无效渲染。2.函数和计算缓存：用useCallback缓存事件函数，用useMemo缓存复杂计算结果和组件，避免重复执行。3.合理设置key：列表渲染使用唯一key，提升diff对比效率，避免节点错乱。4.清理副作用：在useEffect清理函数中清除定时器、事件监听、pending接口，防止内存泄漏。5.路由懒加载：通过React.lazy和Suspense实现组件按需加载，减少首屏打包体积。6.避免内联函数、内联对象：防止每次渲染生成新引用，导致组件无效重渲染。6.Redux核心原理及工作流程答：Redux是全局状态管理工具，核心遵循单向数据流，核心组成有Store、State、Action、Reducer。工作流程：组件触发Action（包含操作类型和载荷数据）→Action派发至Reducer→Reducer根据Action类型，基于旧State生成全新State→Store更新State→订阅State的组件感知变化并更新视图。核心特点：单一数据源、状态只读、纯函数更新，状态变化可追踪、可预测，适合管理大型项目全局公共状态。现在项目更多使用ReduxToolkit简化Redux冗余写法。三、Angular面试题（高频核心）1.Angular核心特点是什么？和Vue/React最大区别？答：Angular是一款完整、开箱即用的全框架，基于TypeScript开发，自带路由、状态管理、表单校验、HTTP请求、依赖注入等全套功能，无需额外安装第三方库，工程化、规范化极强，适合大型企业级项目、团队协作开发。和Vue、React最大的区别：Vue、React是轻量视图库，只专注视图渲染，路由、状态管理等功能需要搭配第三方库实现，自由度高、灵活度大；而Angular是重型完整框架，有严格的代码规范、目录结构和开发模式，约束性更强。同时Angular是双向绑定默认支持，Vue、React以单向数据流为主。2.Angular双向数据绑定原理（NgModel）答：Angular双向绑定是属性绑定+事件绑定的语法糖，本质不是真正的双向劫持。[(ngModel)]拆分后，是value属性绑定和input事件绑定。视图输入内容改变时，触发input事件，更新组件数据；组件数据发生变化时，通过属性绑定更新视图，从而实现数据和视图的双向同步。需要注意：NgModel依赖表单模块，使用前必须引入FormsModule，且只能在表单类元素上使用。3.Angular依赖注入是什么？作用是什么？答：依赖注入是Angular的核心设计思想，简单说就是组件不主动创建依赖的服务，由框架统一负责创建和注入。开发中我们只需要在组件构造函数中声明依赖的服务，Angular的注入器会自动实例化服务并传入组件，无需手动new创建实例。核心作用：解耦代码，将业务逻辑统一抽离到服务中，组件只负责视图展示，职责分离；服务单例复用，减少资源开销；方便单元测试，可灵活替换模拟依赖，测试成本更低。4.Angular组件生命周期常用钩子答：Angular生命周期钩子比Vue、React更细分，常用核心钩子：1.ngOnInit：组件初始化完成后执行，仅执行一次，多用于初始化数据、请求接口，是最常用的钩子。2.ngOnChanges：组件输入属性@Input发生变化时触发，可监听父组件传值变化。3.ngDoCheck：手动触发变更检测，自定义监听数据变化，弥补默认变更检测的不足。4.ngAfterViewInit：组件视图及子组件渲染完成后执行，可操作DOM、初始化第三方插件。5.ngOnDestroy：组件销毁前执行，用于取消订阅、清除定时器、解绑事件，防止内存泄漏。5.Angular变更检测机制答：变更检测是Angular用来同步组件数据和视图的机制，默认是脏检测。当页面发生异步操作（点击事件、接口请求、定时器、输入变更）后，Angular会自动触发变更检测，遍历所有组件的所有数据，对比前后数据是否变化，有变化就更新视图。默认机制全局检测，性能有一定损耗，优化方案：一是使用OnPush变更检测策略，仅在输入引用变化或组件内部事件触发时才检测；二是手动控制变更检测，按需触发，减少检测次数。6.Angular路由守卫有哪些？作用？答：路由守卫是Angular