2026年前端工程師Vue.js與React面試題及項目實戰(zhàn)案例含答案一、單選題（共10題，每題2分，合計20分）1.在Vue.js3中，以下哪個選項是CompositionAPI的推薦用法？A.與OptionsAPI混合使用B.完全替代OptionsAPIC.僅用于計算屬性D.僅用于組件生命周期鉤子2.React中，以下哪個鉤子用于在組件卸載時執(zhí)行清理操作？A.useEffect()B.useLayoutEffect()C.useState()D.useContext()3.Vue.js中，用于監(jiān)聽組件屬性變化的選項是？A.watchB.watchEffectC.computedD.observer4.React中，以下哪個概念用于避免不必要的渲染？A.PureComponentB.React.memoC.shouldComponentUpdateD.React.PureComponent5.Vue.js中，動態(tài)組件的語法是？A.<component:is="value"/>B.<componentis="value"/>C.<vue:is="value"/>D.<dynamic-component:is="value"/>6.React中，以下哪個方法用于設置組件的初始狀態(tài)？A.constructor()B.getDerivedStateFromProps()C.render()D.componentDidMount()7.Vue.js中，用于創(chuàng)建響應式數(shù)據(jù)的函數(shù)是？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中，以下哪個方法用于更新組件狀態(tài)？A.this.setState()B.this.updateState()C.this.renderState()D.this.applyState()二、多選題（共5題，每題3分，合計15分）1.Vue.js3的CompositionAPI包含哪些核心函數(shù)？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中，以下哪些屬于響應式系統(tǒng)的特性？A.數(shù)據(jù)劫持B.依賴收集C.觸發(fā)更新D.深度觀察E.批量更新4.React中，以下哪些方法可以用于性能優(yōu)化？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可以在函數(shù)組件中實現(xiàn)類組件的所有功能。（）3.Vue.js中的計算屬性是基于響應式數(shù)據(jù)的。（）4.React中的contextAPI可以跨組件傳遞數(shù)據(jù)。（）5.Vue.js中的watcher是響應式系統(tǒng)的核心機制之一。（）6.React中的useCallback鉤子可以緩存函數(shù)實例。（）7.Vue.js中的v-model可以用于自定義組件。（）8.React中的PureComponent只適用于類組件。（）9.Vue.js3的CompositionAPI可以與OptionsAPI混合使用。（）10.React中的useEffect鉤子默認在組件掛載后執(zhí)行。（）四、簡答題（共5題，每題5分，合計25分）1.簡述Vue.js3的CompositionAPI相比OptionsAPI的優(yōu)勢。2.解釋React中的useContext鉤子的工作原理。3.描述Vue.js中組件通信的幾種主要方式及其適用場景。4.說明React中shouldComponentUpdate方法的用途及優(yōu)化建議。5.比較Vue.js和React在狀態(tài)管理方面的主要差異。五、代碼填空題（共5題，每題4分，合計20分）1.在Vue.js3中，使用CompositionAPI創(chuàng)建一個響應式引用的代碼是：`ref()`。2.在React中，使用useState鉤子創(chuàng)建一個計數(shù)器狀態(tài)并實現(xiàn)增加功能的代碼是：jsxconst[count,setCount]=useState(0);return<buttononClick={()=>setCount(count+1)}>增加</button>;3.在Vue.js中，使用v-for指令渲染一個數(shù)組列表的代碼是：html<ul><liv-for="iteminlist":key="item.id">{{}}</li></ul>4.在React中，使用useEffect鉤子監(jiān)聽props變化的代碼是：jsxuseEffect(()=>{//處理props變化},[prop1,prop2]);5.在Vue.js中，使用v-model實現(xiàn)輸入框與數(shù)據(jù)雙向綁定的代碼是：html<inputv-model="dataValue"/>六、代碼編寫題（共3題，每題10分，合計30分）1.編寫一個Vue.js3組件，實現(xiàn)以下功能：-使用CompositionAPI創(chuàng)建一個計數(shù)器狀態(tài)-提供增加和減少按鈕-計數(shù)器值變化時顯示提示信息html<template><div><p>計數(shù)器：{{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='計數(shù)器增加了';setTimeout(()=>{message.value='';},2000);};constdecrement=()=>{count.value--;message.value='計數(shù)器減少了';setTimeout(()=>{message.value='';},2000);};return{count,message,increment,decrement};}};</script>2.編寫一個React組件，實現(xiàn)以下功能：-使用useState鉤子創(chuàng)建一個輸入框狀態(tài)-實現(xiàn)實時搜索功能，當輸入內容變化時顯示匹配的數(shù)據(jù)-使用React.memo優(yōu)化組件性能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組件，實現(xiàn)以下功能：-使用v-for指令渲染一個商品列表-使用v-model實現(xiàn)購物車選擇功能-計算購物車中商品總數(shù)和總價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>選中商品數(shù)：{{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的第二個參數(shù)為空數(shù)組時，只在組件掛載時執(zhí)行；帶依賴時用于監(jiān)聽變化；若為空則會在卸載時執(zhí)行清理操作。3.A-解析：watch是Vue.js中專門用于監(jiān)聽組件屬性變化的選項，可以深度監(jiān)聽。4.B-解析：React.memo是高階組件，用于對純組件進行性能優(yōu)化，避免不必要的渲染。5.A-解析：Vue.js中動態(tài)組件的語法是<component:is="value"/>，可以動態(tài)切換組件。6.A-解析：constructor是React類組件中設置初始狀態(tài)的標準方法。7.A-解析：reactive是Vue.js3中創(chuàng)建響應式對象的函數(shù)，返回一個響應式對象。8.C-解析：useEffect是React中處理組件副作用的鉤子，用于執(zhí)行數(shù)據(jù)獲取、設置訂閱等操作。9.A-解析：provide/inject是Vue.js中實現(xiàn)跨組件通信的機制，可以在任意層級組件間傳遞數(shù)據(jù)。10.A-解析：this.setState是React類組件中更新組件狀態(tài)的標準方法。二、多選題答案1.ABCD-解析：Vue.js3的CompositionAPI包含ref、reactive、computed、watch等核心函數(shù)，以及onMounted等生命周期鉤子。2.ABD-解析：useEffect、useLayoutEffect、useReducer都可以用于處理組件副作用，useMemo用于緩存計算結果，useContext用于數(shù)據(jù)共享。3.ABCDE-解析：Vue.js的響應式系統(tǒng)包含數(shù)據(jù)劫持、依賴收集、觸發(fā)更新、深度觀察和批量更新等特性。4.ABCD-解析：React.memo、PureComponent、shouldComponentUpdate和lazyloading都是React中常用的性能優(yōu)化方法，codesplitting雖然重要但屬于路由或打包優(yōu)化范疇。5.ABC-解析：props/events、provide/inject是Vue.js的組件通信方式，Vuex是狀態(tài)管理庫，ref/forward不是組件通信方式。三、判斷題答案1.×-解析：Vue.js3的CompositionAPI與OptionsAPI不兼容，需要單獨使用或逐步遷移。2.√-解析：ReactHooks可以覆蓋類組件的所有功能，實現(xiàn)函數(shù)式組件的全部特性。3.√-解析：Vue.js的計算屬性是基于響應式數(shù)據(jù)的，會自動重新計算當依賴變化時。4.√-解析：React的contextAPI可以實現(xiàn)跨組件數(shù)據(jù)傳遞，無需通過所有層級。5.√-解析：Vue.js的watcher是響應式系統(tǒng)的核心機制，負責數(shù)據(jù)變化監(jiān)聽和更新。6.√-解析：useCallback會返回緩存的函數(shù)實例，避免不必要的重新渲染。7.√-解析：Vue.js的v-model可以用于自定義組件，實現(xiàn)雙向綁定。8.√-解析：PureComponent只適用于類組件，通過shouldComponentUpdate進行性能優(yōu)化。9.×-解析：Vue.js3的CompositionAPI建議單獨使用，不建議與OptionsAPI混合使用。10.√-解析：React中的useEffect鉤子默認在組件掛載后執(zhí)行，可以通過第二個參數(shù)控制執(zhí)行時機。四、簡答題答案1.Vue.js3的CompositionAPI相比OptionsAPI的優(yōu)勢：-更靈活的代碼組織：可以按邏輯組織相關功能，而不是按選項組織-更好的可重用性：函數(shù)式組件更容易重用-更好的類型支持：與TypeScript結合更友好-更清晰的邏輯分離：可以更清晰地分離不同類型的狀態(tài)和行為-更好的性能：更細粒度的依賴追蹤，減少不必要的更新2.React中的useContext鉤子工作原理：-useContext接收一個context對象，返回該context的當前值-React會自動跟蹤組件何時需要重新渲染context-當context值變化時，所有消費該context的組件都會重新渲染-通過context可以避免propsdrilling，實現(xiàn)跨組件數(shù)據(jù)傳遞3.Vue.js中組件通信的幾種主要方式及其適用場景：-props/events：適用于父子組件通信，父向子傳遞數(shù)據(jù)通過props，子向父通過events-provide/inject：適用于跨層級組件通信，適合深層嵌套的組件樹-Vuex：適用于大型應用的全局狀態(tài)管理，適合復雜的狀態(tài)邏輯-ref/forward：適用于組件嵌套時的直接引用，適合需要精確控制子組件的情況-provide/inject適合深層組件通信，props/events適合直接父子通信4.React中shouldComponentUpdate方法的用途及優(yōu)化建議：-用途：控制組件是否需要重新渲染，減少不必要的渲染，提高性能-優(yōu)化建議：-對于簡單組件，使用React.memo或PureComponent-對于復雜組件，可以實現(xiàn)shouldComponentUpdate進行智能比較-比較時避免直接引用this.state或ps，使用深比較或自定義比較函數(shù)-考慮使用useMemo或useCallback緩存計算結果5.Vue.js和React在狀態(tài)管理方面的主要差異：-Vue.js：原生支持Vuex進行全局狀態(tài)管理