作为一名使用 Vue 多年的开发者，我一直认为理解响应式原理是从"会用"到"精通"的分水岭。本文将带你深入 Vue2 的响应式系统，从原理到实现，彻底搞懂数据驱动视图的本质。
简单来说，响应式就是数据变化时，视图自动更新。
// 原生 JS
const obj = { count: 0 }
document.getElementById('app').innerHTML = obj.count
obj.count = 1 // 视图不会自动更新
// Vue
data() {
return { count: 0 }
}
this.count = 1 // 视图自动更新！
作为一名从 jQuery 时代走过来的前端开发者，第一次接触 Vue 时的感受至今记忆犹新。那种"原来前端还能这么写"的惊喜，让我彻底爱上了这个框架。本文将带你从零开始，深入理解 Vue2 的核心思想和基础用法。
在正式开始之前，我想先聊聊为什么在 Vue3 已经发布的今天，我们仍然需要学习 Vue2。
现实考量：
组件是 Vue 最强大的特性之一。在我多年的前端开发经验中，真正理解组件化思想是从"能写组件"到"会设计组件"的关键转折点。本文将深入探讨 Vue2 组件开发的方方面面。
在开始编码之前，我想先聊聊组件化的核心理念。
传统开发模式的痛点：
├── HTML、CSS、JS 分离，但逻辑上紧密耦合
├── 代码复用困难，复制粘贴是常态
├── 维护成本高，修改一处影响多处
└── 团队协作困难，容易产生冲突
组件化的优势：
├── 高内聚、低耦合
├── 可复用、可组合
├── 易测试、易维护
└── 并行开发、提高效率
经过几年的 Vue 项目开发，我踩过的坑、总结的经验都浓缩在这篇文章里。无论你是正在开发 Vue2 项目，还是在维护遗留系统，这些技巧都能帮你写出更高质量的代码。
<!-- v-if：条件为假时不渲染 DOM -->
<!-- 适合：运行时条件很少改变的场景 -->
<HeavyComponent v-if="isReady" />
<!-- v-show：始终渲染，CSS 控制显示 -->
<!-- 适合：频繁切换的场景 -->
<TabPanel v-show="activeTab === 'panel1'" />
从 Vue2 迁移到 Vue3，就像从功能机换到智能机。虽然基本操作相似，但底层架构和使用体验都有了质的飞跃。本文将带你全面认识 Vue3，从环境搭建到核心概念，开启 Vue3 开发之旅。
| 特性 | Vue2 | Vue3 |
|---|---|---|
| 响应式系统 | Object.defineProperty | Proxy |
| API 风格 | Options API | Composition API + Options API |
| TypeScript | 需要额外配置 | 原生支持 |
| 性能 | 优秀 | 更优秀（体积更小、渲染更快） |
| Tree-shaking | 部分支持 | 完全支持 |
| 多根节点 | 不支持 | 支持（Fragment） |
Vue3 的组件系统在保持简洁的同时变得更加强大。无论你是用 Options API 还是 Composition API，组件化开发的核心理念是一致的。本文将全面介绍 Vue3 中的组件开发与通信方式。
<template>
<div class="user-card">
<h3>{{ fullName }}</h3>
<p>{{ user.email }}</p>
<button @click="handleClick">联系</button>
</div>
</template>
<script>
export default {
name: "UserCard",
props: {
user: {
type: Object,
required: true,
},
},
emits: ["contact"],
data() {
return {
isLoading: false,
};
},
computed: {
fullName() {
return `${this.user.firstName} ${this.user.lastName}`;
},
},
methods: {
handleClick() {
this.$emit("contact", this.user);
},
},
};
</script>
Composition API 是 Vue3 最具革命性的特性。它不仅仅是一种新的写法，更是一种全新的代码组织和复用方式。本文将深入探讨 Composition API 的方方面面，帮你掌握这一强大工具。
// Options API：相关逻辑被强制分散
export default {
data() {
return {
// 功能 A 的数据
userList: [],
userLoading: false,
// 功能 B 的数据
searchQuery: "",
searchResults: [],
};
},
computed: {
// 功能 A 的计算属性
activeUsers() {
/* ... */
},
// 功能 B 的计算属性
filteredResults() {
/* ... */
},
},
methods: {
// 功能 A 的方法
fetchUsers() {
/* ... */
},
deleteUser() {
/* ... */
},
// 功能 B 的方法
search() {
/* ... */
},
clearSearch() {
/* ... */
},
},
mounted() {
// 功能 A 的初始化
this.fetchUsers();
// 功能 B 的初始化
this.initSearch();
},
};
经过基础知识的学习，是时候深入 Vue3 的进阶特性了。本文将探讨 Vue3 的高级用法、响应式原理、TypeScript 集成以及性能优化策略，帮你写出更专业的 Vue3 应用。
// Vue2：Object.defineProperty
// 缺点：无法检测属性添加/删除、数组索引变化
// Vue3：Proxy
// 优点：可以代理整个对象，拦截所有操作
const obj = { name: "张三" };
const proxy = new Proxy(obj, {
get(target, key, receiver) {
console.log(`读取 ${key}`);
track(target, key); // 依赖收集
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
console.log(`设置 ${key} = ${value}`);
const result = Reflect.set(target, key, value, receiver);
trigger(target, key); // 触发更新
return result;
},
deleteProperty(target, key) {
console.log(`删除 ${key}`);
const result = Reflect.deleteProperty(target, key);
trigger(target, key);
return result;
},
});
Vue Router 是 Vue.js 的官方路由管理器，它与 Vue.js 核心深度集成，使构建单页面应用变得轻而易举。本文将全面介绍 Vue Router 的使用，涵盖 Vue2 的 Vue Router 3.x 和 Vue3 的 Vue Router 4.x。
传统网站是多页应用（MPA），每次跳转都会请求新的 HTML 页面。而单页应用（SPA）通过前端路由，在不刷新页面的情况下切换视图。
传统网站（MPA）：
用户点击 → 请求服务器 → 返回新页面 → 浏览器渲染
单页应用（SPA）：
用户点击 → 前端路由拦截 → JavaScript 更新视图 → 无需请求
选择合适的 UI 组件库能极大提升开发效率。Vue 生态有多个优秀的组件库，本文将介绍最流行的几个，帮你做出正确的选择。
| 组件库 | Vue 版本 | 设计风格 | TypeScript | 按需引入 | 适用场景 |
|---|---|---|---|---|---|
| Element UI | Vue2 | 简洁大气 | 部分支持 | 支持 | 中后台系统 |
| Element Plus | Vue3 | 简洁大气 | 完全支持 | 支持 | 中后台系统 |
| Ant Design Vue | Vue2/Vue3 | 企业级 | 完全支持 | 支持 | 企业应用 |
| Naive UI | Vue3 | 清新现代 | 完全支持 | 原生支持 | 各类应用 |
| Vuetify | Vue2/Vue3 | Material | 完全支持 | 支持 | Material 风格 |
| Vant | Vue2/Vue3 | 移动端 | 完全支持 | 支持 | 移动端应用 |