前端

从互联网整理而来 一、Dart 基础 Dart 的数据类型有哪些？ var、final、const 的区别 Dart 中 null safety 是什么，如何使用？ late 关键字作用与使用场景 Dart 函数可选参数、命名参数、位置参数区别 箭头函数适用范围 Dart 异步：Future、async/await 原理 Stream 与 Future 区别，StreamController 使用 sync*、async*、yield、yield each 作用 Dart 类中 extends、implements、mixin 区别 mixin 有什么限制，能否构造函数传参 抽象类与接口区别 泛型 T、?T、T?、required T 区别 Dart 单例几种实现方式 工厂构造函数 factory 作用 常量构造函数使用条件 级联运算符 .. 原理 空值操作符 ?.、??、??= 用法 Dart 枚举进阶用法，能否自定义属性方法 Isolate 是什么，和线程区别，通信方式 Isolate 共享内存吗，数据传递限制 Zone 作用是什么 Dart 垃圾回收机制 函数一等公民体现在哪里 typedef 作用与场景 二、Flutter 框架核心原理 Flutter 三棵树：Widget、Element、RenderTree 关系 StatelessWidget 和 StatefulWidget 底层差异 State 生命周期完整流程 initState、didChangeDependencies、build、didUpdateWidget、dispose 执行时机 setState 底层更新机制 Widget 为什么是不可变的 immutable Element 作用，Element 复用逻辑 RenderObject 职责是什么 Key 的作用，几种 Key 区别（ValueKey、ObjectKey、UniqueKey、GlobalKey） GlobalKey 使用场景与隐患 LocalKey 解决什么问题 Widget 重建流程，哪些情况会触发重建 什么是 const Widget，好处是什么 Flutter 渲染流程：布局、绘制、合成步骤 布局约束流程：Constraints 传递规则 父布局约束如何限制子控件尺寸 RepaintBoundary 作用，何时使用 Layer 树作用，缓存机制 Flutter 与原生 Android/iOS 渲染区别 Skia 引擎作用 Impeller 渲染引擎对比 Skia 优势 Flutter 绘制原理，Canvas、Paint 流程 PipelineOwner 作用 WidgetsBinding、SchedulerBinding 职责 帧调度流程：Vsync、帧回调执行顺序 transientCallbacks、persistentCallbacks、postFrameCallbacks 区别 Flutter 热重载原理，热重启区别 编译模式：debug/profile/release 差异 AOT、JIT 编译区别 Flutter 页面路由底层实现原理 三、布局 & 基础组件 Row Column Flex 布局区别，主轴交叉轴概念 MainAxisAlignment、CrossAxisAlignment 所有枚举值含义 Expanded、Flexible 区别，flex 参数作用 Stack、Positioned 布局规则 Align、Center 底层关系 Padding、Container 内部结构 Container 嵌套过多有什么性能问题 SizedBox、ConstrainedBox、UnconstrainedBox 用途 AspectRatio、FittedBox 缩放逻辑 Wrap 自动换行实现原理 ListView 几种构造方式区别（默认、builder、separated） ListView.builder 高性能原理，复用机制 ListView 滚动复用失效场景 GridView 使用与性能优化 SingleChildScrollView 嵌套 ListView 报错解决方案 CustomScrollView、Sliver 体系是什么 SliverList、SliverGrid、SliverAppBar、SliverToBoxAdapter 使用场景 SliverPersistentHeader 固定吸顶实现 CustomScrollView 滚动统一原理 Table、DataTable 布局特性 IntrinsicHeight、IntrinsicWidth 性能损耗原因 LayoutBuilder 获取父布局约束场景 MediaQuery 获取设备信息，MediaQuery.of(context) 刷新机制 LayoutId、MultiChildLayout 自定义布局 Flow 高性能流式布局适用场景 四、状态管理 State 自身状态管理优缺点 InheritedWidget 底层原理，数据传递逻辑 InheritedModel 对比 InheritedWidget 优势 Provider 整套库实现原理（ChangeNotifierProvider、Consumer、Selector） Selector 为什么能精准局部刷新 ChangeNotifier 通知更新机制 StateProvider、FutureProvider、StreamProvider 区别 Riverpod 对比 Provider 改进点 Riverpod 全局状态、自动 dispose、无 context 优势 StateNotifier、AsyncNotifier 使用场景 Bloc 核心概念：Event、State、Bloc/Cubit Cubit 与 Bloc 区别 BlocProvider、BlocConsumer、BlocBuilder、BlocListener 分工 Bloc 状态单一数据源优势 GetX 状态管理原理，GetController 生命周期 GetX 全局路由、依赖注入实现 GetX 优缺点，存在什么性能隐患 Redux 在 Flutter 中使用逻辑 MobX 响应式原理，Observable、Action、Reaction 大型项目如何选型状态管理方案 跨页面共享状态几种实现方式对比 状态持久化配合状态管理怎么做 五、路由 & 导航 Navigator 1.0 路由栈管理原理 MaterialPageRoute、CupertinoPageRoute 区别 PageRouteBuilder 自定义转场动画 Navigator push/pop/pushReplacement/popUntil 逻辑 路由传参几种方式 Navigator 2.0 核心组件：Router、RouteInformationParser、RouterDelegate Navigator 2.0 完整路由流程 GoRouter 框架底层封装逻辑 GoRouter 嵌套路由、路由守卫、参数获取 路由栈持久化、页面状态保存方案 底部导航多 Tab 页面状态保持实现 路由拦截、登录鉴权统一处理 原生页面与 Flutter 页面互相跳转路由处理 页面返回监听 WillPopScope、PopScope 深度链接 deep link 适配方案 六、动画 Flutter 动画核心类：Animation、AnimationController、CurvedAnimation AnimationController vsync 作用，为什么需要 TickerProvider SingleTickerProviderStateMixin、TickerProviderStateMixin 区别 Tween、Animatable 差值计算原理 显式动画与隐式动画区别 AnimatedContainer、AnimatedOpacity 等隐式动画底层 Hero 共享元素动画实现原理 PageRoute 共享 Hero 流程 CustomAnimation 自定义动画组件 交错动画 Interval 使用 动画性能优化，避免重建 Lottie 动画集成原理，性能注意点 循环动画、反向动画实现 动画暂停、恢复、释放资源处理 自定义路由转场动画 七、网络 & 本地存储 dio 库封装思路，拦截器使用 dio 统一请求头、错误处理、token 自动刷新 取消请求 CancelToken 使用场景 并发请求、超时处理 Json 序列化反序列化几种方式（手动、json_serializable） fromJson/toJson 生成流程 Freezed 数据模型优势 http 库与 dio 对比 WebSocket 在 Flutter 中使用，重连机制 shared_preferences 底层存储原理 Hive 本地数据库优势，Box 使用 Hive 加密、大数据存储优化 sqflite 数据库操作，事务使用 Isolate 中操作数据库注意事项 文件读写 path_provider 获取路径 图片缓存 cached_network_image 实现逻辑 网络请求缓存策略设计 接口统一异常捕获封装方案 八、原生交互 MethodChannel MethodChannel、BasicMessageChannel、EventChannel 三者区别 MethodChannel 双向通信完整流程 Flutter 调用 Android 原生代码步骤 Flutter 调用 iOS OC/Swift 步骤 原生主动推送数据给 Flutter 使用哪个 Channel 传参类型限制，复杂对象传递方案 多页面 Channel 单例管理 PlatformView 嵌入原生 View（Android View、iOS UIView） PlatformView 性能问题与优化 原生页面跳转 Flutter 传参 权限通过原生通道申请方案 混合栈开发：flutterBoost 原理 flutterBoost 页面生命周期同步问题 原生资源与 Flutter 资源冲突处理 通信通道内存泄漏如何避免 九、性能优化专项 Widget 重建常见诱因与规避手段 const 构造优化原理 Key 不合理使用导致的性能问题 ListView 长列表优化方案 图片加载优化：尺寸、缓存、压缩 RepaintBoundary 拆分重绘区域场景 减少 Layer 树层级优化 避免使用 Intrinsic 系列控件原因 动画卡顿排查思路 DevTools 工具使用：性能面板、内存、Widget 检查 内存泄漏常见场景（Timer、Stream、Channel、Animation） 大图片、大量对象内存释放方案 Isolate 处理耗时计算优化 UI build 方法避免耗时操作 布局嵌套过深优化手段 页面 dispose 资源释放规范 Profile 模式性能排查要点 启动速度优化（包体积、懒加载、预加载） Flutter 包体积优化方案 滑动卡顿完整排查流程 十、图片、手势、输入、弹窗组件 Image 几种构造：AssetImage、NetworkImage、FileImage、MemoryImage ImageProvider 缓存机制 Image.network 缓存缺陷，cached_network_image 弥补方案 DecorationImage、FadeInImage 使用 GestureDetector 手势识别原理，多手势冲突 Listener 底层原始手势与 GestureDetector 区别 手势竞争、手势忽略场景 InkWell 水波纹实现原理，必须嵌套 Material TextField 控制器 TextEditingController 使用 TextField 输入监听、格式化、光标控制 表单 Form、GlobalKey 校验逻辑 ModalRoute、showDialog、showBottomSheet 弹窗原理 弹窗状态共享问题解决方案 Draggable、LongPressDraggable 拖拽实现 Transform 变换不改变布局约束特性 十一、项目工程 & 打包适配 pubspec.yaml 各字段含义，依赖版本约束 本地依赖、Git 依赖、远程依赖配置 pub 依赖冲突解决方法 Flutter 多环境配置（开发/测试/生产） Flavor 多渠道打包 Android & iOS Android 打包 keystore 配置，iOS 证书配置 AndroidManifest、Info.plist 权限适配 屏幕适配方案：媒体查询、比例、flutter_screenutil 深色模式适配实现 多语言国际化 intl 库使用 App 图标、启动页配置 Flutter 插件开发流程 平台区分代码编写（dart.io、Platform 判断） 混合开发项目目录结构 CI/CD 自动打包脚本思路 版本号管理升级方案 第三方插件兼容问题处理 十二、进阶底层 & 疑难场景 WidgetsApp、MaterialApp、CupertinoApp 内部结构 ThemeData 主题分发原理，局部主题覆盖 Navigator 上下文与页面上下文区别 context 获取上层 Widget 原理，BuildContext 分类 State 保存在 Element 中，Widget 重建 State 不销毁条件 Offstage、Visibility 控件隐藏区别 AbsorbPointer、IgnorePointer 拦截手势差异 Clip 裁剪控件：ClipRect、ClipRRect、ClipOval 性能 BackdropFilter 模糊控件性能损耗原因 RenderBox 自定义控件完整流程 自定义 RenderObject 实现步骤 自定义 MultiChildRenderObjectWidget ScrollController 监听滚动、滚动定位 ScrollPhysics 滚动回弹、阻尼自定义 监听应用前后台切换 AppLifecycleState 截屏、屏幕亮度、震动原生能力实现 WebView 插件使用与通信 Flutter Web 编译差异，平台兼容问题 Flutter Windows/macOS/Linux 桌面端适配要点 如何实现全局捕获异常 Timer、StreamSubscription 忘记取消的内存泄漏 列表 item 点击状态保存方案 异步并发竞态条件问题处理 图片大量加载 OOM 解决方案 原生弹窗遮挡 Flutter 页面问题 十三、综合项目面试问答题 讲一下你项目整体架构分层 项目状态管理选型原因 长列表卡顿怎么优化的 多页面共享登录状态如何实现 token 过期统一拦截处理方案 项目混合栈开发遇到哪些坑 图片缓存、网络缓存怎么设计 全局网络加载弹窗、错误页封装思路 项目通用业务组件封装思路 线上卡顿、崩溃排查处理经验 如何实现页面无网络重试逻辑 复杂表单页面状态管理方案 项目包体积优化做了哪些操作 多渠道、多环境配置实现 封装通用 Dio 请求库完整思路

从互联网整理而来 一、JS 基础前置 原型与原型链 闭包、闭包引发的内存泄漏场景 同步异步、宏任务微任务执行顺序 Promise 状态、静态方法、链式调用 async/await 原理 深浅拷贝实现与区别 this 指向五种场景 箭头函数与普通函数差异 ES6 解构、展开运算符、剩余参数 var / let / const 区别 CommonJS 与 ES Module 差异 TypeScript 接口、泛型、交叉类型、联合类型 EventLoop 完整执行流程 防抖节流实现原理 纯函数定义与特性 二、React 基础核心概念 React 设计思想与核心理念 虚拟 DOM 是什么，作用与优势 JSX 语法本质，编译产物 JSX 中 {} 可放入哪些内容，不能放什么 React 元素与组件区别 函数组件与类组件区别 纯组件 PureComponent 原理 React 单向数据流含义 props 只读特性，为什么不能直接修改 props.children 有哪些类型 key 的作用，为什么不能用 index 做 key React 列表渲染注意事项 className 代替 class、htmlFor 代替 for 原因 React 事件绑定与原生 DOM 事件差异 合成事件原理、事件委托机制 阻止合成事件冒泡几种方式 dangerouslySetInnerHTML 使用场景与风险 React 为什么不直接操作 DOM Fragment 作用，短语法 <> React 严格模式 StrictMode 作用 三、类组件生命周期（Class Component） 类组件完整生命周期分哪三个阶段 constructor 执行时机与作用 static getDerivedStateFromProps 执行时机与用途 shouldComponentUpdate 返回值作用 render 执行规则，禁止在其中修改 state componentDidMount 执行时机、常用场景 getSnapshotBeforeUpdate 触发时机、返回值用途 componentDidUpdate 参数含义，依赖判断写法 componentWillUnmount 清理资源场景 废弃生命周期函数有哪些，为什么废弃 props 变化触发的生命周期流程 setState 同步还是异步，底层批量更新逻辑 setState 两种传参形式（对象/函数）区别 多次连续 setState 合并规则 如何在 setState 后拿到最新 state 四、Hooks 全套（React16.8+） Hook 诞生背景，解决类组件什么痛点 Hook 使用两条硬性规则 useState 底层原理，为何数组解构不受顺序影响 useState 传入函数初始化的优势 useEffect 作用，依赖数组含义 useEffect 模拟生命周期分别怎么写 useEffect 返回清理函数执行时机 依赖数组漏传变量引发的闭包陷阱 useLayoutEffect 和 useEffect 执行顺序、区别 useMemo 缓存计算值，解决什么问题 useCallback 缓存函数，搭配子组件使用场景 useMemo 与 useCallback 性能误区 useRef 存储DOM、存储可变数据两种用法 ref 传递 forwardRef 使用场景 useImperativeHandle 作用 useContext 跨层级传值，使用缺陷 useReducer 适用场景，和 useState 对比 useReducer 简单实现思路 useId 作用，解决什么问题 useTransition 区分紧急/非紧急更新 useDeferredValue 延迟计算值 useSyncExternalStore 订阅外部数据源 useDebugValue 自定义Hook调试展示 自定义 Hook 封装规范，复用逻辑思路 Hook 闭包陷阱完整成因与解决方案 五、React18 新特性 React18 并发渲染 Concurrent Mode 含义 自动批处理更新范围变化 createRoot 替换 legacy root 差异 Suspense 服务端/客户端用法 Transitions API 解决场景 自动插入批处理，异步回调内也合并更新 useTransition 与 useDeferredValue 区别 服务端组件 RSC 基础概念 StrictMode 双重渲染机制目的 批量更新边界，何时不会合并state更新 六、Diff 算法与渲染更新 React Diff 三大策略 同层比较，不跨层级对比原因 无key、index key、唯一key三种场景对比 节点删除、新增、移动判断逻辑 文本节点、组件节点 Diff 区别 列表 Diff 优化逻辑 什么情况下组件会重新渲染 如何避免不必要的重渲染 memo、useMemo、useCallback 配合使用完整逻辑 渲染流程：render → 生成VNode → Diff → 真实DOM更新 七、组件通信方案 父子组件 props 传值、回调传方法 多层级透传 props 缺点 Context API 跨层级通信优缺点 Context 配合 useReducer 简易状态管理 父访问子组件实例 ref 子调用父方法回调函数 兄弟组件通信几种方案 全局事件总线实现与缺陷 跨页面全局状态管理方案对比 八、状态管理 Redux / Redux Toolkit / Zustand Redux 三大核心原则 Redux 五大核心概念：Store、Action、Reducer、Dispatch、State Reducer 必须纯函数要求 Action plain object 规范，为什么不能异步 中间件 middleware 作用，执行流程 redux-thunk 异步处理原理 redux-saga 对比 thunk 优势 combineReducers 拆分模块原理 react-redux 核心 API Provider、connect mapStateToProps、mapDispatchToProps 作用 useSelector、useDispatch Hook 用法 Redux 数据单向流动完整流程 Redux Toolkit 解决原生Redux哪些痛点 createSlice 内置 reducer、action 生成 RTK 内置immer 实现可变写法原理 RTK Query 接口缓存、请求管理 Zustand 轻量状态库对比Redux优势 状态持久化 redux-persist 流程 大型项目状态库选型思路 多组件共享全局状态最佳实践 九、React Router v6 v5 与 v6 核心改动差异 createBrowserRouter 路由配置方式 BrowserRouter、HashRouter、MemoryRouter 区别 Routes 替代 Switch 作用 Route element 传组件写法 useNavigate 替代 useHistory 路由传参 params、search、state 三种方式 useParams、useSearchParams 使用 嵌套路由 Outlet 占位原理 index 索引路由作用 Link、NavLink 区别 路由守卫鉴权封装方案 路由懒加载 + Suspense 配置 useLocation 获取路由信息 动态路由、路由拦截封装 十、表单处理 受控组件与非受控组件定义、区别 受控组件完整实现思路 非受控组件通过 ref 获取值场景 多表单项统一封装受控逻辑 第三方表单库 Formik / React Hook Form 对比 React Hook Form 非受控高性能原理 表单校验方案：原生、yup、zod 表单批量重置、回填数据处理 十一、样式方案 inline 内联样式优缺点 CSS Modules 样式隔离原理 styled-components CSS-in-JS 原理 emotion 与 styled-components 对比 tailwindcss 在React项目使用优势 动态样式几种实现方式 全局样式污染解决方案 十二、工程化构建 Create React App 底层 webpack 配置 Vite 构建React项目优势，esbuild预构建 vite.config.js 常用配置项 webpack 处理jsx、ts-loader流程 babel 转换 JSX、polyfill 原理 .env 环境变量区分开发/测试/生产 跨域代理 proxy 配置 路由懒加载分包代码分割 Tree-Shaking 生效条件 打包体积优化手段 第三方组件库按需引入配置 unplugin-auto-import 自动导入hooks 十三、网络请求封装 axios 请求拦截、响应拦截封装 全局 loading、统一错误处理 token 过期无感刷新实现逻辑 重复请求取消方案 CancelToken 请求并发处理 封装自定义请求Hook SWR / React Query 数据请求缓存库原理 React Query 自动重请求、缓存失效策略 十四、性能优化专题 组件无效重渲染全部诱因 memo 缓存函数组件条件 useCallback 缓存函数使用场景 useMemo 缓存计算结果适用场景 列表渲染优化策略 虚拟列表 react-window / react-virtualized 原理 图片懒加载实现 路由懒加载分包优化首屏 大组件拆分、状态下沉优化 避免在render内创建函数/对象 React DevTools Profiler 排查卡顿 减少Context频繁更新范围 定时器、订阅事件组件卸载清理 打包体积压缩：gzip、剔除无用依赖 并发更新优化用户交互体验 十五、进阶底层原理 Fiber 架构解决旧架构什么问题 Fiber 节点结构、任务拆分机制 协调阶段、提交阶段分工 可中断、可恢复、可优先级调度原理 调和过程完整流程 批量更新实现机制 合成事件系统底层池化机制 React 事务机制 Portal 传送门实现原理，事件冒泡特点 ErrorBoundary 错误捕获范围，无法捕获哪些错误 React 服务端渲染 SSR 流程 Next.js 与 CRA 区别，SSR/SSG/ISR 概念 Hydrate 水合作用，水合不匹配成因 RSC React Server Components 运行机制 微前端中 React 应用隔离方案 十六、项目实战场景题 项目目录分层架构设计 状态管理选型理由 大型表单封装思路 页面按钮、接口权限控制实现 首屏加载缓慢优化方案 列表大量数据渲染卡顿解决 全局弹窗、消息提示封装 路由鉴权、未登录跳转逻辑 组件复用抽离自定义Hook规范 线上报错捕获监控方案 多环境变量、多渠道打包配置 防抖节流在搜索框场景实现 页面返回保留表单状态实现 重复提交接口拦截处理 React 项目迁移 TS 改造思路

从互联网整理而来 一、JS/TS 前置基础 var、let、const 区别 原型、原型链原理 闭包概念、使用场景、内存泄漏风险 同步异步、宏任务微任务执行顺序 Promise 三种状态、链式调用、静态方法 async/await 底层原理 数组常用遍历方法差异 深浅拷贝实现与区别 Object.defineProperty 与 Proxy 对比 Reflect 对象作用 箭头函数与普通函数区别 解构赋值、展开运算符 ES6 模块 import/export 与 CommonJS 区别 TypeScript 泛型、接口、类型推导 EventLoop 完整执行流程 二、Vue2 基础核心 Vue 双向绑定底层原理 Object.defineProperty 如何监听对象、数组变化 Vue2 数组重写了哪些方法，为什么不能监听下标修改 Dep、Watcher、Observer 三者关系 什么是响应式依赖收集、派发更新 数据劫持流程完整过程 computed 和 watch 区别 computed 缓存实现原理 methods、computed、watch 使用场景区分 Vue 生命周期全部钩子及执行时机 created、mounted、updated、destroyed 使用场景 父子组件生命周期执行顺序 v-if 和 v-show 底层区别与性能差异 v-for 绑定 key 的作用，key 不能用 index 的原因 v-if 和 v-for 同时使用的优先级与问题 v-model 底层语法糖实现 修饰符 .lazy .number .trim 原理 指令自定义实现，钩子函数有哪些 过滤器 filter 使用场景，Vue3 废弃原因 插值表达式、v-text、v-html 区别 Vue 模板编译流程 render 函数与 template 关系 VNode 虚拟 DOM 结构作用 Diff 算法执行流程 Vue2 Diff 同层比较、key 作用、头尾指针优化 patch 函数更新逻辑 nextTick 原理，微任务/宏任务降级策略 $nextTick 使用场景 三、Vue2 组件通信 父子组件 props 传递规则，单向数据流 props 类型校验、默认值、必填配置 $emit 子传父实现 .sync 修饰符作用，Vue3 移除原因 $parent、$children、$refs 获取组件/元素 provide / inject 使用场景与响应式缺陷 EventBus 事件总线实现、内存泄漏问题 Vuex 全局状态通信完整流程 $attrs、$listeners 跨层级透传 跨页面、多层级组件通信方案对比 四、Vuex 状态管理 Vuex 五大核心概念 state、getters、mutations、actions、modules mutations 必须同步、actions 异步原因 commit 和 dispatch 区别 getters 缓存特性 modules 模块划分，命名空间 namespaced 辅助函数 mapState/mapGetters/mapMutations/mapActions 使用 Vuex 持久化存储方案 Vuex 严格模式 strict 作用 多个组件同时修改同一 state 数据流 Vuex 底层响应式原理 五、Vue Router 2/3 SPA 单页面路由实现原理 hash 模式与 history 模式底层区别 history 模式后端 nginx 配置问题 路由导航守卫分类：全局、路由独享、组件内 导航守卫执行完整顺序 $route 和 $router 区别 路由传参 params 和 query 差异 params 刷新丢失参数解决方案 动态路由匹配、路由嵌套 路由懒加载实现与分包 addRoutes、addRoute 动态添加路由 路由元信息 meta 使用场景 路由缓存 keep-alive 原理 include/exclude/max 参数作用 activated、deactivated 生命周期钩子 路由跳转 push、replace、go 区别 登录鉴权全局路由拦截实现 六、Vue2 进阶知识点 keep-alive 缓存组件底层逻辑 异步组件、组件懒加载 组件递归实现菜单、树形结构 $once、$off、$on 事件方法 插槽分类：默认插槽、具名插槽、作用域插槽 作用域插槽数据传递原理 v-once 指令作用 Vue 模板编译生成 AST 抽象语法树 异步更新队列机制 页面大量数据渲染卡顿优化方案 Object.freeze 冻结数据对响应式的影响 $set 原理，什么场景必须使用 Vue2 响应式存在的缺陷 全局过滤器、全局指令、全局组件注册 mixin 混入原理、合并规则、冲突问题 七、Vue3 核心升级（Composition API） Vue3 相比 Vue2 性能提升点 Vue3 响应式改用 Proxy 优势 Proxy 对比 Object.defineProperty 解决了哪些痛点 Reflect 配合 Proxy 的作用 reactive、ref 区别与底层实现 ref 为什么基础类型需要包裹对象 toRef、toRefs 使用场景，解决的问题 computed 在 setup 中使用方式 watch、watchEffect 区别 watch 监听对象、数组深度监听配置 setup 执行时机，this 指向问题 setup 参数 props、context 内容 Composition API 对比 Options API 优势 script setup 语法糖带来的变化 script setup 中 defineProps、defineEmits、defineExpose 生命周期钩子组合式写法 onMounted/onUpdated 等 getCurrentInstance 获取组件实例 provide / inject 在 Vue3 中如何实现响应式 自定义 hooks 封装思路，复用逻辑 Vue3 生命周期完整列表，与 Vue2 对应关系 八、Vue3 模板、编译、Diff 优化 Vue3 模板编译优化：PatchFlags 标记 静态提升原理，减少 VNode 创建开销 缓存内联事件处理函数 Vue3 Diff 算法优化：最长递增子序列 Diff 对比流程相比 Vue2 改进点 Fragment 根节点多标签支持原理 Teleport 传送门组件底层实现 Suspense 异步组件加载处理 v-model 在 Vue3 语法变更，多 v-model 实现 .v-model 修饰符自定义处理 插槽 v-slot 简写语法变化 Vue3 移除 filter 过滤器替代方案 九、Pinia（Vue3 状态管理） Pinia 相比 Vuex 的优势 Pinia 核心概念 state、getters、actions Pinia 支持同步异步，不再区分 mutations defineStore 定义仓库，id 作用 直接修改 state 与 $patch 批量更新区别 $reset、$subscribe、$onAction 使用场景 Pinia 模块化拆分，无需命名空间 Pinia 持久化插件使用 setup 语法下使用 Pinia 多个仓库互相调用数据方法 十、Vue Router 4（Vue3） createRouter、createWebHashHistory、createWebHistory RouterView、RouterLink v-slot 插槽用法 useRoute、useRouter 组合式 API 获取路由实例 动态路由 addRoute 替换 addRoutes 路由守卫组合式写法 路由缓存与 Suspense 配合 路由元类型 TS 类型提示处理 十一、Vue3 高级特性 watchPostEffect、watchSyncEffect 区别 shallowRef、shallowReactive 浅层响应式作用 readonly、shallowReadonly 只读代理 customRef 自定义响应式引用 effectScope 作用域收集副作用 defineCustomElement 构建原生 webComponent Vue3 全局 API 变更 createApp 替代 new Vue() app.config 全局配置项 全局组件、指令、插件注册方式变化 Transition、TransitionGroup 动画组件原理 v-memo 缓存 VNode 优化渲染 异步 setup 函数配合 Suspense 十二、工程化 & 构建工具 Vue CLI 与 Vite 底层构建区别 Vite 冷启动快的原理，esbuild 预构建 Vite 热更新 HMR 实现机制 vite.config.js 常用配置 webpack 打包 Vue 文件流程 vue-loader .vue SFC 单文件组件解析过程 scoped 样式隔离原理，深度选择器 /deep/ ::v-deep :deep() CSS Module 使用方式 环境变量 .env 文件区分开发测试生产 跨域代理 proxy 配置 打包体积优化方案 分包、懒加载、gzip 压缩配置 TS 在 Vue 项目中配置声明文件 第三方 UI 库按需引入配置 全局自动导入组件、API 插件 unplugin-auto-import 十三、网络请求与封装 axios 拦截器请求、响应封装思路 请求 loading、统一错误处理封装 token 过期自动刷新逻辑 请求取消、重复请求拦截方案 并发请求处理 接口数据统一格式化处理 封装请求 hooks 适配 Vue3 十四、性能优化专项 减少不必要组件渲染手段 v-once、v-memo 使用场景 长列表虚拟滚动实现原理 响应式数据避免不必要监听 computed 缓存减少重复计算 图片懒加载方案 路由懒加载分包优化 keep-alive 合理缓存减少重复请求 避免频繁触发 watch 大列表数据冻结 Object.freeze 减少 DOM 操作，合理使用虚拟 DOM 打包体积优化：Tree-Shaking、剔除无用依赖 Vite/Webpack 构建速度优化 内存泄漏常见场景：定时器、事件监听、未销毁订阅 Chrome Performance 面板排查页面卡顿 十五、混合、插件、拓展开发 Vue2 mixin 缺陷，Vue3 用 hooks 替代原因 Vue 插件开发完整结构 install 方法 全局自定义指令完整开发 封装业务通用组件规范 二次封装 Element Plus / Ant Design Vue 封装全局弹窗、消息提示组件 自定义全局权限指令 v-permission 页面权限、按钮权限实现方案 全局错误捕获 errorHandler 埋点、全局请求监控插件封装 十六、项目实战场景问答题 项目整体架构分层设计 Vue2 升级 Vue3 迁移改造遇到的问题 大型项目状态管理选型 Vuex / Pinia 理由 复杂树形菜单、表格组件封装思路 表单校验全局统一封装方案 页面权限控制完整实现流程 多环境配置、多渠道打包处理 首屏加载速度优化做了哪些处理 路由鉴权、未登录拦截逻辑 列表大量数据渲染卡顿如何解决 项目打包体积过大优化方案 页面缓存、返回保留表单状态实现 接口并发冲突、重复提交拦截 移动端适配方案 vw/vh、rem 线上报错监控、异常捕获方案

从互联网整理而来 一、基础概念与运行机制 小程序与H5、App的核心区别 小程序双线程模型分别是什么，各自职责 逻辑层与视图层通信方式 小程序渲染流程完整过程 小程序启动流程（冷启动、热启动） 冷启动和热启动的差异 小程序分包加载机制概念 主包与分包限制规则 独立分包和普通分包区别 小程序的生命周期分类（应用、页面、组件） 小程序页面栈规则，最多存放多少页面 小程序登录流程整体逻辑 微信授权两种类型区别（基础授权、隐私授权） 小程序原生宿主环境提供哪些能力 小程序更新机制，静默更新与主动更新 二、文件结构与配置 小程序四种核心文件作用（json/wxml/wxss/js） app.json 全局配置常用字段 page.json 页面配置优先级与app.json关系 sitemap.json 作用 project.config.json 用途 app.js 全局App实例生命周期 页面js Page构造器生命周期 组件js Component构造器生命周期 usingComponents 引入组件配置 全局样式app.wxss和页面wxss权重规则 wxss与css差异，特有特性 rpx单位换算规则，适配原理 小程序支持的选择器有哪些，不支持哪些 图片、静态资源本地与线上引入规则 分包配置subpackages字段参数含义 三、WXML 模板语法 WXML数据绑定语法规则 插值表达式支持哪些运算 wx:if、wx:elif、wx:else 条件渲染 hidden属性与wx:if性能差异 wx:for列表渲染，wx:key作用 wx:key使用规范，禁止index的场景 block标签作用，是否生成真实节点 模板template定义与引入，数据传递 wxs脚本作用，运行环境限制 wxs与js的区别，能否调用小程序API 事件绑定bind、catch、capture-bind区别 mut-bind互斥事件作用 事件传参几种实现方式 数据双向绑定model语法 标签属性布尔值绑定规则 四、组件系统（原生+自定义组件） 小程序自定义组件创建完整结构 Component中properties传参配置规则 properties三种数据监听方式 data、properties、observers执行顺序 observers监听对象、数组深层变化写法 组件生命周期完整钩子 lifetimes与pageLifetimes区别 组件插槽slot，具名插槽使用 组件父子通信方式 triggerEvent触发自定义事件传参 selectComponent、selectAllComponents获取子组件 behaviors复用逻辑，合并规则 原生内置常用容器、表单、媒体组件 scroll-view滚动注意事项 movable-area、movable-view实现拖拽原理 canvas新旧版本差异，2d画布使用 web-view嵌入H5通信方案 cover-view、cover-image使用限制场景 自定义组件样式隔离options配置 组件pureDataPattern作用 五、数据管理与渲染更新 setData底层更新原理 setData频繁调用性能问题 setData单次数据大小限制 局部更新数据简写写法 直接修改this.data不调用setData为什么不更新视图 复杂对象、数组更新setData写法 全局数据共享几种方案 getApp()全局变量优缺点 globalData跨页面同步更新缺陷 数据本地持久化storage存储限制 wx.setStorage同步异步API区别 storage大数据存储优化方案 页面间数据传递方式对比 页面栈取上一页实例方法 大数据列表渲染卡顿优化思路 六、路由与页面跳转 五种路由API区别（navigateTo/redirectTo/reLaunch/switchTab/navigateBack） switchTab跳转限制条件 navigateTo无法跳tab页面解决方案 路由传参两种方式，长参数丢失问题 页面返回监听onUnload、onShow触发时机 获取当前页面栈方法getCurrentPages() 路由拦截统一封装思路 tabBar配置规则，自定义tabBar实现 自定义tabBar踩坑点 页面跳转后保留表单状态方案 七、网络请求与后端交互 wx.request请求基础配置 request合法域名校验规则，开发环境规避 小程序请求携带cookie机制 请求header统一封装token思路 拦截器封装wx.request方案 并发请求、请求超时处理 文件上传wx.uploadFile参数配置 文件下载wx.downloadFile使用场景 websocket实时通信完整流程 socket断线重连实现逻辑 接口返回加密数据解密处理 批量请求统一捕获异常 小程序不支持跨域的根本原因 上传图片压缩、裁剪处理 上传进度监听API 八、登录、授权、用户信息 wx.login获取code作用 code换取openid完整流程 openid、unionid区别与生成规则 隐私保护新规下获取用户头像昵称方案 getUserInfo接口废弃替代方案 手机号一键登录流程 授权scope各权限含义 用户拒绝授权后重新引导授权逻辑 登录态session_key过期处理 第三方登录、关联账号实现 登录状态持久化存储方案 多端打通unionid获取条件 隐私协议弹窗实现规范 小程序订阅消息下发流程 模板消息与订阅消息区别 九、媒体、图片、地图、设备API wx.chooseMedia选择图片视频参数 图片预览wx.previewImage使用 图片本地缓存方案 录音、播放音频API使用 video视频播放常见问题 map地图组件标记、覆盖物绘制 获取当前定位wx.getLocation权限配置 后台持续定位配置要求 设备信息、系统API获取 振动、剪贴板、屏幕亮度API 扫码wx.scanCode场景 蓝牙BLE设备连接流程 NFC基础使用场景 相机camera组件适配 文件管理FileSystemManager读写文件 十、性能优化专项 setData性能优化手段 长列表渲染优化方案 虚拟列表实现思路 分包加载优化首屏速度 图片懒加载处理 减少页面、组件层级嵌套 wxss样式体积压缩优化 分包预加载preloadRule配置 避免频繁创建定时器、监听事件 页面卸载清除所有订阅、定时器 包体积超限优化方案 开发者工具性能面板排查卡顿 避免在onShow频繁请求接口 图片资源压缩、webp适配 减少observers深层监听开销 十一、适配、兼容、多端 rpx、px、rem转换关系 刘海屏、安全区适配css写法 深色模式适配配置 不同微信版本API兼容处理 caniuse判断接口是否可用 小程序转H5、转uni-app差异 平板、PC端小程序适配要点 低版本微信兼容降级方案 字体、图片多设备适配 自定义导航栏适配胶囊按钮 十二、工程化、第三方框架 原生小程序、uni-app、Taro区别 Taro编译原理，多端适配逻辑 uni-app分包、条件编译写法 小程序npm依赖使用规则 按需引入UI组件库优化 工程化打包、环境变量区分 多环境请求域名配置 ESLint校验小程序代码规范 Git协同开发规范 CI自动上传小程序工具 十三、支付、分享、广告、业务能力 小程序支付完整流程 支付回调后端处理逻辑 分享onShareAppMessage、onShareTimeline配置 分享图、分享路径动态处理 分享到朋友圈限制条件 插屏广告、激励视频广告接入 小程序跳转其他小程序API 跳转限制与关联配置要求 客服消息接入流程 商品卡片、搜索收录配置sitemap 十四、安全、审核、合规 小程序合法域名、业务域名、web-view域名区别 前端存储敏感信息安全风险 session_key不能传输到前端原因 接口数据防篡改简单方案 隐私合规要求有哪些 图片、内容审核API调用 小程序常见审核驳回原因 诱导分享、诱导支付违规点 本地存储数据加密思路 防止恶意刷接口方案 十五、实战场景综合题 项目整体目录架构设计 封装通用请求库完整思路 全局登录拦截、未登录跳转实现 大型表单组件封装与校验 多页面共享登录状态管理 列表上拉加载、下拉刷新封装 图片上传、预览、删除完整流程 分包改造解决主包体积超限 页面返回保留搜索条件、分页数据 小程序热更新主动检测逻辑 websocket聊天断线重连方案 自定义tabBar遇到的坑与解决 页面大量数据滑动卡顿优化 线上白屏、加载失败排查思路 原生小程序迁移Taro/uni改造方案