Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React、Angular，提供桌面版。 这里主要分享Vditor自定义图片上传工具栏按钮，实现自定义

深入对比Nuxt 3中两种状态管理方案的适用场景与最佳实践，详解Pinia在SSR下的运行机制、useState的轻量优势、以及在复杂应用中如何合理选择和组合使用两者来构建高性能应用。

Vue 3的Composition API是Vue生态系统的一次重大革新，它提供了更灵活的代码组织方式和更强大的逻辑复用能力。本文从基础概念出发，深入讲解setup函数、响应式API、计算属性、侦听器等核心特性，并结合企业级项目实战案例，帮助开发者掌握Composition API的最佳实践。

Vue 3 采用全新的 Proxy API 实现响应式系统，相比 Vue 2 的 Object.defineProperty 方案有显著的性能提升和更强大的响应式能力。本文深入探讨其核心实现原理，并通过实际代码示例帮助读者掌握响应式开发技巧。

Vue3组合式API是现代Vue开发的核心特性，结合TypeScript可以大幅提升代码质量和开发体验。本文详细介绍如何在Vue3项目中使用组合式API与TypeScript配合，实现类型安全的组件开发。

深入探讨Vue3组合式函数的设计原则与实战技巧，涵盖响应式状态管理、生命周期集成、异步操作封装以及常见陷阱规避，助你写出高质量可复用的Composable代码。

深入解析Vue 3 Composition API的核心概念与实战技巧，从setup函数到响应式系统，全面掌握组合式API的使用方法，帮助你提升Vue开发效率。

深入剖析Vue 3响应式系统的核心原理，从Proxy代理到依赖收集，从ref与reactive的选择到副作用清理机制，帮助开发者全面掌握Vue 3响应式编程的精髓。

本文深入剖析Vue3响应式系统的实现机制，从Proxy代理到依赖收集，再到触发更新，全面解析reactive和ref的工作原理，帮助开发者更好地理解Vue3的核心特性。

# 深入理解Vue3组合式API：构建可维护的企业级应用 ## 前言 Vue3正式发布至今已经有几年时间，其核心的组合式API（Composition API）已经成为了现代Vue开发的主流方式。相比于传统的选项式API，组合式API提供了更灵活的代码组织方式，特别适合处理复杂业务逻辑和复用代码

Vue3的Composition API彻底改变了组件逻辑的组织方式，本文结合实际项目经验讲解setup语法糖、响应式原理、自定义hooks的设计模式与复用技巧，帮你写出更清晰易维护的Vue代码。

记录 Vue3 从 Options API 迁移到 Composition API 过程中遇到的响应式丢失、ref 自动解包陷阱、watch 监听失效等实际问题，通过真实组件重构案例逐一剖析原因与解决方案，附带 Pinia 最佳实践建议。

Vue3 里父传子、子传父、兄弟组件、跨层级通信，可选方案一大堆，到底该用哪个？这篇不讲概念堆砌，而是按真实场景给出决策路径：什么情况用 props 和 emit 就够，什么时候需要 provide 和 inject，什么场景才该上状态管理库，并附上几个容易误用的反例，帮你做出合适的选择。

系统梳理 Vue3 中所有组件通信方式：props/emit、provide/inject、defineExpose、Pinia 状态管理、事件总线等，分析各自适用场景和避坑点，帮助开发者根据场景选择最合适的通信方案。

整理 Vue3 组合式 API 的高频用法和常见坑，涵盖 setup 语法、ref 与 reactive 选择、computed/watch、生命周期钩子、组合函数复用等，附代码示例和易错点分析，帮助快速上手组合式 API。

讲解 Vue3 表单校验的完整实践方案，对比手写校验、VeeValidate、Element Plus 内置校验等路径，涵盖常用规则配置、异步校验、自定义校验器、联动校验、提交前整体校验等内容，附代码示例与常见坑。

系统整理 Vue3 项目性能优化的实战技巧，涵盖响应式优化（shallowRef/markRaw）、组件懒加载、虚拟列表、v-memo、KeepAlive、打包优化等方面，附代码示例和适用场景分析，帮助提升应用性能。

系统讲解 Vue3 官方推荐的状态管理库 Pinia，涵盖 Store 定义、state/getters/actions、组合式与选项式两种写法、持久化插件、模块化组织以及在组件中的使用，附代码示例和实战建议。

讲解 Vue3 组件设计中的代码复用方案，对比组合式函数（Composables）、插槽（Slot）、混入（Mixin）、无渲染组件等模式的适用场景，用案例演示如何避免重复代码。

用 Vue3 组合式 API 写页面，最头疼的就是数据改了视图不更新。本文汇总我在真实项目中遇到的六个"响应式丢失"场景：解构 reactive、ref 忘记 .value、数组下标赋值、props 直接改、异步里丢引用、以及 shallowRef 的误用，每个都给出原因和正确写法。

数据返回了界面却不更新？本文从一个真实 bug 出发，讲清 Vue 3 中 ref 与 reactive 的适用边界、解构丢失响应性的原因、watch 的三个常见误用，以及 props 解构的陷阱，最后给出一条快速判断口诀与排查思路。

同一个需求换了三套通信方案，每次都要动一片代码。本文把 Vue 3 常用的七种通信方式按使用成本从低到高排列，逐个说明适用场景与易错点，最后给出一条六步选型决策路径，帮助在 props、provide、Pinia 之间做出不返工的选择。

梳理 Vue Router 4 的路由挂载、路由元信息权限控制与全局前置守卫写法，重点讲清动态路由刷新丢失、守卫死循环、异步用户信息竞态三个易踩坑，并给出路由级懒加载的代码示例，帮助前端快速搭好带权限的单页应用骨架。