前端框架之vue3/2（核心知识提要） - 详解

以下是 Vue 2 和 Vue 3初级开发者必会的核心知识点纲要，适合前端新手或初级开发者作为学习路径和技能地图。按 Vue 版本分别列出重点内容，最后也会总结两者的对比差异，方便过渡。

---

Vue 2 初级制作必会核心知识

一、Vue 基础语法

• Vue 实例（new Vue({ ... })）
• 模板语法（插值表达式、v-html）
• 指令（v-bind、v-model、v-if、v-show、v-for）
• 事件处理（v-on、@click）
• 表单输入绑定（v-model）

二、计算属性与侦听器

• 计算属性（computed）
• 侦听器（watch）

三、组件系统

• 创建组件（Vue.component、局部注册）
• 父子组件通信
  • Props
  • 自定义事件（$emit）

四、生命周期钩子（Options API）

• created、mounted、updated、destroyed

五、样式与类绑定

• 动态 class 和 style 绑定

六、条件与列表渲染

• v-if / v-else-if / v-else
• v-show
• v-for（含 key）

七、Vue CLI 脚手架（基础）

• 创建项目（vue init、vue-cli-service）
• 项目结构
• 容易开发调试流程

八、简单路由利用（配合 Vue Router）

• 安装 Vue Router
• 路由配置与 <router-view> / <router-link>
• 动态路由、传参

九、方便状态管理（配合 Vuex）

• Vuex 的 state、getters、mutations、actions 核心使用

---

Vue 3 初级创建必会核心知识

一、Composition API 核心语法

• setup 函数
• 响应式核心：ref、reactive
• 计算属性：computed
• 侦听器：watch、watchEffect

二、模板语法与指令

• 与 Vue 2 相同的基本指令使用：v-bind、v-model、v-if、v-for 等
• 模板引用：ref="myEl" + template ref

三、组件开发

• 组件注册与采用（单文件组件）
• Props 与 Emits

四、生命周期函数（Composition API 风格）

• onMounted、onUpdated、onUnmounted 等

五、样式与 class/style 绑定

• 与 Vue 2 类似，:class、:style

六、Vue Router 4（Vue 3 专用）

• createRouter 与 createWebHistory
• 动态路由与嵌套路由

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

• defineStore 创建 store
• ref / reactive 状态
• Actions 的使用

---

✅ Vue 2 vs Vue 3 初级阶段核心差异总结

知识点	Vue 2（Options API）	Vue 3（Composition API）
响应式	data	ref, reactive
生命周期	created, mounted 等	onMounted 等
状态管理	Vuex	推荐使用 Pinia
组件定义方式	export default {}	<script setup>（推荐）
项目脚手架	Vue CLI	Vite（更现代、推荐）

---

建议的学习顺序（Vue 2 / 3 通用）

1. 模板语法 + 指令启用
2. 组件编写 + Props/Emit
3. 响应式数据处理：computed, watch
4. 生命周期理解
5. Vue CLI / Vite 上手
6. 路由基础：页面跳转与传参
7. 状态管理：Vuex（Vue 2） / Pinia（Vue 3）
8. 项目实践（小型 Todo / 电商列表 / 表单等）

---