写在前面：面经只是记录博主遇到的题目。每题的答案在编写文档的时候已经有问过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 实现响应式
事件监听：建立事件监听器，在事件触发时更新数据