寫在前面：面經只是記錄博主遇到的題目。每題的答案在編寫文檔的時候已經有問過deepseek，它只是一種比較普世的答案，要學得深入還是靠自己
Q：手撕代碼，兩個有序數組排序
A：
function mysort(arr1, arr2) {let i = 0;let j = 0;let res = [];while (i < arr1.length && j < arr2.length) {if (arr1[i] <= arr2[j]) {res.push(arr1[i])i++} else {res.push(arr2[j])j++}}return [...res, ...arr1.slice(i), ...arr2.slice(j)];
}
Q：Vue里emit和on如何實現“發起然后更新”這樣一個過程
A：
- $emit: 用于觸發/發起一個自定義事件
- $on: 用于監聽/訂閱一個自定義事件
父子組件之間：子組件發起(emit)，父組件監聽(on)并更新
<!-- 子組件 Child.vue -->
<template><button @click="sendMessage">發送消息</button>
</template><script>
export default {methods: {sendMessage() {// 發起/觸發一個名為'message-sent'的事件，并附帶數據this.$emit('message-sent', { text: 'Hello from child!' });}}
}
</script>
<!-- 父組件 Parent.vue -->
<template><div><child @message-sent="handleMessage"></child><p>收到的消息: {{ receivedMessage }}</p></div>
</template><script>
import Child from './Child.vue';export default {components: { Child },data() {return {receivedMessage: ''};},methods: {// 監聽/處理子組件發出的事件handleMessage(payload) {this.receivedMessage = payload.text; // 更新數據console.log('收到消息:', payload.text);}}
}
</script>
Q：一個平鋪數組如何變成樹
A：
const flatArray = [{ id: 1, pid: 0, children: [{ id: 2, pid: 1, children: null }] },{ id: 3, pid: 0, children: null }
];function normalizeTree(node) {if (node.children === null) {node.children = [];} else if (Array.isArray(node.children)) {node.children.forEach(normalizeTree);}return node;
}const tree = flatArray.map(normalizeTree);
console.log(tree);
Q：Nuxt.js有了解嗎
A：一個基于Vue.js的SSR服務端渲染和靜態站點生成的SSG框架，用于構建高性能、SEO友好的現代web應用，它簡化了Vue.js的開發流程。
核心：多種渲染模式，服務端渲染，靜態站點生成，單頁應用，混合渲染。
無需手動vue-router，內置代碼分割，預加載，支持HMR。
適合博客、電商、后臺管理系統、全棧應用。
Q：代碼分割是為了什么，在什么場景下用
A：
- ESM代碼分割：() => import(組件)，實現動態引入。
- WebPack代碼分割：需要性能優化的場景下使用，減少包體積，給瀏覽器緩存，包分得多了，如果只改一部分js代碼，就不需要整個js重新加載。
WebPack分割配置：
// webpack.config.js
module.exports = {// ...optimization: {splitChunks: {chunks: 'all', // 對所有模塊進行優化（包括同步和異步）minSize: 20000, // 生成 chunk 的最小體積（20KB）minRemainingSize: 0,minChunks: 1, // 被引用次數 >=1 才會被拆分maxAsyncRequests: 30, // 最大異步請求數（默認 30）maxInitialRequests: 30, // 入口點的最大并行請求數（默認 30）enforceSizeThreshold: 50000, // 強制拆分閾值（50KB）cacheGroups: {// 拆分第三方庫（node_modules）vendors: {test: /[\\/]node_modules[\\/]/,priority: -10, // 優先級reuseExistingChunk: true,name: 'vendors', // 輸出文件名（如 vendors.js）},// 拆分公共代碼（被多個入口引用）common: {minChunks: 2, // 至少被 2 個入口引用priority: -20,reuseExistingChunk: true,name: 'common', // 輸出文件名（如 common.js）},},},},
};
Q：v-model如何實現的
A：它實現了表單輸入和應用狀態之間的雙向數據綁定。本質上是語法糖，結合了數據綁定和事件監聽。
<custom-input v-model="message"></custom-input>
// 相當于是 v-bind + v-on 的語法糖
<custom-input :value="message" // 將 value 屬性綁定到 Vue 實例的 message 數據@input="message = $event.target.value" // 監聽 input 事件，當輸入值變化時更新 message
></custom-input>// 組件內部需要：
// 接收 value 這個prop
// 在值變化時觸發 input 事件
Vue.component('custom-input', {props: ['value'],template: `<input:value="value"@input="$emit('input', $event.target.value)">`})
底層實現機制：
模板編譯：Vue 編譯器將模板中的 v-model 轉換為 v-bind:value 和 v-on:input
AST 轉換：生成抽象語法樹時處理 v-model 指令
數據綁定：通過 Object.defineProperty 或 Proxy 實現響應式
事件監聽：建立事件監聽器，在事件觸發時更新數據
