一、前端都有哪些技术1基础三层HTML页面结构标签搭建页面骨架CSS页面样式布局、颜色、动画衍生CSS3、SCSS/Sass、Less、Tailwind CSSJavaScript页面交互逻辑ES6 语法2框架类Vue2 / Vue3、React、Angular小程序 uni‑app、Taro3构建工具Vite、Webpack、Rollup、esbuild4Node 周边Node.js、npm/yarn/pnpmExpress、Koa5HTTP 与浏览器AJAX、Fetch、Axios跨域、浏览器缓存、本地存储6UI 组件库VueElement‑Plus、Ant Design VueReactAnt Design7其他TypeScriptJS 类型增强、ECharts 图表、WebGL、工程化、性能优化二、本地存储localStorage /sessionStorage/cookie / IndexedDB优劣势存储大小生命周期是否随 http 请求发送特点cookie4KB可设置过期时间✅每次请求自动带上兼容老浏览器存储量很小localStorage5MB永久手动删除❌不参与 http 请求持久化本地存储sessionStorage5MB页面会话关闭即销毁❌标签页隔离关闭页面丢失IndexedDB几十 MB 以上持久化❌浏览器数据库存大量二进制 / 对象localStorage✅优点容量大简单 API持久保存不占请求头 ❌缺点仅字符串不能存对象同源限制同步 API大数据会阻塞主线程不能存敏感信息sessionStorage✅优点隔离不同标签页关闭页面自动清空安全简单 API ❌缺点关闭标签数据丢失只能存字符串同源限制Cookie✅优点服务端可以读写自动带给后端兼容 IE ❌缺点容量极小 4KB每次 http 请求携带增加流量容易 XSS 窃取IndexedDB✅优点大容量可以存对象、二进制异步不阻塞页面 ❌缺点API 复杂上手繁琐总结简单少量数据用 localStorage会话临时数据 sessionStorage需要后端读取用 cookie大量数据用 IndexedDB。三、Node.js 的优势JS 全栈能力一套 JavaScript前端写页面后端写接口不用切换语言。非阻塞 IO事件循环处理大量网络请求性能好适合 IO 密集型文件读写、接口转发。npm 生态世界最大开源包管理器海量第三方库。前端工程化基础Webpack/Vite、TS 编译、ESLint、打包构建全部依赖 Node。轻量部署写接口简单不需要笨重容器适合做中间层、代理、脚本。⚠️缺点不适合 CPU 密集型计算单线程大量计算会阻塞事件循环。四、Vue 生命周期Vue2 / Vue3生命周期组件从创建 → 挂载 → 更新 → 销毁的各个钩子函数Vue2beforeCreate实例刚创建data/methods 还不能访问created实例创建完成data、methods 可以访问DOM 还未生成不能操作 DOM常用请求接口beforeMount挂载前模板编译完成虚拟 DOM 生成mounted组件挂载完成真实 DOM 已经渲染可以操作 DOM、获取 DOM 节点beforeUpdate数据更新DOM 还没更新updated数据更新完成DOM 已经更新完毕beforeDestroy组件销毁前定时器、事件监听在这里清除destroyed组件销毁完成Vue3 setup 语法糖组合式 APIonBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted高频考点created拿不到 DOMmounted才能拿到 DOM销毁前清除定时器防止内存泄漏。五、Vue 如何适配 IEVue3不再支持 IEVue2 最高支持 IE11使用Vue2不要 Vue3安装依赖babel‑polyfill或者core‑js转译 ES6 语法给 IE 识别webpack 配置把node_modules里面部分包加入 babel 转译避免使用 ES6APIPromise、Array.includesIE 不支持需要垫片 polyfillUI 库Element‑UI 支持 IE11Element‑Plus 不支持 IE部分浏览器 API 兼容例如fetch替换为 axios不使用可选链?.index.html 加入 IE 兼容 meta 标签meta http‑equivX‑UA‑Compatible contentIEedge现实业务现在大多放弃 IE如果必须兼容只能选 Vue2。六、同时支持微信 H5、PC 端、移动端方案方案 1响应式布局一套代码多端CSS 媒体查询media使用 rem/vw/vh 相对单位UI 库Element‑PlusPC Vant移动端或者使用Naive‑ui、Uni‑app判断 UA区分环境做条件渲染// 判断是否微信环境 const isWechat /MicroMessenger/i.test(navigator.userAgent) // 判断移动端 const isMobile /Android|iPhone|iPad/i.test(navigator.userAgent)微信 JS‑SDK微信环境单独配置签名调用微信能力分享、拍照方案 2两套页面PC 一套移动端一套路由区分/pc、/h5根据设备 UA 自动跳转。关键点微信 H5 独有逻辑微信登录、微信分享只在微信浏览器执行PC 端屏蔽。样式PC 使用 px移动端使用 vw/rem禁止固定 px 硬写死。点击事件移动端 300ms 延迟加 metameta nameviewport contentwidthdevice‑width, initial‑scale1.0七、Vue 加载速度优化打包构建优化路由懒加载组件动态导入只加载当前页面组件const Home () import(./views/Home.vue)第三方库按需引入不要全量导入 UI 库大库做 CDN 外部引入webpack 排除externals不打包进 bundle开启 vite/webpack 生产压缩关闭 source‑map️资源优化图片压缩使用 webp 格式图片懒加载小图转 base64字体文件压缩运行时优化v‑if 和 v‑show 合理选择避免不必要组件渲染列表渲染加key大数据列表使用虚拟滚动本地缓存接口数据减少重复请求开启浏览器缓存使用 http 缓存策略首屏体验首页骨架屏loading 加载提示SSR/SSGVue SSR / Nuxt八、Vue 常见指令指令作用v‑text设置元素文本内容v‑html渲染 html 字符串注意 XSS 风险v‑if条件渲染销毁 / 重建 DOMv‑show显示隐藏css display 控制DOM 还在v‑for循环渲染列表必须绑定 keyv‑bind/:绑定属性:class:srcv‑on/绑定事件clickv‑model表单双向绑定v‑once只渲染一次后续不再更新重点区分v‑if销毁 DOMv‑show只是隐藏 DOM。高频考点。九、如何循环读取 JSON1. JSON 字符串先转 JS 对象const jsonStr {a:1,b:2} const obj JSON.parse(jsonStr) // json字符串 → js对象2. 对象循环// 方式1 for in for(let key in obj){ console.log(key, obj[key]) } // 方式2 Object.keys Object.keys(obj).forEach(key{ console.log(key, obj[key]) }) // Object.values 获取值数组 Object.values(obj).forEach(val{})3. JSON 数组循环const jsonArr [{name:张三},{name:李四}] const arr JSON.parse(jsonArr) arr.forEach(item{ console.log(item.name) })Vue 模板中循环 json 对象div v‑for(value, key) in myObj :keykey {{key}} : {{value}} /div十、JSON 定义字符串、对象JSON 是字符串格式不是 JS 对象。JSON只能用双引号不能写注释key 必须双引号不支持函数、undefined。✅ JSON 对象字符串{ username:张三, age:18 }js 代码写法// json字符串 const jsonObjStr {username:张三,age:18} // JS普通对象不是JSON const jsObj { username:张三, age:18 }✅ JSON 数组字符串const jsonArrStr [{id:1},{id:2}]转换 APIJSON.parse(jsonStr) // JSON字符串 → JS对象 JSON.stringify(jsObj) // JS对象 → JSON字符串易错点localStorage 只能存字符串存对象必须JSON.stringify读取JSON.parse还原。