2026年前端工程师Vuejs与React面试题及项目实战案例含答案

2026年前端工程师Vue.js与React面试题及项目实战案例含答案一、单选题（共10题，每题2分，合计20分）1.在Vue.js3中，以下哪个选项是CompositionAPI的推荐用法？A.与OptionsAPI混合使用B.完全替代OptionsAPIC.仅用于计算属性D.仅用于组件生命周期钩子2.React中，以下哪个钩子用于在组件卸载时执行清理操作？A.useEffect()B.useLayoutEffect()C.useState()D.useContext()3.Vue.js中，用于监听组件属性变化的选项是？A.watchB.watchEffectC.computedD.observer4.React中，以下哪个概念用于避免不必要的渲染？A.PureComponentB.React.memoC.shouldComponentUpdateD.React.PureComponent5.Vue.js中，动态组件的语法是？A.<component:is="value"/>B.<componentis="value"/>C.<vue:is="value"/>D.<dynamic-component:is="value"/>6.React中，以下哪个方法用于设置组件的初始状态？A.constructor()B.getDerivedStateFromProps()C.render()D.componentDidMount()7.Vue.js中，用于创建响应式数据的函数是？A.reactive()B.ref()C.toRefs()D.readonly()8.React中，以下哪个钩子用于处理组件的副作用？A.useState()B.useReducer()C.useEffect()D.useContext()9.Vue.js中，用于定义组件间通信的选项是？A.provide/injectB.props/eventsC.v-model/v-onD.ref/forward10.React中，以下哪个方法用于更新组件状态？A.this.setState()B.this.updateState()C.this.renderState()D.this.applyState()二、多选题（共5题，每题3分，合计15分）1.Vue.js3的CompositionAPI包含哪些核心函数？A.ref()B.reactive()C.computed()D.watch()E.onMounted()2.React中，以下哪些钩子可以用于组件的副作用处理？A.useEffect()B.useLayoutEffect()C.useMemo()D.useReducer()E.useContext()3.Vue.js中，以下哪些属于响应式系统的特性？A.数据劫持B.依赖收集C.触发更新D.深度观察E.批量更新4.React中，以下哪些方法可以用于性能优化？A.React.memo()B.PureComponentC.shouldComponentUpdate()D.lazyloadingE.codesplitting5.Vue.js中，以下哪些属于组件通信方式？A.props/eventsB.provide/injectC.VuexD.VuexModuleE.ref/forward三、判断题（共10题，每题1分，合计10分）1.Vue.js2和Vue.js3的OptionsAPI是完全兼容的。（）2.ReactHooks可以在函数组件中实现类组件的所有功能。（）3.Vue.js中的计算属性是基于响应式数据的。（）4.React中的contextAPI可以跨组件传递数据。（）5.Vue.js中的watcher是响应式系统的核心机制之一。（）6.React中的useCallback钩子可以缓存函数实例。（）7.Vue.js中的v-model可以用于自定义组件。（）8.React中的PureComponent只适用于类组件。（）9.Vue.js3的CompositionAPI可以与OptionsAPI混合使用。（）10.React中的useEffect钩子默认在组件挂载后执行。（）四、简答题（共5题，每题5分，合计25分）1.简述Vue.js3的CompositionAPI相比OptionsAPI的优势。2.解释React中的useContext钩子的工作原理。3.描述Vue.js中组件通信的几种主要方式及其适用场景。4.说明React中shouldComponentUpdate方法的用途及优化建议。5.比较Vue.js和React在状态管理方面的主要差异。五、代码填空题（共5题，每题4分，合计20分）1.在Vue.js3中，使用CompositionAPI创建一个响应式引用的代码是：`ref()`。2.在React中，使用useState钩子创建一个计数器状态并实现增加功能的代码是：jsxconst[count,setCount]=useState(0);return<buttononClick={()=>setCount(count+1)}>增加</button>;3.在Vue.js中，使用v-for指令渲染一个数组列表的代码是：html<ul><liv-for="iteminlist":key="item.id">{{}}</li></ul>4.在React中，使用useEffect钩子监听props变化的代码是：jsxuseEffect(()=>{//处理props变化},[prop1,prop2]);5.在Vue.js中，使用v-model实现输入框与数据双向绑定的代码是：html<inputv-model="dataValue"/>六、代码编写题（共3题，每题10分，合计30分）1.编写一个Vue.js3组件，实现以下功能：-使用CompositionAPI创建一个计数器状态-提供增加和减少按钮-计数器值变化时显示提示信息html<template><div><p>计数器：{{count}}</p><button@click="increment">增加</button><button@click="decrement">减少</button><pv-if="message">{{message}}</p></div></template><script>import{ref,computed}from'vue';exportdefault{setup(){constcount=ref(0);constmessage=ref('');constincrement=()=>{count.value++;message.value='计数器增加了';setTimeout(()=>{message.value='';},2000);};constdecrement=()=>{count.value--;message.value='计数器减少了';setTimeout(()=>{message.value='';},2000);};return{count,message,increment,decrement};}};</script>2.编写一个React组件，实现以下功能：-使用useState钩子创建一个输入框状态-实现实时搜索功能，当输入内容变化时显示匹配的数据-使用React.memo优化组件性能jsximportReact,{useState,useMemo}from'react';constSearchComponent=React.memo(({data})=>{const[inputValue,setInputValue]=useState('');consthandleChange=(e)=>{setInputValue(e.target.value);};constfilteredData=useMemo(()=>{returndata.filter(item=>item.toLowerCase().includes(inputValue.toLowerCase()));},[inputValue,data]);return(<div><inputtype="text"value={inputValue}onChange={handleChange}/><ul>{filteredData.map((item,index)=>(<likey={index}>{item}</li>))}</ul></div>);});constApp=()=>{constdata=['Apple','Banana','Cherry','Date','Elderberry'];return<SearchComponentdata={data}/>;};exportdefaultApp;3.编写一个Vue.js3组件，实现以下功能：-使用v-for指令渲染一个商品列表-使用v-model实现购物车选择功能-计算购物车中商品总数和总价html<template><div><h2>商品列表</h2><ul><liv-for="iteminproducts":key="item.id"><inputtype="checkbox":value="item.id"v-model="selectedIds"/>{{}}-￥{{item.price}}</li></ul><div><p>选中商品数：{{totalCount}}</p><p>总价：￥{{totalPrice}}</p></div></div></template><script>import{ref,computed}from'vue';exportdefault{setup(){constproducts=ref([{id:1,name:'苹果',price:5},{id:2,name:'香蕉',price:3},{id:3,name:'橙子',price:4},{id:4,name:'草莓',price:8}]);constselectedIds=ref([]);consttotalCount=computed(()=>{returnselectedIds.value.length;});consttotalPrice=computed(()=>{returnselectedIds.value.reduce((sum,id)=>{constproduct=products.value.find(item=>item.id===id);returnsum+(product?product.price:0);},0);});return{products,selectedIds,totalCount,totalPrice};}};</script>答案及解析一、单选题答案1.B-解析：Vue.js3推荐完全使用CompositionAPI替代OptionsAPI，提供更灵活的代码组织方式。2.A-解析：useEffect的第二个参数为空数组时，只在组件挂载时执行；带依赖时用于监听变化；若为空则会在卸载时执行清理操作。3.A-解析：watch是Vue.js中专门用于监听组件属性变化的选项，可以深度监听。4.B-解析：React.memo是高阶组件，用于对纯组件进行性能优化，避免不必要的渲染。5.A-解析：Vue.js中动态组件的语法是<component:is="value"/>，可以动态切换组件。6.A-解析：constructor是React类组件中设置初始状态的标准方法。7.A-解析：reactive是Vue.js3中创建响应式对象的函数，返回一个响应式对象。8.C-解析：useEffect是React中处理组件副作用的钩子，用于执行数据获取、设置订阅等操作。9.A-解析：provide/inject是Vue.js中实现跨组件通信的机制，可以在任意层级组件间传递数据。10.A-解析：this.setState是React类组件中更新组件状态的标准方法。二、多选题答案1.ABCD-解析：Vue.js3的CompositionAPI包含ref、reactive、computed、watch等核心函数，以及onMounted等生命周期钩子。2.ABD-解析：useEffect、useLayoutEffect、useReducer都可以用于处理组件副作用，useMemo用于缓存计算结果，useContext用于数据共享。3.ABCDE-解析：Vue.js的响应式系统包含数据劫持、依赖收集、触发更新、深度观察和批量更新等特性。4.ABCD-解析：React.memo、PureComponent、shouldComponentUpdate和lazyloading都是React中常用的性能优化方法，codesplitting虽然重要但属于路由或打包优化范畴。5.ABC-解析：props/events、provide/inject是Vue.js的组件通信方式，Vuex是状态管理库，ref/forward不是组件通信方式。三、判断题答案1.×-解析：Vue.js3的CompositionAPI与OptionsAPI不兼容，需要单独使用或逐步迁移。2.√-解析：ReactHooks可以覆盖类组件的所有功能，实现函数式组件的全部特性。3.√-解析：Vue.js的计算属性是基于响应式数据的，会自动重新计算当依赖变化时。4.√-解析：React的contextAPI可以实现跨组件数据传递，无需通过所有层级。5.√-解析：Vue.js的watcher是响应式系统的核心机制，负责数据变化监听和更新。6.√-解析：useCallback会返回缓存的函数实例，避免不必要的重新渲染。7.√-解析：Vue.js的v-model可以用于自定义组件，实现双向绑定。8.√-解析：PureComponent只适用于类组件，通过shouldComponentUpdate进行性能优化。9.×-解析：Vue.js3的CompositionAPI建议单独使用，不建议与OptionsAPI混合使用。10.√-解析：React中的useEffect钩子默认在组件挂载后执行，可以通过第二个参数控制执行时机。四、简答题答案1.Vue.js3的CompositionAPI相比OptionsAPI的优势：-更灵活的代码组织：可以按逻辑组织相关功能，而不是按选项组织-更好的可重用性：函数式组件更容易重用-更好的类型支持：与TypeScript结合更友好-更清晰的逻辑分离：可以更清晰地分离不同类型的状态和行为-更好的性能：更细粒度的依赖追踪，减少不必要的更新2.React中的useContext钩子工作原理：-useContext接收一个context对象，返回该context的当前值-React会自动跟踪组件何时需要重新渲染context-当context值变化时，所有消费该context的组件都会重新渲染-通过context可以避免propsdrilling，实现跨组件数据传递3.Vue.js中组件通信的几种主要方式及其适用场景：-props/events：适用于父子组件通信，父向子传递数据通过props，子向父通过events-provide/inject：适用于跨层级组件通信，适合深层嵌套的组件树-Vuex：适用于大型应用的全局状态管理，适合复杂的状态逻辑-ref/forward：适用于组件嵌套时的直接引用，适合需要精确控制子组件的情况-provide/inject适合深层组件通信，props/events适合直接父子通信4.React中shouldComponentUpdate方法的用途及优化建议：-用途：控制组件是否需要重新渲染，减少不必要的渲染，提高性能-优化建议：-对于简单组件，使用React.memo或PureComponent-对于复杂组件，可以实现shouldComponentUpdate进行智能比较-比较时避免直接引用this.state或ps，使用深比较或自定义比较函数-考虑使用useMemo或useCallback缓存计算结果5.Vue.js和React在状态管理方面的主要差异：-Vue.js：原生支持Vuex进行全局状态管理