2024年前端最新Vue3+ElementPlus 根据路由 自动创建二级菜单，2024年最新96道前端面试题

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。

meta: {

isShow: true,

title: ‘H币’,

icon: ‘el-icon-money’

},

component: () => import(‘…/views/Wallet/Hcoin.vue’)

},

{

path: ‘/Coupon’,

name: ‘Coupon’,

meta: {

isShow: true,

title: ‘优惠券’,

icon: ‘el-icon-tickets’

},

component: () => import(‘…/views/Wallet/Coupon.vue’)

},

{

path: ‘/MyWallet’,

name: ‘MyWallet’,

meta: {

isShow: true,

title: ‘钱包’,

icon: ‘el-icon-coin’

},

component: () => import(‘…/views/Wallet/MyWallet.vue’)

}

]

},

{

path: ‘/NeiRongChuangzuo’,

name: ‘NeiRongChuangzuo’,

meta: {

isShow: true,

title: ‘内容创作’,

icon: ‘el-icon-document’

},

component: Layout,

children:[

{

path: ‘/PublishBlog’,

name: ‘PublishBlog’,

meta: {

isShow: true,

title: ‘发布博客’,

icon: ‘el-icon-folder-add’

},

component: () => import(‘…/views/Produce/PublishBlog.vue’)

},

{

path: ‘/PublishQuestion’,

name: ‘PublishQuestion’,

meta: {

isShow: true,

title: ‘发布问题’,

icon: ‘el-icon-question’

},

component: () => import(‘…/views/Produce/PublishQuestion.vue’)

},

{

path: ‘/UploadResource’,

name: ‘UploadResource’,

meta: {

isShow: true,

title: ‘上传资源’,

icon: ‘el-icon-house’

},

component: () => import(‘…/views/Produce/UploadResource.vue’)

},

{

path: ‘/UploadVideo’,

name: ‘UploadVideo’,

meta: {

isShow: true,

title: ‘上传视频’,

icon: ‘el-icon-video-camera’

},

component: () => import(‘…/views/Produce/UploadVideo.vue’)

}

]

},

{

path: ‘/NeiRongGuanLi’,

name: ‘NeiRongGuanLi’,

meta: {

isShow: true,

title: ‘内容管理’,

icon: ‘el-icon-date’

},

component: Layout,

children:[

{

path: ‘/BlogManage’,

name: ‘BlogManage’,

meta: {

isShow: true,

title: ‘博客管理’,

icon: ‘el-icon-document-copy’

},

component: () => import(‘…/views/Manage/BlogManage.vue’)

},

{

path: ‘/CategoryManage’,

name: ‘CategoryManage’,

meta: {

isShow: true,

title: ‘类别管理’,

icon: ‘el-icon-notebook-2’

},

component: () => import(‘…/views/Manage/CategoryManage.vue’)

},

{

path: ‘/CommentManage’,

name: ‘CommentManage’,

meta: {

isShow: true,

title: ‘评论管理’,

icon: ‘el-icon-chat-line-square’

},

component: () => import(‘…/views/Manage/CommentManage.vue’)

},

{

path: ‘/QuestionManage’,

name: ‘QuestionManage’,

meta: {

isShow: true,

title: ‘问答管理’,

icon: ‘el-icon-microphone’

},

component: () => import(‘…/views/Manage/QuestionManage.vue’)

},

{

path: ‘/ResourceManage’,

name: ‘ResourceManage’,

meta: {

isShow: true,

title: ‘资源管理’,

icon: ‘el-icon-takeaway-box’

},

component: () => import(‘…/views/Manage/ResourceManage.vue’)

},

{

path: ‘/SubscribeManage’,

name: ‘SubscribeManage’,

meta: {

isShow: true,

title: ‘订阅管理’,

icon: ‘el-icon-present’

},

component: () => import(‘…/views/Manage/SubscribeManage.vue’)

},

{

path: ‘/VidoManage’,

name: ‘VidoManage’,

meta: {

isShow: true,

title: ‘视频管理’,

icon: ‘el-icon-camera’

},

component: () => import(‘…/views/Manage/VidoManage.vue’)

}

]

},

{

path: ‘/ShuJuTongJi’,

name: ‘ShuJuTongJi’,

meta: {

isShow: true,

title: ‘数据统计’,

icon: ‘el-icon-view’

},

component: Layout,

children:[

{

path: ‘/BlogData’,

name: ‘BlogData’,

meta: {

isShow: true,

title: ‘博客数据’,

icon: ‘el-icon-data-line’

},

component: () => import(‘…/views/Statistics/BlogData.vue’)

},

{

path: ‘/DownloadData’,

name: ‘DownloadData’,

meta: {

isShow: true,

title: ‘下载数据’,

icon: ‘el-icon-sold-out’

},

component: () => import(‘…/views/Statistics/DownloadData.vue’)

},

{

path: ‘/EarningsData’,

name: ‘EarningsData’,

meta: {

isShow: true,

title: ‘收益数据’,

icon: ‘el-icon-money’

},

component: () => import(‘…/views/Statistics/EarningsData.vue’)

},

{

path: ‘/FansData’,

name: ‘FansData’,

meta: {

isShow: true,

title: ‘粉丝数据’,

icon: ‘el-icon-school’

},

component: () => import(‘…/views/Statistics/FansData.vue’)

},

{

path: ‘/TopSearchEntry’,

name: ‘TopSearchEntry’,

meta: {

isShow: true,

title: ‘热搜词条’,

icon: ‘el-icon-pie-chart’

},

component: () => import(‘…/views/Statistics/TopSearchEntry.vue’)

},

{

path: ‘/VisitedReport’,

name: ‘VisitedReport’,

meta: {

isShow: true,

title: ‘受访报告’,

icon: ‘el-icon-mobile’

},

component: () => import(‘…/views/Statistics/VisitedReport.vue’)

}

]

},

{

path: ‘/GongJu’,

name: ‘GongJu’,

meta: {

isShow: true,

title: ‘工具’,

icon: ‘el-icon-s-tools’

},

component: Layout,

children:[

{

path: ‘/BlogMove’,

name: ‘BlogMove’,

meta: {

isShow: true,

title: ‘博客搬家’,

icon: ‘el-icon-s-promotion’

},

component: () => import(‘…/views/Tools/BlogMove.vue’)

},

{

path: ‘/BlogSetting’,

name: ‘BlogSetting’,

meta: {

isShow: true,

title: ‘博客设置’,

icon: ‘el-icon-set-up’

},

component: () => import(‘…/views/Tools/BlogSetting.vue’)

},

{

path: ‘/FansServe’,

name: ‘FansServe’,

meta: {

isShow: true,

title: ‘粉丝服务’,

icon: ‘el-icon-service’

},

component: () => import(‘…/views/Tools/FansServe.vue’)

}

]

},

{

path: ‘/Order’,

name: ‘Order’,

meta: {

isShow: false

},

component: Layout,

children: [

{

path: ‘/Order’,

component: () => import(‘…/views/MyOrder.vue’),

meta: {

title: ‘订单’,

icon: ‘el-icon-s-order’

}

}

]

}

]

const router = createRouter({

history: createWebHashHistory(),

routes

})

export default router

页面 Layout.vue

---

<el-menu

:router=“true”

:collapse=“isCollapse”

class=“el-menu-vertical-demo”

v-for=“item in menuItems” :route=“item.path” :key=“item.name” :index=“item.name”>

JavaScript

• js的基本类型有哪些？引用类型有哪些？null和undefined的区别。

• 如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）

• Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？

• JS常见的dom操作api

• 解释一下事件冒泡和事件捕获

• 事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？

• 对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？

• this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？

• call，apply，bind

• 显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链

• 创建对象的多种方式

• 实现继承的多种方式和优缺点

• new 一个对象具体做了什么

• 手写Ajax，XMLHttpRequest

• 变量提升

• 举例说明一个匿名函数的典型用例

• 指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？

• attribute和property的区别

• document load和document DOMContentLoaded两个事件的区别

• JS代码调试

• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】