Vue基础

从 Vue 2 到 Vue 3，不仅仅是版本的跳跃，更是底层思想的革新。从 Object.defineProperty 到 Proxy，从 选项式 API 到组合式API都实现了质的飞跃

在 Vue 2 开发中，你是否遇到过“明明数据变了，视图却没动”的诡异情况？这通常不是代码逻辑问题，而是由于 Vue 2 基于 Object.defineProperty 的响应式原理存在天然的局限性

在 Vue 3 的 Composition API 中，ref 和 reactive 是定义响应式数据的两大基石。很多初学者常纠结于“什么时候该用哪个”

无论是单页面应用（SPA）还是复杂的后台管理系统，路由（Router）都是其灵魂。它通过 URL 映射组件，实现了无刷新的页面切换。本文将从底层原生 API 出发，带你彻底弄懂 VueRouter

在 Vue 的响应式系统中，当数据发生变化时，Vue 会生成一颗新的虚拟 DOM 树（VNode Tree）。Diff 算法的核心任务就是通过对比新旧两棵树，以最小的性能代价完成真实 DOM 更新。

双向数据绑定是 Vue 的灵魂特性。它将 Model（数据层）与 View（视图层） 紧密相连：JS 逻辑更新 Model，视图自动重绘；用户操作 View，数据自动同步。本文将带你从源码级别理解它们

在 Vue 的进化史中，从 Vue 2 到 Vue 3 的跨越，最核心的变革莫之过于响应式系统的重构。而这场重构的主角，正是 Object.defineProperty 与 Proxy。

在 Vue 开发中，修饰符（Modifiers）是指令后的一个特殊后缀（以 . 开头），它能以极简的方式帮我们处理事件冒泡、键盘监听以及复杂的双向绑定逻辑。

在构建中大型 Vue 单页应用时，组件间的通信往往会变得复杂。Vuex 作为一个专为 Vue.js 应用程序开发的状态管理模式 + 库，采用集中式存储管理应用的所有组件的状态。

在 Vue 开发中，我们既希望组件的样式能够“自成一体”，不干扰外部环境，又常常需要修改第三方组件库的内部样式。这两者之间的矛盾，正是通过 scoped 属性与“样式穿透”技术来解决的。

在 Vue 项目中，路由守卫是控制页面权限、处理跳转逻辑的核心。无论是全局登录鉴权，还是组件内的特殊状态判断，熟练掌握路由守卫都是前端开发的必备技能。

在 Vue 的开发世界里，“指令（Directives）”是连接模板与底层 DOM 的桥梁。除了官方提供的强大内置指令外，Vue 还允许我们根据业务需求自定义指令。

在 Vue 的生态系统中，“组件（Component）”和“插件（Plugin）”是构建应用的两大基石。虽然它们都承载着逻辑复用的使命，但在设计模式、注册方式和职责边界上却截然不同。

无论是 Vue 2 的 new Vue() 还是 Vue 3 的 createApp()，将组件配置转化为页面上可见的真实 DOM，中间经历了一系列复杂的转换。

在构建大型单页应用（SPA）时，JavaScript 包体积往往会随着业务增长而膨胀，导致首屏加载缓慢、白屏时间长。懒加载是解决这一问题的核心方案。

在 Vue 开发中，你是否遇到过“修改了数据但立即获取 DOM 元素，拿到的却是旧值”的情况？这背后涉及 Vue 的异步更新策略。理解 nextTick，就是理解 Vue 如何与浏览器的事件循环握手

在后台管理系统或长列表页面中，我们经常遇到这样的需求：从列表进入详情页，返回时希望列表滚动位置、搜索条件都能完美保留。Vue 内置的 <KeepAlive> 正是为此而生。

在开发中，当多个组件拥有相同的逻辑（如分页、导出、权限校验）时，重复编写代码显然不够优雅。Vue 2 提供的 Mixin（混入）正是为了解决逻辑复用而生。本文将从基础用法出发，带你彻底理清 Mixin

在组件化开发中，插槽 (Slot) 是实现内容分发（Content Distribution）的核心机制。它允许我们将组件的“外壳”与“内容”解耦，让组件具备极高的扩展性。

在开发 Vue 列表渲染时，编辑器总是提醒我们“必须绑定 key”。很多人习惯性地填入 index。但你是否思考过：key 到底在底层起到了什么作用？