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 保留，但行為微調）。