Vue基础

在 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 到底在底层起到了什么作用？

在 Vue 的响应式世界里，computed（计算属性）和 watch（侦听器）是我们处理数据联动最常用的两把利器。虽然它们都能响应数据变化，但背后的设计哲学和应用场景却大相径庭。

在 Vue 模板开发中，指令的优先级和渲染机制直接决定了应用的性能。尤其是 v-if 与 v-for 的爱恨情仇，在 Vue 2 和 Vue 3 中经历了完全相反的变革。本文将带你从底层逻辑理解它们

在 Vue 开发中，我们经常会遇到“明明修改了数据，视图却不更新”的尴尬场景。这通常与 Vue 的初始化顺序及响应式实现原理有关。本文将从 Data 属性的本质出发，解析响应式“丢失”的根本原因

在 Vue 开发中，组件通信是构建复杂应用的基础。随着 Vue 3 的普及，通信方式发生了不少变化（如 defineProps 的引入、EventBus 的退场）。