Vue2+Vue3

💡

Vue是国产前端框架，国内使用率极高。Vue3已成为主流（2022年正式发布），Vue2仍大量存在于存量项目。本文覆盖两者的核心知识和差异，附带实战Demo。

---

一、Vue2 vs Vue3 核心差异

对比	Vue2	Vue3
响应式	Object.defineProperty（无法检测新增/删除属性）	Proxy（可拦截全部操作）
API风格	Options API (data/methods/computed)	Composition API (setup/ref/reactive) + Options API可选
生命周期	beforeCreate/created/mounted等	setup()替代beforeCreate+created，其余加on前缀
根节点	template必须单根节点	支持多根节点(Fragment)
组件注册	components: {} 局部注册	直接导入即用（无需显式注册）
响应式API	Vue.set()新增响应式属性	ref() / reactive() 即用即响应
打包体积	较大	Tree-shaking，更小
TypeScript	支持不完善	原生TS编写

---

二、Vue3 核心语法（Composition API）

2.1 响应式核心：ref 和 reactive

2.2 计算属性与侦听

2.3 生命周期

2.4 组件通信

2.5 插槽（Slot）

---

三、Vue2 核心语法（Options API）

---

四、常用指令

指令	作用	示例
v-bind / :	动态绑定属性	:src="imgUrl" :class="{ active: isActive }"
v-model	双向绑定（表单）	<input v-model="username"/>
v-if / v-else-if / v-else	条件渲染（移除DOM）	v-if="isLogin"
v-show	条件显示（display:none）	v-show="visible"（频繁切换用这个）
v-for	列表渲染	v-for="item in list" :key="item.id"
v-on / @	事件绑定	@click="handleClick" @submit.prevent
v-once	只渲染一次	v-once（不再响应式更新）

---

五、Vue Router（路由）

---

六、Pinia 状态管理（Vuex替代）

---

七、实战Demo：TodoList

💡

Demo练习要求：基于上面的TodoList，请完成以下增强功能：(1) 双击编辑待办项文本 (2) 添加"清空已完成"按钮 (3) 使用localStorage持久化数据，刷新不丢失。

---

✅

学习重点：响应式(ref/reactive) → 计算属性(computed) → 组件通信(props/emit) → 路由(Vue Router) → 状态管理(Pinia) → 指令(v-model/v-if/v-for/@event)。先熟悉Vue3 Composition API，遇到Vue2代码会看即可。