技能特⻓回答

一、JavaScript 基础

常用 ES6+ 语法:

箭头函数、模板字符串、解构赋值、spread/rest、默认参数

Promise/async-await、class、模块(import/export)

Set/Map、可选链(?.)、空值合并(??)、大数(BigInt)

let/const/var 区别:

var:函数级作用域,可提前(hoisting),易污染全局

let:块级作用域,不可重复声明,有暂时性死区

const:块级作用域,声明后不可改引用,适合常量或不变引用

Promise 使用场景:

并发请求:Promise.all([req1, req2, ...]).then(results=>{ ... })/async-await + Promise.all

串行请求:chain then 或 for await...of

拦截统一错误/超时封装

回调地狱解决:

用 Promise 链式调用或 async-await

将重复逻辑封装成函数/工具库(如 p-limit 控制并发)

二、Vue 相关

常用生命周期钩子:

created:数据/状态初始化,不可操作真实 DOM

mounted:首次挂载完成,可操作 DOM/调用第三方库

beforeUnmount/unmounted:清理定时器、事件监听

watch/computed:数据变更响应

v-if vs v-show:

v-if:动态增删 DOM,初次渲染有开销,适合不频繁切换

v-show:始终渲染,仅控制 display,频繁切换时优先

组件间通信:

父子:props + $emit

兄弟/跨层级:EventBus(不推荐)、provide/inject、Vuex/Pinia、mitt

Vuex/Pinia 用处:

管理用户信息(token、权限)、全局配置、购物车、Tab 标签状态等

性能优化:

路由懒加载(defineAsyncComponent)

组件按需加载、keep-alive 缓存

图片懒加载、虚拟列表(vue-virtual-scroller)

减少重复渲染(合理拆组件、使用 key)

三、工程化与工具

Webpack/Vite 常改配置:

alias(@ 指向 src)、devServer proxy 跨域、环境变量定义

打包体积分析(webpack-bundle-analyzer)、代码分割

Loader vs Plugin:

Loader:文件预处理(如 babel-loader、css-loader)

Plugin:打包生命周期扩展(如 HtmlWebpackPlugin、DefinePlugin)

代码风格统一:

ESLint + Prettier 联动,husky + lint-staged 在 Git 提交前校验

提炼公共组件:

根据设计需求抽象通用弹窗、表单输入框、表格、卡片等;通过 props/slot 参数化

四、网络与调试

联调排查流程:

检查前端请求参数/URL

Network 面板看状态码、返回值

console.log、断点调试、Mock 数据对比

后端日志/接口文档核对

跨域解决:

CORS(后端设置)、devServer proxy、Nginx 反向代理、JSONP(仅 GET)

项目常用 devServer proxy

常用 F12 面板:

Elements(DOM/样式)、Network(接口)、Console(日志)、Sources(断点)、Performance(性能分析)

五、权限与若依框架

动态路由流程:

登录后接口获取菜单树

递归生成 Vue Router 路由配置

router.addRoutes/router.addRoute 动态注入

按钮权限控制:

基于指令(v-permission)或高阶组件封装,如:

六、小程序与可视化

小程序 vs Vue:

生命周期不同(onLoad/onShow vs created/mounted)

API 调用 wx.request、wx.navigateTo

无 DOM,使用 wxml/wxss 语法

大屏适配:

百分比+flex 布局、rem/视口 vw 单位

ECharts resize 自适应容器

ECharts 常用图表:

折线、柱状、饼图、地图、漏斗图

大数据量卡顿:启用 canvas 渲染,数据 down-sampling,数据分批加载

七、其他常用库

Axios 封装:

创建实例统一 baseURL、超时

请求拦截器加 token、loading;响应拦截器统一错误提示、状态码处理

UI 库二次封装:

封装统一主题/全局配置、自定义表单组件、增强提示功能,使项目样式更一致

Git 常用命令:

clone、checkout、branch、merge/rebase、stash、pull、push

开发中切分支修 bug:git stash,checkout bug-branch,修复后 git stash pop,再提交

八、综合与项目

项目简介:

"智慧校园管理平台":负责前端架构、权限模块、报表大屏

挑战:百万级数据列表性能、动态路由权限控制

解决:虚拟列表组件、后端分页+按需加载;动态路由缓存与导航守卫

职业规划:

深耕前端技术栈(框架、性能、安全)

学习全栈/Node.js 后端,承担更多架构设计

关注用户体验与团队协作,提升软技能与领导力

相关推荐
一点一木1 小时前
深度体验TRAE SOLO移动端7天:作为独立开发者,我把工作流揣进了兜里
前端·人工智能·trae
天外飞雨道沧桑2 小时前
TypeScript 中 omit 和 record 用法
前端·javascript·typescript
Lee川2 小时前
mini-cursor 揭秘:从 Tool 定义到 Agent 循环的完整实现
前端·人工智能·后端
canonical_entropy3 小时前
从 Spec-Driven Development 到 Attractor-Guided Engineering
前端·aigc·ai编程
研☆香3 小时前
聊聊前端页面的三种长度单位
前端
给钱,谢谢!3 小时前
React + PixiJS 实现果园成长页:从状态机到浇水动画
前端·react.js·前端框架
小江的记录本4 小时前
【Java基础】泛型:泛型擦除、通配符、上下界限定(附《思维导图》+《面试高频考点清单》)
java·数据结构·后端·mysql·spring·面试·职场和发展
暗冰ཏོ5 小时前
VUE面试题大全
前端·javascript·vue.js·面试
次元工程师!5 小时前
LangFlow开发(三)—Bundles组件架构设计(3W+字详细讲解)
java·前端·python·低代码·langflow
Bug-制造者6 小时前
现代Web应用全栈开发:从架构设计到部署落地实战
前端