加载中…
Blog
写点东西，记录一下踩过的坑与有趣的想法。
本文详述Nuxt SSR应用的自动化部署方案，涵盖PM2与Docker两种GitHub Actions驱动的CI/CD方式，强调安全性、回滚能力与环境一致性，并提供SSL配置、Nginx反向代理、故障排查及加固措施等完整实践指南。
本文记录了实现可调整大小容器的完整思考过程，涵盖从全局事件监听到PointerEvent指针捕获的演进，解决多容器冲突、移动端兼容、边界失效、最小/最大尺寸限制、视觉反馈等关键问题，强调用户体验、边界容错与API设计哲学。
本文系统讲解JavaScript迭代协议，涵盖可迭代协议（[Symbol.iterator]）、迭代器协议（next方法）、迭代器对象及可迭代的迭代器四大核心概念，厘清三者关系与区别，结合大量代码示例说明实现方式、应用场景及最佳实践，帮助开发者深入理解for...of、展开运算符等语法底层机制。
通过ESLint插件规范项目中的命名规则，以确保代码风格统一和提高可维护性。ESLint规则的创建方法，包括规则结构、context上下文对象以及问题报告机制，并以组件命名规则为例展示了具体实现过程。最后，介绍了如何使用RuleTester进行插件测试，确保规则按预期工作。
一个让人疯狂的 Promise 就像是在玩一场心跳加速的俄罗斯轮盘赌——你永远不知道它下一秒是会优雅地 resolve 还是突然 reject。这不，刚写的那个 Promise，不仅自己玩起了捉迷藏，还顺便把我的耐心也给藏起来了。每次我满怀期待地用 .then 去迎接它的成功，结果它却总是在最后一刻跳转到 .catch，留下一句：“哈哈，你又上当了！”仿佛在说：“程序员，来追我呀！”搞得我每次调试
该自定义Vite插件用于灵活处理SVG文件导入，结合svgo对SVG进行压缩优化。插件支持四种导入模式：默认URL导入、作为Vue组件导入（可配置是否经svgo处理）、跳过svgo处理的组件导入，以及原始数据导入。其核心原理是通过正则匹配路径，在load钩子中读取文件，利用svgo优化代码，并借助vue/compiler-sfc将SVG编译为Vue组件。此外，开发过程还提供了配套的TypeScript类型声明配置，以解决ESLint和TS校验报错，并附带完整代码与使用示例，帮助开发者高效集成SVG资源。
Vite通过原生ES模块支持和按需转换，简化了前端开发流程，提升了开发效率。开发时，Vite使用ESbuild预构建依赖，按需加载和转换源码模块，实现快速热更新。生产环境则使用Rollup进行代码优化和打包。Vite插件扩展了Rollup插件，提供了独特的钩子如config、configResolved和configureServer等。
KeepAlive是 Vue 中用于缓存组件实例的抽象组件，通过 include、exclude和 max参数控制缓存行为。在组件激活和停用时触发 onActivated 和 onDeactivated 钩子。组件被移除时不会真正销毁，而是移动到隐藏容器中，重新激活时再从容器中取出。渲染逻辑确保有且仅有一个子组件被渲染，并在组件挂载和更新时缓存子节点。
Vue3中的`nextTick`确保在DOM更新后获取最新实例的回调。其实现主要通过`Promise`，将回调放入微任务队列中。源码中，`nextTick`返回一个`Promise`，并通过`queueFlush`和`flushJobs`管理任务队列，确保任务在DOM更新后执行。简单实现中，使用`resolvedPromise`和`callbacks`数组来模拟这一过程。
watch和computed都基于响应式依赖追踪。watch通过副作用effect和调度器scheduler实现，当数据变化时执行回调，支持异步操作。computed同样基于effect，具有缓存机制，当依赖数据变化时重新计算，否则返回缓存结果，不支持异步。watch适用于复杂逻辑和异步操作，computed适用于频繁使用的计算结果，提高性能。
Vue3的渲染过程包括创建应用实例、挂载应用、响应式系统触发渲染、虚拟DOM diff算法和应用更新。编译原理涉及词法分析、语法分析、转换和生成四个步骤，通过有限状态自动机解析模板为Token，生成抽象语法树（AST），再转换为JavaScript AST，最后生成渲染函数代码。
Vue 3 的生命周期这些钩子在组件的不同阶段被调用，用于执行特定的逻辑。大部分钩子在客户端执行，部分仅在开发模式或服务器端渲染时有效。子组件的挂载和销毁会影响父组件的更新钩子。