第一章：Vue 3 简介与安装

1.1 Vue 3 是什么

  • Vue 是一款渐进式 JavaScript 框架，用于构建用户界面。
  • Vue 3 相比 Vue 2 的优势：
    • 性能提升（体积更小、速度更快）
    • Composition API（组合式 API）提供更灵活的代码组织方式
    • TypeScript 支持更完善
    • 更好的 Tree-shaking 支持，减小包体积

1.2 开发环境准备

  • 安装 Node.js（建议版本 >= 16）
  • 使用 npm 或 yarn 管理依赖
  • 创建 Vue 3 项目：
# 使用 Vue CLI
npm install -g @vue/cli
vue create my-vue3-app

# 使用 Vite（推荐 Vue 3 官方支持）
npm create vite@latest my-vue3-app
cd my-vue3-app
npm install
npm run dev

1.3 项目结构

  • src/main.js：入口文件，挂载根组件
  • src/App.vue：根组件
  • src/components/：存放子组件

第二章：Vue 3 基础语法

2.1 模板语法

  • 插值表达式：{{ message }}
  • 指令：
    • v-bind 动态绑定属性
    • v-if / v-else 条件渲染
    • v-for 列表渲染
    • v-on 事件绑定
  • 示例：
<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="changeTitle">修改标题</button>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello Vue 3",
      items: [{ id: 1, name: "Apple" }, { id: 2, name: "Banana" }]
    }
  },
  methods: {
    changeTitle() {
      this.title = "标题已修改"
    }
  }
}
</script>

2.2 响应式基础

  • ref 用于基本数据类型
  • reactive 用于对象
import { ref, reactive } from 'vue';

const count = ref(0);
const state = reactive({ name: 'Vue3', age: 3 });

function increment() {
  count.value++;
}

第三章：组件化开发

3.1 创建与使用组件

  • Vue 文件结构：<template>, <script>, <style>
  • 父组件引用子组件：
&lt;template>
  &lt;ChildComponent msg="Hello"/>
&lt;/template>

&lt;script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: { ChildComponent }
}
&lt;/script>

3.2 Props 与事件

  • 父向子传递数据：props
  • 子向父传递事件：emit
&lt;template>
  &lt;button @click="$emit('increment')">+&lt;/button>
&lt;/template>

&lt;script>
export default {
  props: ['count']
}
&lt;/script>

第四章：组合式 API (Composition API)

4.1 基础使用

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    return { count, increment };
  }
}

4.2 生命周期钩子

  • onMounted, onUpdated, onUnmounted 等
import { onMounted } from 'vue';

onMounted(() => {
  console.log("组件已挂载");
});

第五章：路由与状态管理

5.1 Vue Router

  • 安装：
npm install vue-router@4
  • 创建路由：
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

5.2 Vuex / Pinia（状态管理）

  • 安装 Pinia：
npm install pinia
  • 创建 store：
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ }
  }
});

第六章：实战项目示例

6.1 Todo List

  • 功能：增删改查、状态切换
  • 技术点：
    • 组件通信
    • 响应式数据
    • 列表渲染
    • 本地存储保存数据

6.2 小型博客系统

  • 功能：文章列表、详情页、评论功能
  • 技术点：
    • Vue Router 路由管理
    • API 数据请求
    • 组件复用

第七章：Vue 3 高级特性

7.1 Teleport

  • 将组件内容传送到指定 DOM 节点
&lt;teleport to="body">
  &lt;div class="modal">这是模态框&lt;/div>
&lt;/teleport>

7.2 Suspense

  • 异步组件处理加载状态
&lt;template>
  &lt;Suspense>
    &lt;template #default>
      &lt;AsyncComponent />
    &lt;/template>
    &lt;template #fallback>
      Loading...
    &lt;/template>
  &lt;/Suspense>
&lt;/template>

7.3 自定义指令

app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});