weixin_62613321的博客

本文以一个基于 init / upload / merge 接口的大文件上传方案为例，复盘前端如何手动实现分片上传调度层。内容涵盖文件分片计算、file.slice 切片、分片 MD5 校验、并发上传队列、失败重试、暂停/恢复以及断点续传状态维护。重点说明前端如何通过 uploadedChunks / pendingChunks / failedChunks 管理分片状态，并结合 uploadId + partNumber 与后端完成分片识别、缺片检查和最终合并。

本文围绕 Vue 中的虚拟 DOM、Diff 算法与 Patch 流程进行梳理。先从虚拟 DOM 的定义与优势入手，说明它为什么能帮助框架减少真实 DOM 操作；再进一步分析 Diff 的核心思想，包括同层比较、key 的作用以及启发式优化；最后结合 vnode、patch、patchVnode 与 updateChildren 的执行过程，串起 Vue 更新视图时的整体逻辑，帮助理解面试中常见的相关问题。

围绕 Vue3 组件通信机制，系统梳理 defineProps、defineEmits 与 v-model 的实现原理，从运行时与 TypeScript 类型层两个维度解析 props 声明与默认值机制，并结合单个与多个 v-model 示例说明 update 事件协议及 defineModel 在 3.3+ 中的简化方式，形成完整的通信模型认知。

围绕 Vue Router 中 router.resolve 的使用场景与内部解析机制展开，梳理 RouteLocationRaw 的结构与参数含义，解析 resolve 返回值中 href 与 fullPath 的区别，并结合 base、history/hash 模式差异说明其在新窗口跳转与 URL 生成场景中的工程实践价值。

这篇文章系统梳理 Vue 的事件机制，从原生事件绑定到子组件自定义事件（emit），再到浏览器 DOM 事件捕获/冒泡与事件委托，把“事件是怎么传递的、为什么会触发、怎么阻止/控制”讲清楚。同时补充常用 DOM 事件与 Vue 事件修饰符（如 .stop、.prevent、.capture、.once 等）的使用场景与注意事项，帮助你写出更稳定、可维护的交互逻辑。

在业务不断增长的场景中，项目列表中的“暂停 / 恢复 / 重跑 / 删除”等操作被分散在各个组件中，导致代码重复、难以维护，也让 UI 层背负了过多的业务逻辑。为了提升可扩展性与可维护性，我对项目操作链进行了系统性的解耦：将业务逻辑抽离为独立的 useProjectActions 模块，并将 UI 层动作抽象为可配置的 actionIconConfig，最终实现 从组件点击事件 → 配置化动作系统 → 统一业务入口 的完整闭环。

本文介绍了基于Vue3+TS+TailwindCSS开发的3D操作引导组件。该组件针对3D高斯游览场景，通过图示和文字说明帮助用户快速掌握移动、旋转、缩放等交互操作。组件采用分栏式设计，顶部为三个操作分类标签页，下方展示对应操作的提示信息和示意图。实现上使用了动态class绑定、响应式状态管理等技术，并采用TailwindCSS进行样式设计。组件通过v-model控制显示状态，提升了3D场景下的用户体验和交互效率。

本文介绍了前端首页架子的搭建过程，主要包括三部分：1）使用Element-Plus的Container布局组件实现页面整体框架，包括侧边栏菜单配置；2）通过路由守卫实现登录拦截，未登录时跳转至登录页；3）实现右上角用户信息展示功能，包括API调用和Pinia状态管理。文章详细说明了Element-Plus菜单组件的配置参数及其作用，并提供了登录拦截和用户信息获取的具体代码实现方案。

本文介绍了Vue路由设计与登录注册页面的实现方案。主要内容包括： 路由设计采用一级路由（登录页和布局框架）与二级路由（文章管理、用户中心等）的层级结构，通过router-view实现嵌套渲染； 详细说明了路由配置流程，包括创建页面组件、配置路由规则、设置重定向和子路由； 登录注册页面使用Element Plus组件库实现，通过栅格系统布局，包含表单切换功能，支持用户名密码输入和记住密码等交互功能。整体方案采用Vue3的组合式API开发，通过动态路由和组件化方式构建管理系统的基础架构。

本文介绍了基于Vue3的技术栈项目配置过程。首先使用pnpm包管理工具创建项目，调整目录结构并安装SCSS预处理器。详细讲解了VueRouter4的路由配置规则，包括模式选择和参数获取方式。然后引入Element Plus组件库，配置按需导入功能。重点介绍了Pinia状态管理，包括用户仓库的创建、持久化配置和代码优化，将Pinia初始化逻辑集中到stores模块中统一维护。整体展示了从项目初始化到核心功能模块配置的完整流程，为Vue3项目开发提供了实用参考。

Pinia是Vue3的轻量级状态管理工具，作为Vuex的替代方案，具有更简洁的API和更好的TypeScript支持。文章介绍了如何手动添加Pinia到Vue项目，包括安装、初始化配置以及清理项目模板。详细讲解了Pinia的基础使用方式，包括定义store（state、action、getters）、组件中使用store数据和方法，以及异步action的实现。特别强调了storeToRefs()方法的重要性，用于保持解构数据的响应性。最后提到数据持久化的需求，为状态管理提供了完整解决方案。

本文介绍了Vue脚手架安装与项目创建的完整流程。首先需要安装Node.js和Vue CLI工具，通过npm命令全局安装。创建项目时可以选择默认配置或自定义配置，支持Vue 2和Vue 3版本。项目创建后需安装依赖并启动开发服务器。重点说明了脚手架的核心文件结构：index.html为入口页面，App.vue为根组件，main.js为项目入口文件。文章还提供了常见问题的解决方法，如权限问题和包管理器选择等，帮助开发者快速搭建Vue开发环境。

本文介绍了Vue.js中三个重要概念：计算属性、侦听器和生命周期。计算属性是基于现有数据计算得到的新属性，具有缓存功能，比方法更高效；侦听器watch用于监视数据变化，分为简单写法（监视单个数据）和完整写法（支持深度监听和立即执行）；生命周期包括创建阶段（响应式数据准备）和挂载阶段（DOM操作），重点介绍了created和mounted两个关键钩子函数。文章通过代码示例展示了计算属性的基本用法、完整写法以及侦听器的应用场景。

Vue指令是带有v-前缀的特殊属性，用于实现不同业务需求。本文介绍了10个常用指令：v-html渲染HTML内容；v-show和v-if控制元素显示（前者切换CSS，后者条件渲染）；v-else/v-else-if配合v-if进行条件判断；v-on绑定事件（支持简写为@）；v-bind动态设置HTML属性（支持简写为:）；v-for循环渲染数据（需加key优化性能）；v-model实现表单双向绑定。这些指令构成了Vue的核心功能，通过不同组合可高效完成各类交互场景。

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具