https://lv-blog.pages.dev/tags/%E5%89%8D%E7%AB%AF/ Recent content in 前端 on 洛克里亚的五度 博客 Hugo zh Wed, 15 Jul 2026 00:46:10 +0800 https://lv-blog.pages.dev/posts/programming/frontend/flutter-interview-questions/ Wed, 15 Jul 2026 00:46:10 +0800 https://lv-blog.pages.dev/posts/programming/frontend/flutter-interview-questions/ <blockquote> <p>从互联网整理而来</p> </blockquote> <h2 id="一dart-基础">一、Dart 基础</h2> <ol> <li>Dart 的数据类型有哪些？</li> <li>var、final、const 的区别</li> <li>Dart 中 null safety 是什么，如何使用？</li> <li>late 关键字作用与使用场景</li> <li>Dart 函数可选参数、命名参数、位置参数区别</li> <li>箭头函数适用范围</li> <li>Dart 异步：Future、async/await 原理</li> <li>Stream 与 Future 区别，StreamController 使用</li> <li>sync*、async*、yield、yield each 作用</li> <li>Dart 类中 extends、implements、mixin 区别</li> <li>mixin 有什么限制，能否构造函数传参</li> <li>抽象类与接口区别</li> <li>泛型 T、?T、T?、required T 区别</li> <li>Dart 单例几种实现方式</li> <li>工厂构造函数 factory 作用</li> <li>常量构造函数使用条件</li> <li>级联运算符 .. 原理</li> <li>空值操作符 ?.、??、??= 用法</li> <li>Dart 枚举进阶用法，能否自定义属性方法</li> <li>Isolate 是什么，和线程区别，通信方式</li> <li>Isolate 共享内存吗，数据传递限制</li> <li>Zone 作用是什么</li> <li>Dart 垃圾回收机制</li> <li>函数一等公民体现在哪里</li> <li>typedef 作用与场景</li> </ol> <h2 id="二flutter-框架核心原理">二、Flutter 框架核心原理</h2> <ol> <li>Flutter 三棵树：Widget、Element、RenderTree 关系</li> <li>StatelessWidget 和 StatefulWidget 底层差异</li> <li>State 生命周期完整流程</li> <li>initState、didChangeDependencies、build、didUpdateWidget、dispose 执行时机</li> <li>setState 底层更新机制</li> <li>Widget 为什么是不可变的 immutable</li> <li>Element 作用，Element 复用逻辑</li> <li>RenderObject 职责是什么</li> <li>Key 的作用，几种 Key 区别（ValueKey、ObjectKey、UniqueKey、GlobalKey）</li> <li>GlobalKey 使用场景与隐患</li> <li>LocalKey 解决什么问题</li> <li>Widget 重建流程，哪些情况会触发重建</li> <li>什么是 const Widget，好处是什么</li> <li>Flutter 渲染流程：布局、绘制、合成步骤</li> <li>布局约束流程：Constraints 传递规则</li> <li>父布局约束如何限制子控件尺寸</li> <li>RepaintBoundary 作用，何时使用</li> <li>Layer 树作用，缓存机制</li> <li>Flutter 与原生 Android/iOS 渲染区别</li> <li>Skia 引擎作用</li> <li>Impeller 渲染引擎对比 Skia 优势</li> <li>Flutter 绘制原理，Canvas、Paint 流程</li> <li>PipelineOwner 作用</li> <li>WidgetsBinding、SchedulerBinding 职责</li> <li>帧调度流程：Vsync、帧回调执行顺序</li> <li>transientCallbacks、persistentCallbacks、postFrameCallbacks 区别</li> <li>Flutter 热重载原理，热重启区别</li> <li>编译模式：debug/profile/release 差异</li> <li>AOT、JIT 编译区别</li> <li>Flutter 页面路由底层实现原理</li> </ol> <h2 id="三布局--基础组件">三、布局 &amp; 基础组件</h2> <ol> <li>Row Column Flex 布局区别，主轴交叉轴概念</li> <li>MainAxisAlignment、CrossAxisAlignment 所有枚举值含义</li> <li>Expanded、Flexible 区别，flex 参数作用</li> <li>Stack、Positioned 布局规则</li> <li>Align、Center 底层关系</li> <li>Padding、Container 内部结构</li> <li>Container 嵌套过多有什么性能问题</li> <li>SizedBox、ConstrainedBox、UnconstrainedBox 用途</li> <li>AspectRatio、FittedBox 缩放逻辑</li> <li>Wrap 自动换行实现原理</li> <li>ListView 几种构造方式区别（默认、builder、separated）</li> <li>ListView.builder 高性能原理，复用机制</li> <li>ListView 滚动复用失效场景</li> <li>GridView 使用与性能优化</li> <li>SingleChildScrollView 嵌套 ListView 报错解决方案</li> <li>CustomScrollView、Sliver 体系是什么</li> <li>SliverList、SliverGrid、SliverAppBar、SliverToBoxAdapter 使用场景</li> <li>SliverPersistentHeader 固定吸顶实现</li> <li>CustomScrollView 滚动统一原理</li> <li>Table、DataTable 布局特性</li> <li>IntrinsicHeight、IntrinsicWidth 性能损耗原因</li> <li>LayoutBuilder 获取父布局约束场景</li> <li>MediaQuery 获取设备信息，MediaQuery.of(context) 刷新机制</li> <li>LayoutId、MultiChildLayout 自定义布局</li> <li>Flow 高性能流式布局适用场景</li> </ol> <h2 id="四状态管理">四、状态管理</h2> <ol> <li>State 自身状态管理优缺点</li> <li>InheritedWidget 底层原理，数据传递逻辑</li> <li>InheritedModel 对比 InheritedWidget 优势</li> <li>Provider 整套库实现原理（ChangeNotifierProvider、Consumer、Selector）</li> <li>Selector 为什么能精准局部刷新</li> <li>ChangeNotifier 通知更新机制</li> <li>StateProvider、FutureProvider、StreamProvider 区别</li> <li>Riverpod 对比 Provider 改进点</li> <li>Riverpod 全局状态、自动 dispose、无 context 优势</li> <li>StateNotifier、AsyncNotifier 使用场景</li> <li>Bloc 核心概念：Event、State、Bloc/Cubit</li> <li>Cubit 与 Bloc 区别</li> <li>BlocProvider、BlocConsumer、BlocBuilder、BlocListener 分工</li> <li>Bloc 状态单一数据源优势</li> <li>GetX 状态管理原理，GetController 生命周期</li> <li>GetX 全局路由、依赖注入实现</li> <li>GetX 优缺点，存在什么性能隐患</li> <li>Redux 在 Flutter 中使用逻辑</li> <li>MobX 响应式原理，Observable、Action、Reaction</li> <li>大型项目如何选型状态管理方案</li> <li>跨页面共享状态几种实现方式对比</li> <li>状态持久化配合状态管理怎么做</li> </ol> <h2 id="五路由--导航">五、路由 &amp; 导航</h2> <ol> <li>Navigator 1.0 路由栈管理原理</li> <li>MaterialPageRoute、CupertinoPageRoute 区别</li> <li>PageRouteBuilder 自定义转场动画</li> <li>Navigator push/pop/pushReplacement/popUntil 逻辑</li> <li>路由传参几种方式</li> <li>Navigator 2.0 核心组件：Router、RouteInformationParser、RouterDelegate</li> <li>Navigator 2.0 完整路由流程</li> <li>GoRouter 框架底层封装逻辑</li> <li>GoRouter 嵌套路由、路由守卫、参数获取</li> <li>路由栈持久化、页面状态保存方案</li> <li>底部导航多 Tab 页面状态保持实现</li> <li>路由拦截、登录鉴权统一处理</li> <li>原生页面与 Flutter 页面互相跳转路由处理</li> <li>页面返回监听 WillPopScope、PopScope</li> <li>深度链接 deep link 适配方案</li> </ol> <h2 id="六动画">六、动画</h2> <ol> <li>Flutter 动画核心类：Animation、AnimationController、CurvedAnimation</li> <li>AnimationController vsync 作用，为什么需要 TickerProvider</li> <li>SingleTickerProviderStateMixin、TickerProviderStateMixin 区别</li> <li>Tween、Animatable 差值计算原理</li> <li>显式动画与隐式动画区别</li> <li>AnimatedContainer、AnimatedOpacity 等隐式动画底层</li> <li>Hero 共享元素动画实现原理</li> <li>PageRoute 共享 Hero 流程</li> <li>CustomAnimation 自定义动画组件</li> <li>交错动画 Interval 使用</li> <li>动画性能优化，避免重建</li> <li>Lottie 动画集成原理，性能注意点</li> <li>循环动画、反向动画实现</li> <li>动画暂停、恢复、释放资源处理</li> <li>自定义路由转场动画</li> </ol> <h2 id="七网络--本地存储">七、网络 &amp; 本地存储</h2> <ol> <li>dio 库封装思路，拦截器使用</li> <li>dio 统一请求头、错误处理、token 自动刷新</li> <li>取消请求 CancelToken 使用场景</li> <li>并发请求、超时处理</li> <li>Json 序列化反序列化几种方式（手动、json_serializable）</li> <li>fromJson/toJson 生成流程</li> <li>Freezed 数据模型优势</li> <li>http 库与 dio 对比</li> <li>WebSocket 在 Flutter 中使用，重连机制</li> <li>shared_preferences 底层存储原理</li> <li>Hive 本地数据库优势，Box 使用</li> <li>Hive 加密、大数据存储优化</li> <li>sqflite 数据库操作，事务使用</li> <li>Isolate 中操作数据库注意事项</li> <li>文件读写 path_provider 获取路径</li> <li>图片缓存 cached_network_image 实现逻辑</li> <li>网络请求缓存策略设计</li> <li>接口统一异常捕获封装方案</li> </ol> <h2 id="八原生交互-methodchannel">八、原生交互 MethodChannel</h2> <ol> <li>MethodChannel、BasicMessageChannel、EventChannel 三者区别</li> <li>MethodChannel 双向通信完整流程</li> <li>Flutter 调用 Android 原生代码步骤</li> <li>Flutter 调用 iOS OC/Swift 步骤</li> <li>原生主动推送数据给 Flutter 使用哪个 Channel</li> <li>传参类型限制，复杂对象传递方案</li> <li>多页面 Channel 单例管理</li> <li>PlatformView 嵌入原生 View（Android View、iOS UIView）</li> <li>PlatformView 性能问题与优化</li> <li>原生页面跳转 Flutter 传参</li> <li>权限通过原生通道申请方案</li> <li>混合栈开发：flutterBoost 原理</li> <li>flutterBoost 页面生命周期同步问题</li> <li>原生资源与 Flutter 资源冲突处理</li> <li>通信通道内存泄漏如何避免</li> </ol> <h2 id="九性能优化专项">九、性能优化专项</h2> <ol> <li>Widget 重建常见诱因与规避手段</li> <li>const 构造优化原理</li> <li>Key 不合理使用导致的性能问题</li> <li>ListView 长列表优化方案</li> <li>图片加载优化：尺寸、缓存、压缩</li> <li>RepaintBoundary 拆分重绘区域场景</li> <li>减少 Layer 树层级优化</li> <li>避免使用 Intrinsic 系列控件原因</li> <li>动画卡顿排查思路</li> <li>DevTools 工具使用：性能面板、内存、Widget 检查</li> <li>内存泄漏常见场景（Timer、Stream、Channel、Animation）</li> <li>大图片、大量对象内存释放方案</li> <li>Isolate 处理耗时计算优化 UI</li> <li>build 方法避免耗时操作</li> <li>布局嵌套过深优化手段</li> <li>页面 dispose 资源释放规范</li> <li>Profile 模式性能排查要点</li> <li>启动速度优化（包体积、懒加载、预加载）</li> <li>Flutter 包体积优化方案</li> <li>滑动卡顿完整排查流程</li> </ol> <h2 id="十图片手势输入弹窗组件">十、图片、手势、输入、弹窗组件</h2> <ol> <li>Image 几种构造：AssetImage、NetworkImage、FileImage、MemoryImage</li> <li>ImageProvider 缓存机制</li> <li>Image.network 缓存缺陷，cached_network_image 弥补方案</li> <li>DecorationImage、FadeInImage 使用</li> <li>GestureDetector 手势识别原理，多手势冲突</li> <li>Listener 底层原始手势与 GestureDetector 区别</li> <li>手势竞争、手势忽略场景</li> <li>InkWell 水波纹实现原理，必须嵌套 Material</li> <li>TextField 控制器 TextEditingController 使用</li> <li>TextField 输入监听、格式化、光标控制</li> <li>表单 Form、GlobalKey<FormState> 校验逻辑</li> <li>ModalRoute、showDialog、showBottomSheet 弹窗原理</li> <li>弹窗状态共享问题解决方案</li> <li>Draggable、LongPressDraggable 拖拽实现</li> <li>Transform 变换不改变布局约束特性</li> </ol> <h2 id="十一项目工程--打包适配">十一、项目工程 &amp; 打包适配</h2> <ol> <li>pubspec.yaml 各字段含义，依赖版本约束</li> <li>本地依赖、Git 依赖、远程依赖配置</li> <li>pub 依赖冲突解决方法</li> <li>Flutter 多环境配置（开发/测试/生产）</li> <li>Flavor 多渠道打包 Android &amp; iOS</li> <li>Android 打包 keystore 配置，iOS 证书配置</li> <li>AndroidManifest、Info.plist 权限适配</li> <li>屏幕适配方案：媒体查询、比例、flutter_screenutil</li> <li>深色模式适配实现</li> <li>多语言国际化 intl 库使用</li> <li>App 图标、启动页配置</li> <li>Flutter 插件开发流程</li> <li>平台区分代码编写（dart.io、Platform 判断）</li> <li>混合开发项目目录结构</li> <li>CI/CD 自动打包脚本思路</li> <li>版本号管理升级方案</li> <li>第三方插件兼容问题处理</li> </ol> <h2 id="十二进阶底层--疑难场景">十二、进阶底层 &amp; 疑难场景</h2> <ol> <li>WidgetsApp、MaterialApp、CupertinoApp 内部结构</li> <li>ThemeData 主题分发原理，局部主题覆盖</li> <li>Navigator 上下文与页面上下文区别</li> <li>context 获取上层 Widget 原理，BuildContext 分类</li> <li>State 保存在 Element 中，Widget 重建 State 不销毁条件</li> <li>Offstage、Visibility 控件隐藏区别</li> <li>AbsorbPointer、IgnorePointer 拦截手势差异</li> <li>Clip 裁剪控件：ClipRect、ClipRRect、ClipOval 性能</li> <li>BackdropFilter 模糊控件性能损耗原因</li> <li>RenderBox 自定义控件完整流程</li> <li>自定义 RenderObject 实现步骤</li> <li>自定义 MultiChildRenderObjectWidget</li> <li>ScrollController 监听滚动、滚动定位</li> <li>ScrollPhysics 滚动回弹、阻尼自定义</li> <li>监听应用前后台切换 AppLifecycleState</li> <li>截屏、屏幕亮度、震动原生能力实现</li> <li>WebView 插件使用与通信</li> <li>Flutter Web 编译差异，平台兼容问题</li> <li>Flutter Windows/macOS/Linux 桌面端适配要点</li> <li>如何实现全局捕获异常</li> <li>Timer、StreamSubscription 忘记取消的内存泄漏</li> <li>列表 item 点击状态保存方案</li> <li>异步并发竞态条件问题处理</li> <li>图片大量加载 OOM 解决方案</li> <li>原生弹窗遮挡 Flutter 页面问题</li> </ol> <h2 id="十三综合项目面试问答题">十三、综合项目面试问答题</h2> <ol> <li>讲一下你项目整体架构分层</li> <li>项目状态管理选型原因</li> <li>长列表卡顿怎么优化的</li> <li>多页面共享登录状态如何实现</li> <li>token 过期统一拦截处理方案</li> <li>项目混合栈开发遇到哪些坑</li> <li>图片缓存、网络缓存怎么设计</li> <li>全局网络加载弹窗、错误页封装思路</li> <li>项目通用业务组件封装思路</li> <li>线上卡顿、崩溃排查处理经验</li> <li>如何实现页面无网络重试逻辑</li> <li>复杂表单页面状态管理方案</li> <li>项目包体积优化做了哪些操作</li> <li>多渠道、多环境配置实现</li> <li>封装通用 Dio 请求库完整思路</li> </ol> https://lv-blog.pages.dev/posts/programming/frontend/react-interview-questions/ Wed, 15 Jul 2026 00:46:10 +0800 https://lv-blog.pages.dev/posts/programming/frontend/react-interview-questions/ <blockquote> <p>从互联网整理而来</p> </blockquote> <h2 id="一js-基础前置">一、JS 基础前置</h2> <ol> <li>原型与原型链</li> <li>闭包、闭包引发的内存泄漏场景</li> <li>同步异步、宏任务微任务执行顺序</li> <li>Promise 状态、静态方法、链式调用</li> <li>async/await 原理</li> <li>深浅拷贝实现与区别</li> <li>this 指向五种场景</li> <li>箭头函数与普通函数差异</li> <li>ES6 解构、展开运算符、剩余参数</li> <li>var / let / const 区别</li> <li>CommonJS 与 ES Module 差异</li> <li>TypeScript 接口、泛型、交叉类型、联合类型</li> <li>EventLoop 完整执行流程</li> <li>防抖节流实现原理</li> <li>纯函数定义与特性</li> </ol> <h2 id="二react-基础核心概念">二、React 基础核心概念</h2> <ol> <li>React 设计思想与核心理念</li> <li>虚拟 DOM 是什么，作用与优势</li> <li>JSX 语法本质，编译产物</li> <li>JSX 中 {} 可放入哪些内容，不能放什么</li> <li>React 元素与组件区别</li> <li>函数组件与类组件区别</li> <li>纯组件 PureComponent 原理</li> <li>React 单向数据流含义</li> <li>props 只读特性，为什么不能直接修改</li> <li>props.children 有哪些类型</li> <li>key 的作用，为什么不能用 index 做 key</li> <li>React 列表渲染注意事项</li> <li>className 代替 class、htmlFor 代替 for 原因</li> <li>React 事件绑定与原生 DOM 事件差异</li> <li>合成事件原理、事件委托机制</li> <li>阻止合成事件冒泡几种方式</li> <li>dangerouslySetInnerHTML 使用场景与风险</li> <li>React 为什么不直接操作 DOM</li> <li>Fragment 作用，短语法 &lt;&gt;</li> <li>React 严格模式 StrictMode 作用</li> </ol> <h2 id="三类组件生命周期class-component">三、类组件生命周期（Class Component）</h2> <ol> <li>类组件完整生命周期分哪三个阶段</li> <li>constructor 执行时机与作用</li> <li>static getDerivedStateFromProps 执行时机与用途</li> <li>shouldComponentUpdate 返回值作用</li> <li>render 执行规则，禁止在其中修改 state</li> <li>componentDidMount 执行时机、常用场景</li> <li>getSnapshotBeforeUpdate 触发时机、返回值用途</li> <li>componentDidUpdate 参数含义，依赖判断写法</li> <li>componentWillUnmount 清理资源场景</li> <li>废弃生命周期函数有哪些，为什么废弃</li> <li>props 变化触发的生命周期流程</li> <li>setState 同步还是异步，底层批量更新逻辑</li> <li>setState 两种传参形式（对象/函数）区别</li> <li>多次连续 setState 合并规则</li> <li>如何在 setState 后拿到最新 state</li> </ol> <h2 id="四hooks-全套react168">四、Hooks 全套（React16.8+）</h2> <ol> <li>Hook 诞生背景，解决类组件什么痛点</li> <li>Hook 使用两条硬性规则</li> <li>useState 底层原理，为何数组解构不受顺序影响</li> <li>useState 传入函数初始化的优势</li> <li>useEffect 作用，依赖数组含义</li> <li>useEffect 模拟生命周期分别怎么写</li> <li>useEffect 返回清理函数执行时机</li> <li>依赖数组漏传变量引发的闭包陷阱</li> <li>useLayoutEffect 和 useEffect 执行顺序、区别</li> <li>useMemo 缓存计算值，解决什么问题</li> <li>useCallback 缓存函数，搭配子组件使用场景</li> <li>useMemo 与 useCallback 性能误区</li> <li>useRef 存储DOM、存储可变数据两种用法</li> <li>ref 传递 forwardRef 使用场景</li> <li>useImperativeHandle 作用</li> <li>useContext 跨层级传值，使用缺陷</li> <li>useReducer 适用场景，和 useState 对比</li> <li>useReducer 简单实现思路</li> <li>useId 作用，解决什么问题</li> <li>useTransition 区分紧急/非紧急更新</li> <li>useDeferredValue 延迟计算值</li> <li>useSyncExternalStore 订阅外部数据源</li> <li>useDebugValue 自定义Hook调试展示</li> <li>自定义 Hook 封装规范，复用逻辑思路</li> <li>Hook 闭包陷阱完整成因与解决方案</li> </ol> <h2 id="五react18-新特性">五、React18 新特性</h2> <ol> <li>React18 并发渲染 Concurrent Mode 含义</li> <li>自动批处理更新范围变化</li> <li>createRoot 替换 legacy root 差异</li> <li>Suspense 服务端/客户端用法</li> <li>Transitions API 解决场景</li> <li>自动插入批处理，异步回调内也合并更新</li> <li>useTransition 与 useDeferredValue 区别</li> <li>服务端组件 RSC 基础概念</li> <li>StrictMode 双重渲染机制目的</li> <li>批量更新边界，何时不会合并state更新</li> </ol> <h2 id="六diff-算法与渲染更新">六、Diff 算法与渲染更新</h2> <ol> <li>React Diff 三大策略</li> <li>同层比较，不跨层级对比原因</li> <li>无key、index key、唯一key三种场景对比</li> <li>节点删除、新增、移动判断逻辑</li> <li>文本节点、组件节点 Diff 区别</li> <li>列表 Diff 优化逻辑</li> <li>什么情况下组件会重新渲染</li> <li>如何避免不必要的重渲染</li> <li>memo、useMemo、useCallback 配合使用完整逻辑</li> <li>渲染流程：render → 生成VNode → Diff → 真实DOM更新</li> </ol> <h2 id="七组件通信方案">七、组件通信方案</h2> <ol> <li>父子组件 props 传值、回调传方法</li> <li>多层级透传 props 缺点</li> <li>Context API 跨层级通信优缺点</li> <li>Context 配合 useReducer 简易状态管理</li> <li>父访问子组件实例 ref</li> <li>子调用父方法回调函数</li> <li>兄弟组件通信几种方案</li> <li>全局事件总线实现与缺陷</li> <li>跨页面全局状态管理方案对比</li> </ol> <h2 id="八状态管理-redux--redux-toolkit--zustand">八、状态管理 Redux / Redux Toolkit / Zustand</h2> <ol> <li>Redux 三大核心原则</li> <li>Redux 五大核心概念：Store、Action、Reducer、Dispatch、State</li> <li>Reducer 必须纯函数要求</li> <li>Action plain object 规范，为什么不能异步</li> <li>中间件 middleware 作用，执行流程</li> <li>redux-thunk 异步处理原理</li> <li>redux-saga 对比 thunk 优势</li> <li>combineReducers 拆分模块原理</li> <li>react-redux 核心 API Provider、connect</li> <li>mapStateToProps、mapDispatchToProps 作用</li> <li>useSelector、useDispatch Hook 用法</li> <li>Redux 数据单向流动完整流程</li> <li>Redux Toolkit 解决原生Redux哪些痛点</li> <li>createSlice 内置 reducer、action 生成</li> <li>RTK 内置immer 实现可变写法原理</li> <li>RTK Query 接口缓存、请求管理</li> <li>Zustand 轻量状态库对比Redux优势</li> <li>状态持久化 redux-persist 流程</li> <li>大型项目状态库选型思路</li> <li>多组件共享全局状态最佳实践</li> </ol> <h2 id="九react-router-v6">九、React Router v6</h2> <ol> <li>v5 与 v6 核心改动差异</li> <li>createBrowserRouter 路由配置方式</li> <li>BrowserRouter、HashRouter、MemoryRouter 区别</li> <li>Routes 替代 Switch 作用</li> <li>Route element 传组件写法</li> <li>useNavigate 替代 useHistory</li> <li>路由传参 params、search、state 三种方式</li> <li>useParams、useSearchParams 使用</li> <li>嵌套路由 Outlet 占位原理</li> <li>index 索引路由作用</li> <li>Link、NavLink 区别</li> <li>路由守卫鉴权封装方案</li> <li>路由懒加载 + Suspense 配置</li> <li>useLocation 获取路由信息</li> <li>动态路由、路由拦截封装</li> </ol> <h2 id="十表单处理">十、表单处理</h2> <ol> <li>受控组件与非受控组件定义、区别</li> <li>受控组件完整实现思路</li> <li>非受控组件通过 ref 获取值场景</li> <li>多表单项统一封装受控逻辑</li> <li>第三方表单库 Formik / React Hook Form 对比</li> <li>React Hook Form 非受控高性能原理</li> <li>表单校验方案：原生、yup、zod</li> <li>表单批量重置、回填数据处理</li> </ol> <h2 id="十一样式方案">十一、样式方案</h2> <ol> <li>inline 内联样式优缺点</li> <li>CSS Modules 样式隔离原理</li> <li>styled-components CSS-in-JS 原理</li> <li>emotion 与 styled-components 对比</li> <li>tailwindcss 在React项目使用优势</li> <li>动态样式几种实现方式</li> <li>全局样式污染解决方案</li> </ol> <h2 id="十二工程化构建">十二、工程化构建</h2> <ol> <li>Create React App 底层 webpack 配置</li> <li>Vite 构建React项目优势，esbuild预构建</li> <li>vite.config.js 常用配置项</li> <li>webpack 处理jsx、ts-loader流程</li> <li>babel 转换 JSX、polyfill 原理</li> <li>.env 环境变量区分开发/测试/生产</li> <li>跨域代理 proxy 配置</li> <li>路由懒加载分包代码分割</li> <li>Tree-Shaking 生效条件</li> <li>打包体积优化手段</li> <li>第三方组件库按需引入配置</li> <li>unplugin-auto-import 自动导入hooks</li> </ol> <h2 id="十三网络请求封装">十三、网络请求封装</h2> <ol> <li>axios 请求拦截、响应拦截封装</li> <li>全局 loading、统一错误处理</li> <li>token 过期无感刷新实现逻辑</li> <li>重复请求取消方案 CancelToken</li> <li>请求并发处理</li> <li>封装自定义请求Hook</li> <li>SWR / React Query 数据请求缓存库原理</li> <li>React Query 自动重请求、缓存失效策略</li> </ol> <h2 id="十四性能优化专题">十四、性能优化专题</h2> <ol> <li>组件无效重渲染全部诱因</li> <li>memo 缓存函数组件条件</li> <li>useCallback 缓存函数使用场景</li> <li>useMemo 缓存计算结果适用场景</li> <li>列表渲染优化策略</li> <li>虚拟列表 react-window / react-virtualized 原理</li> <li>图片懒加载实现</li> <li>路由懒加载分包优化首屏</li> <li>大组件拆分、状态下沉优化</li> <li>避免在render内创建函数/对象</li> <li>React DevTools Profiler 排查卡顿</li> <li>减少Context频繁更新范围</li> <li>定时器、订阅事件组件卸载清理</li> <li>打包体积压缩：gzip、剔除无用依赖</li> <li>并发更新优化用户交互体验</li> </ol> <h2 id="十五进阶底层原理">十五、进阶底层原理</h2> <ol> <li>Fiber 架构解决旧架构什么问题</li> <li>Fiber 节点结构、任务拆分机制</li> <li>协调阶段、提交阶段分工</li> <li>可中断、可恢复、可优先级调度原理</li> <li>调和过程完整流程</li> <li>批量更新实现机制</li> <li>合成事件系统底层池化机制</li> <li>React 事务机制</li> <li>Portal 传送门实现原理，事件冒泡特点</li> <li>ErrorBoundary 错误捕获范围，无法捕获哪些错误</li> <li>React 服务端渲染 SSR 流程</li> <li>Next.js 与 CRA 区别，SSR/SSG/ISR 概念</li> <li>Hydrate 水合作用，水合不匹配成因</li> <li>RSC React Server Components 运行机制</li> <li>微前端中 React 应用隔离方案</li> </ol> <h2 id="十六项目实战场景题">十六、项目实战场景题</h2> <ol> <li>项目目录分层架构设计</li> <li>状态管理选型理由</li> <li>大型表单封装思路</li> <li>页面按钮、接口权限控制实现</li> <li>首屏加载缓慢优化方案</li> <li>列表大量数据渲染卡顿解决</li> <li>全局弹窗、消息提示封装</li> <li>路由鉴权、未登录跳转逻辑</li> <li>组件复用抽离自定义Hook规范</li> <li>线上报错捕获监控方案</li> <li>多环境变量、多渠道打包配置</li> <li>防抖节流在搜索框场景实现</li> <li>页面返回保留表单状态实现</li> <li>重复提交接口拦截处理</li> <li>React 项目迁移 TS 改造思路</li> </ol> https://lv-blog.pages.dev/posts/programming/frontend/vue-interview-questions/ Wed, 15 Jul 2026 00:46:10 +0800 https://lv-blog.pages.dev/posts/programming/frontend/vue-interview-questions/ <blockquote> <p>从互联网整理而来</p> </blockquote> <h2 id="一jsts-前置基础">一、JS/TS 前置基础</h2> <ol> <li>var、let、const 区别</li> <li>原型、原型链原理</li> <li>闭包概念、使用场景、内存泄漏风险</li> <li>同步异步、宏任务微任务执行顺序</li> <li>Promise 三种状态、链式调用、静态方法</li> <li>async/await 底层原理</li> <li>数组常用遍历方法差异</li> <li>深浅拷贝实现与区别</li> <li>Object.defineProperty 与 Proxy 对比</li> <li>Reflect 对象作用</li> <li>箭头函数与普通函数区别</li> <li>解构赋值、展开运算符</li> <li>ES6 模块 import/export 与 CommonJS 区别</li> <li>TypeScript 泛型、接口、类型推导</li> <li>EventLoop 完整执行流程</li> </ol> <h2 id="二vue2-基础核心">二、Vue2 基础核心</h2> <ol> <li>Vue 双向绑定底层原理</li> <li>Object.defineProperty 如何监听对象、数组变化</li> <li>Vue2 数组重写了哪些方法，为什么不能监听下标修改</li> <li>Dep、Watcher、Observer 三者关系</li> <li>什么是响应式依赖收集、派发更新</li> <li>数据劫持流程完整过程</li> <li>computed 和 watch 区别</li> <li>computed 缓存实现原理</li> <li>methods、computed、watch 使用场景区分</li> <li>Vue 生命周期全部钩子及执行时机</li> <li>created、mounted、updated、destroyed 使用场景</li> <li>父子组件生命周期执行顺序</li> <li>v-if 和 v-show 底层区别与性能差异</li> <li>v-for 绑定 key 的作用，key 不能用 index 的原因</li> <li>v-if 和 v-for 同时使用的优先级与问题</li> <li>v-model 底层语法糖实现</li> <li>修饰符 .lazy .number .trim 原理</li> <li>指令自定义实现，钩子函数有哪些</li> <li>过滤器 filter 使用场景，Vue3 废弃原因</li> <li>插值表达式、v-text、v-html 区别</li> <li>Vue 模板编译流程</li> <li>render 函数与 template 关系</li> <li>VNode 虚拟 DOM 结构作用</li> <li>Diff 算法执行流程</li> <li>Vue2 Diff 同层比较、key 作用、头尾指针优化</li> <li>patch 函数更新逻辑</li> <li>nextTick 原理，微任务/宏任务降级策略</li> <li>$nextTick 使用场景</li> </ol> <h2 id="三vue2-组件通信">三、Vue2 组件通信</h2> <ol> <li>父子组件 props 传递规则，单向数据流</li> <li>props 类型校验、默认值、必填配置</li> <li>$emit 子传父实现</li> <li>.sync 修饰符作用，Vue3 移除原因</li> <li>$parent、$children、$refs 获取组件/元素</li> <li>provide / inject 使用场景与响应式缺陷</li> <li>EventBus 事件总线实现、内存泄漏问题</li> <li>Vuex 全局状态通信完整流程</li> <li>$attrs、$listeners 跨层级透传</li> <li>跨页面、多层级组件通信方案对比</li> </ol> <h2 id="四vuex-状态管理">四、Vuex 状态管理</h2> <ol> <li>Vuex 五大核心概念 state、getters、mutations、actions、modules</li> <li>mutations 必须同步、actions 异步原因</li> <li>commit 和 dispatch 区别</li> <li>getters 缓存特性</li> <li>modules 模块划分，命名空间 namespaced</li> <li>辅助函数 mapState/mapGetters/mapMutations/mapActions 使用</li> <li>Vuex 持久化存储方案</li> <li>Vuex 严格模式 strict 作用</li> <li>多个组件同时修改同一 state 数据流</li> <li>Vuex 底层响应式原理</li> </ol> <h2 id="五vue-router-23">五、Vue Router 2/3</h2> <ol> <li>SPA 单页面路由实现原理</li> <li>hash 模式与 history 模式底层区别</li> <li>history 模式后端 nginx 配置问题</li> <li>路由导航守卫分类：全局、路由独享、组件内</li> <li>导航守卫执行完整顺序</li> <li>$route 和 $router 区别</li> <li>路由传参 params 和 query 差异</li> <li>params 刷新丢失参数解决方案</li> <li>动态路由匹配、路由嵌套</li> <li>路由懒加载实现与分包</li> <li>addRoutes、addRoute 动态添加路由</li> <li>路由元信息 meta 使用场景</li> <li>路由缓存 keep-alive 原理</li> <li>include/exclude/max 参数作用</li> <li>activated、deactivated 生命周期钩子</li> <li>路由跳转 push、replace、go 区别</li> <li>登录鉴权全局路由拦截实现</li> </ol> <h2 id="六vue2-进阶知识点">六、Vue2 进阶知识点</h2> <ol> <li>keep-alive 缓存组件底层逻辑</li> <li>异步组件、组件懒加载</li> <li>组件递归实现菜单、树形结构</li> <li>$once、$off、$on 事件方法</li> <li>插槽分类：默认插槽、具名插槽、作用域插槽</li> <li>作用域插槽数据传递原理</li> <li>v-once 指令作用</li> <li>Vue 模板编译生成 AST 抽象语法树</li> <li>异步更新队列机制</li> <li>页面大量数据渲染卡顿优化方案</li> <li>Object.freeze 冻结数据对响应式的影响</li> <li>$set 原理，什么场景必须使用</li> <li>Vue2 响应式存在的缺陷</li> <li>全局过滤器、全局指令、全局组件注册</li> <li>mixin 混入原理、合并规则、冲突问题</li> </ol> <h2 id="七vue3-核心升级composition-api">七、Vue3 核心升级（Composition API）</h2> <ol> <li>Vue3 相比 Vue2 性能提升点</li> <li>Vue3 响应式改用 Proxy 优势</li> <li>Proxy 对比 Object.defineProperty 解决了哪些痛点</li> <li>Reflect 配合 Proxy 的作用</li> <li>reactive、ref 区别与底层实现</li> <li>ref 为什么基础类型需要包裹对象</li> <li>toRef、toRefs 使用场景，解决的问题</li> <li>computed 在 setup 中使用方式</li> <li>watch、watchEffect 区别</li> <li>watch 监听对象、数组深度监听配置</li> <li>setup 执行时机，this 指向问题</li> <li>setup 参数 props、context 内容</li> <li>Composition API 对比 Options API 优势</li> <li>script setup 语法糖带来的变化</li> <li>script setup 中 defineProps、defineEmits、defineExpose</li> <li>生命周期钩子组合式写法 onMounted/onUpdated 等</li> <li>getCurrentInstance 获取组件实例</li> <li>provide / inject 在 Vue3 中如何实现响应式</li> <li>自定义 hooks 封装思路，复用逻辑</li> <li>Vue3 生命周期完整列表，与 Vue2 对应关系</li> </ol> <h2 id="八vue3-模板编译diff-优化">八、Vue3 模板、编译、Diff 优化</h2> <ol> <li>Vue3 模板编译优化：PatchFlags 标记</li> <li>静态提升原理，减少 VNode 创建开销</li> <li>缓存内联事件处理函数</li> <li>Vue3 Diff 算法优化：最长递增子序列</li> <li>Diff 对比流程相比 Vue2 改进点</li> <li>Fragment 根节点多标签支持原理</li> <li>Teleport 传送门组件底层实现</li> <li>Suspense 异步组件加载处理</li> <li>v-model 在 Vue3 语法变更，多 v-model 实现</li> <li>.v-model 修饰符自定义处理</li> <li>插槽 v-slot 简写语法变化</li> <li>Vue3 移除 filter 过滤器替代方案</li> </ol> <h2 id="九piniavue3-状态管理">九、Pinia（Vue3 状态管理）</h2> <ol> <li>Pinia 相比 Vuex 的优势</li> <li>Pinia 核心概念 state、getters、actions</li> <li>Pinia 支持同步异步，不再区分 mutations</li> <li>defineStore 定义仓库，id 作用</li> <li>直接修改 state 与 $patch 批量更新区别</li> <li>$reset、$subscribe、$onAction 使用场景</li> <li>Pinia 模块化拆分，无需命名空间</li> <li>Pinia 持久化插件使用</li> <li>setup 语法下使用 Pinia</li> <li>多个仓库互相调用数据方法</li> </ol> <h2 id="十vue-router-4vue3">十、Vue Router 4（Vue3）</h2> <ol> <li>createRouter、createWebHashHistory、createWebHistory</li> <li>RouterView、RouterLink v-slot 插槽用法</li> <li>useRoute、useRouter 组合式 API 获取路由实例</li> <li>动态路由 addRoute 替换 addRoutes</li> <li>路由守卫组合式写法</li> <li>路由缓存与 Suspense 配合</li> <li>路由元类型 TS 类型提示处理</li> </ol> <h2 id="十一vue3-高级特性">十一、Vue3 高级特性</h2> <ol> <li>watchPostEffect、watchSyncEffect 区别</li> <li>shallowRef、shallowReactive 浅层响应式作用</li> <li>readonly、shallowReadonly 只读代理</li> <li>customRef 自定义响应式引用</li> <li>effectScope 作用域收集副作用</li> <li>defineCustomElement 构建原生 webComponent</li> <li>Vue3 全局 API 变更 createApp 替代 new Vue()</li> <li>app.config 全局配置项</li> <li>全局组件、指令、插件注册方式变化</li> <li>Transition、TransitionGroup 动画组件原理</li> <li>v-memo 缓存 VNode 优化渲染</li> <li>异步 setup 函数配合 Suspense</li> </ol> <h2 id="十二工程化--构建工具">十二、工程化 &amp; 构建工具</h2> <ol> <li>Vue CLI 与 Vite 底层构建区别</li> <li>Vite 冷启动快的原理，esbuild 预构建</li> <li>Vite 热更新 HMR 实现机制</li> <li>vite.config.js 常用配置</li> <li>webpack 打包 Vue 文件流程 vue-loader</li> <li>.vue SFC 单文件组件解析过程</li> <li>scoped 样式隔离原理，深度选择器 /deep/ ::v-deep :deep()</li> <li>CSS Module 使用方式</li> <li>环境变量 .env 文件区分开发测试生产</li> <li>跨域代理 proxy 配置</li> <li>打包体积优化方案</li> <li>分包、懒加载、gzip 压缩配置</li> <li>TS 在 Vue 项目中配置声明文件</li> <li>第三方 UI 库按需引入配置</li> <li>全局自动导入组件、API 插件 unplugin-auto-import</li> </ol> <h2 id="十三网络请求与封装">十三、网络请求与封装</h2> <ol> <li>axios 拦截器请求、响应封装思路</li> <li>请求 loading、统一错误处理封装</li> <li>token 过期自动刷新逻辑</li> <li>请求取消、重复请求拦截方案</li> <li>并发请求处理</li> <li>接口数据统一格式化处理</li> <li>封装请求 hooks 适配 Vue3</li> </ol> <h2 id="十四性能优化专项">十四、性能优化专项</h2> <ol> <li>减少不必要组件渲染手段</li> <li>v-once、v-memo 使用场景</li> <li>长列表虚拟滚动实现原理</li> <li>响应式数据避免不必要监听</li> <li>computed 缓存减少重复计算</li> <li>图片懒加载方案</li> <li>路由懒加载分包优化</li> <li>keep-alive 合理缓存减少重复请求</li> <li>避免频繁触发 watch</li> <li>大列表数据冻结 Object.freeze</li> <li>减少 DOM 操作，合理使用虚拟 DOM</li> <li>打包体积优化：Tree-Shaking、剔除无用依赖</li> <li>Vite/Webpack 构建速度优化</li> <li>内存泄漏常见场景：定时器、事件监听、未销毁订阅</li> <li>Chrome Performance 面板排查页面卡顿</li> </ol> <h2 id="十五混合插件拓展开发">十五、混合、插件、拓展开发</h2> <ol> <li>Vue2 mixin 缺陷，Vue3 用 hooks 替代原因</li> <li>Vue 插件开发完整结构 install 方法</li> <li>全局自定义指令完整开发</li> <li>封装业务通用组件规范</li> <li>二次封装 Element Plus / Ant Design Vue</li> <li>封装全局弹窗、消息提示组件</li> <li>自定义全局权限指令 v-permission</li> <li>页面权限、按钮权限实现方案</li> <li>全局错误捕获 errorHandler</li> <li>埋点、全局请求监控插件封装</li> </ol> <h2 id="十六项目实战场景问答题">十六、项目实战场景问答题</h2> <ol> <li>项目整体架构分层设计</li> <li>Vue2 升级 Vue3 迁移改造遇到的问题</li> <li>大型项目状态管理选型 Vuex / Pinia 理由</li> <li>复杂树形菜单、表格组件封装思路</li> <li>表单校验全局统一封装方案</li> <li>页面权限控制完整实现流程</li> <li>多环境配置、多渠道打包处理</li> <li>首屏加载速度优化做了哪些处理</li> <li>路由鉴权、未登录拦截逻辑</li> <li>列表大量数据渲染卡顿如何解决</li> <li>项目打包体积过大优化方案</li> <li>页面缓存、返回保留表单状态实现</li> <li>接口并发冲突、重复提交拦截</li> <li>移动端适配方案 vw/vh、rem</li> <li>线上报错监控、异常捕获方案</li> </ol> https://lv-blog.pages.dev/posts/programming/frontend/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3%E9%9D%A2%E8%AF%95%E9%A2%98/ Wed, 15 Jul 2026 00:46:10 +0800 https://lv-blog.pages.dev/posts/programming/frontend/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3%E9%9D%A2%E8%AF%95%E9%A2%98/ <blockquote> <p>从互联网整理而来</p> </blockquote> <h2 id="一基础概念与运行机制">一、基础概念与运行机制</h2> <ol> <li>小程序与H5、App的核心区别</li> <li>小程序双线程模型分别是什么，各自职责</li> <li>逻辑层与视图层通信方式</li> <li>小程序渲染流程完整过程</li> <li>小程序启动流程（冷启动、热启动）</li> <li>冷启动和热启动的差异</li> <li>小程序分包加载机制概念</li> <li>主包与分包限制规则</li> <li>独立分包和普通分包区别</li> <li>小程序的生命周期分类（应用、页面、组件）</li> <li>小程序页面栈规则，最多存放多少页面</li> <li>小程序登录流程整体逻辑</li> <li>微信授权两种类型区别（基础授权、隐私授权）</li> <li>小程序原生宿主环境提供哪些能力</li> <li>小程序更新机制，静默更新与主动更新</li> </ol> <h2 id="二文件结构与配置">二、文件结构与配置</h2> <ol> <li>小程序四种核心文件作用（json/wxml/wxss/js）</li> <li>app.json 全局配置常用字段</li> <li>page.json 页面配置优先级与app.json关系</li> <li>sitemap.json 作用</li> <li>project.config.json 用途</li> <li>app.js 全局App实例生命周期</li> <li>页面js Page构造器生命周期</li> <li>组件js Component构造器生命周期</li> <li>usingComponents 引入组件配置</li> <li>全局样式app.wxss和页面wxss权重规则</li> <li>wxss与css差异，特有特性</li> <li>rpx单位换算规则，适配原理</li> <li>小程序支持的选择器有哪些，不支持哪些</li> <li>图片、静态资源本地与线上引入规则</li> <li>分包配置subpackages字段参数含义</li> </ol> <h2 id="三wxml-模板语法">三、WXML 模板语法</h2> <ol> <li>WXML数据绑定语法规则</li> <li>插值表达式支持哪些运算</li> <li>wx:if、wx:elif、wx:else 条件渲染</li> <li>hidden属性与wx:if性能差异</li> <li>wx:for列表渲染，wx:key作用</li> <li>wx:key使用规范，禁止index的场景</li> <li>block标签作用，是否生成真实节点</li> <li>模板template定义与引入，数据传递</li> <li>wxs脚本作用，运行环境限制</li> <li>wxs与js的区别，能否调用小程序API</li> <li>事件绑定bind、catch、capture-bind区别</li> <li>mut-bind互斥事件作用</li> <li>事件传参几种实现方式</li> <li>数据双向绑定model语法</li> <li>标签属性布尔值绑定规则</li> </ol> <h2 id="四组件系统原生自定义组件">四、组件系统（原生+自定义组件）</h2> <ol> <li>小程序自定义组件创建完整结构</li> <li>Component中properties传参配置规则</li> <li>properties三种数据监听方式</li> <li>data、properties、observers执行顺序</li> <li>observers监听对象、数组深层变化写法</li> <li>组件生命周期完整钩子</li> <li>lifetimes与pageLifetimes区别</li> <li>组件插槽slot，具名插槽使用</li> <li>组件父子通信方式</li> <li>triggerEvent触发自定义事件传参</li> <li>selectComponent、selectAllComponents获取子组件</li> <li>behaviors复用逻辑，合并规则</li> <li>原生内置常用容器、表单、媒体组件</li> <li>scroll-view滚动注意事项</li> <li>movable-area、movable-view实现拖拽原理</li> <li>canvas新旧版本差异，2d画布使用</li> <li>web-view嵌入H5通信方案</li> <li>cover-view、cover-image使用限制场景</li> <li>自定义组件样式隔离options配置</li> <li>组件pureDataPattern作用</li> </ol> <h2 id="五数据管理与渲染更新">五、数据管理与渲染更新</h2> <ol> <li>setData底层更新原理</li> <li>setData频繁调用性能问题</li> <li>setData单次数据大小限制</li> <li>局部更新数据简写写法</li> <li>直接修改this.data不调用setData为什么不更新视图</li> <li>复杂对象、数组更新setData写法</li> <li>全局数据共享几种方案</li> <li>getApp()全局变量优缺点</li> <li>globalData跨页面同步更新缺陷</li> <li>数据本地持久化storage存储限制</li> <li>wx.setStorage同步异步API区别</li> <li>storage大数据存储优化方案</li> <li>页面间数据传递方式对比</li> <li>页面栈取上一页实例方法</li> <li>大数据列表渲染卡顿优化思路</li> </ol> <h2 id="六路由与页面跳转">六、路由与页面跳转</h2> <ol> <li>五种路由API区别（navigateTo/redirectTo/reLaunch/switchTab/navigateBack）</li> <li>switchTab跳转限制条件</li> <li>navigateTo无法跳tab页面解决方案</li> <li>路由传参两种方式，长参数丢失问题</li> <li>页面返回监听onUnload、onShow触发时机</li> <li>获取当前页面栈方法getCurrentPages()</li> <li>路由拦截统一封装思路</li> <li>tabBar配置规则，自定义tabBar实现</li> <li>自定义tabBar踩坑点</li> <li>页面跳转后保留表单状态方案</li> </ol> <h2 id="七网络请求与后端交互">七、网络请求与后端交互</h2> <ol> <li>wx.request请求基础配置</li> <li>request合法域名校验规则，开发环境规避</li> <li>小程序请求携带cookie机制</li> <li>请求header统一封装token思路</li> <li>拦截器封装wx.request方案</li> <li>并发请求、请求超时处理</li> <li>文件上传wx.uploadFile参数配置</li> <li>文件下载wx.downloadFile使用场景</li> <li>websocket实时通信完整流程</li> <li>socket断线重连实现逻辑</li> <li>接口返回加密数据解密处理</li> <li>批量请求统一捕获异常</li> <li>小程序不支持跨域的根本原因</li> <li>上传图片压缩、裁剪处理</li> <li>上传进度监听API</li> </ol> <h2 id="八登录授权用户信息">八、登录、授权、用户信息</h2> <ol> <li>wx.login获取code作用</li> <li>code换取openid完整流程</li> <li>openid、unionid区别与生成规则</li> <li>隐私保护新规下获取用户头像昵称方案</li> <li>getUserInfo接口废弃替代方案</li> <li>手机号一键登录流程</li> <li>授权scope各权限含义</li> <li>用户拒绝授权后重新引导授权逻辑</li> <li>登录态session_key过期处理</li> <li>第三方登录、关联账号实现</li> <li>登录状态持久化存储方案</li> <li>多端打通unionid获取条件</li> <li>隐私协议弹窗实现规范</li> <li>小程序订阅消息下发流程</li> <li>模板消息与订阅消息区别</li> </ol> <h2 id="九媒体图片地图设备api">九、媒体、图片、地图、设备API</h2> <ol> <li>wx.chooseMedia选择图片视频参数</li> <li>图片预览wx.previewImage使用</li> <li>图片本地缓存方案</li> <li>录音、播放音频API使用</li> <li>video视频播放常见问题</li> <li>map地图组件标记、覆盖物绘制</li> <li>获取当前定位wx.getLocation权限配置</li> <li>后台持续定位配置要求</li> <li>设备信息、系统API获取</li> <li>振动、剪贴板、屏幕亮度API</li> <li>扫码wx.scanCode场景</li> <li>蓝牙BLE设备连接流程</li> <li>NFC基础使用场景</li> <li>相机camera组件适配</li> <li>文件管理FileSystemManager读写文件</li> </ol> <h2 id="十性能优化专项">十、性能优化专项</h2> <ol> <li>setData性能优化手段</li> <li>长列表渲染优化方案</li> <li>虚拟列表实现思路</li> <li>分包加载优化首屏速度</li> <li>图片懒加载处理</li> <li>减少页面、组件层级嵌套</li> <li>wxss样式体积压缩优化</li> <li>分包预加载preloadRule配置</li> <li>避免频繁创建定时器、监听事件</li> <li>页面卸载清除所有订阅、定时器</li> <li>包体积超限优化方案</li> <li>开发者工具性能面板排查卡顿</li> <li>避免在onShow频繁请求接口</li> <li>图片资源压缩、webp适配</li> <li>减少observers深层监听开销</li> </ol> <h2 id="十一适配兼容多端">十一、适配、兼容、多端</h2> <ol> <li>rpx、px、rem转换关系</li> <li>刘海屏、安全区适配css写法</li> <li>深色模式适配配置</li> <li>不同微信版本API兼容处理</li> <li>caniuse判断接口是否可用</li> <li>小程序转H5、转uni-app差异</li> <li>平板、PC端小程序适配要点</li> <li>低版本微信兼容降级方案</li> <li>字体、图片多设备适配</li> <li>自定义导航栏适配胶囊按钮</li> </ol> <h2 id="十二工程化第三方框架">十二、工程化、第三方框架</h2> <ol> <li>原生小程序、uni-app、Taro区别</li> <li>Taro编译原理，多端适配逻辑</li> <li>uni-app分包、条件编译写法</li> <li>小程序npm依赖使用规则</li> <li>按需引入UI组件库优化</li> <li>工程化打包、环境变量区分</li> <li>多环境请求域名配置</li> <li>ESLint校验小程序代码规范</li> <li>Git协同开发规范</li> <li>CI自动上传小程序工具</li> </ol> <h2 id="十三支付分享广告业务能力">十三、支付、分享、广告、业务能力</h2> <ol> <li>小程序支付完整流程</li> <li>支付回调后端处理逻辑</li> <li>分享onShareAppMessage、onShareTimeline配置</li> <li>分享图、分享路径动态处理</li> <li>分享到朋友圈限制条件</li> <li>插屏广告、激励视频广告接入</li> <li>小程序跳转其他小程序API</li> <li>跳转限制与关联配置要求</li> <li>客服消息接入流程</li> <li>商品卡片、搜索收录配置sitemap</li> </ol> <h2 id="十四安全审核合规">十四、安全、审核、合规</h2> <ol> <li>小程序合法域名、业务域名、web-view域名区别</li> <li>前端存储敏感信息安全风险</li> <li>session_key不能传输到前端原因</li> <li>接口数据防篡改简单方案</li> <li>隐私合规要求有哪些</li> <li>图片、内容审核API调用</li> <li>小程序常见审核驳回原因</li> <li>诱导分享、诱导支付违规点</li> <li>本地存储数据加密思路</li> <li>防止恶意刷接口方案</li> </ol> <h2 id="十五实战场景综合题">十五、实战场景综合题</h2> <ol> <li>项目整体目录架构设计</li> <li>封装通用请求库完整思路</li> <li>全局登录拦截、未登录跳转实现</li> <li>大型表单组件封装与校验</li> <li>多页面共享登录状态管理</li> <li>列表上拉加载、下拉刷新封装</li> <li>图片上传、预览、删除完整流程</li> <li>分包改造解决主包体积超限</li> <li>页面返回保留搜索条件、分页数据</li> <li>小程序热更新主动检测逻辑</li> <li>websocket聊天断线重连方案</li> <li>自定义tabBar遇到的坑与解决</li> <li>页面大量数据滑动卡顿优化</li> <li>线上白屏、加载失败排查思路</li> <li>原生小程序迁移Taro/uni改造方案</li> </ol>