06-工程化、质量与性能

章节目标：围绕“06-工程化、质量与性能”建立知识主干，能说清关键机制，并能用最小代码或真实案例验证结论。

学习要求

• 阅读时把“概念、适用场景、常见错误、验证方法”分别记下来。
• 带代码的内容至少运行一次，再主动修改一个条件观察结果。
• 学完后选择三个主题，不看原文向别人讲清楚。

完整目录（76 篇）

• 在 .vue 里写 script setup lang=tsx 常见报错的完整解决方案
• 2.Vue3项目结构
• 3.安装依赖
• defineAsyncComponent API 详解
• defineAsyncComponent
• vue3中jsx写法实现动态组件
• vue2 vs vue3
• 模板中的动态导入
• Sentry 是什么
• Sentry同类
• 解释Sentry的实现原理
• Vue 3 拖拽布局库
• country-code-lookup
• vue-country-flag-next
• 从国家名称-编码获取手机号前缀
• 使用 i18n-iso-countries（支持多语言国家名）
• TypeScript 支持
• Vs code 插件
• vue-cli-service 机制
• 单文件组件
• Browserify
• Rollup
• 生产环境部署
• 生产环境部署
• lz-string
• react-intl
• react-is
• umi-request 网络请求之路
• 2021，17个非常流行的 Vue 插件
• 1.初始化项目
• PureComponent
• React.Lazy
• memo
• 使用Fragment
• PureComponent、React.memo
• React Profiler 定位 Render 过程瓶颈
• React 工作流
• shouldComponentUpdate
• useMemo 减少组件 Render 过程耗时
• useMemo、useCallback 实现稳定的 Props 值
• 减少不必要的渲染
• 动画库直接修改 DOM 属性，跳过组件 Render 阶段
• 跳过回调函数改变触发的 Render 过程
• 避免在 didMount、didUpdate 中更新组件 State
• pureComponent与memo
• src-constants.js
• src-index.js
• src-react-dom.js
• src-react.js
• src-utils.js
• 性能优化
• JavaScript 或浏览器 事件循环
• raf调度
• setTimeout 排期与可能的问题
• useRafFn
• 回调超时
• 浏览器事件循环的各个阶段（定时器、I-O 回调、空闲、渲染、微任务）
• 深度面试：浏览器中与任务执行、渲染和事件循环
• 理解浏览器流水线火焰图
• 计时器的清理
• 错误边界(Error Boundaries)
• 预渲染
• 骨架屏
• 安全
• 服务端渲染
• 深入响应式原理
• 状态管理
• 路由
• 全局性兼容：定义默认的 componentDidCatch 方法
• 关于 try-catch ？
• 关于事件处理器
• 定义全局默认的错误边界(Error Boundaries) 处理函数
• 未捕获错误（Uncaught Errors）的新行为
• 组件栈追踪
• 错误边界
• 错误边界应该放置在哪？