Vue 3 完全教程

第一章：Vue 3 基础概念

1.1 Vue 3 是什么？

Vue 3 是一个用于构建用户界面的渐进式JavaScript框架。它采用组合式API，提供了更好的TypeScript支持和性能优化。

练习 1.1：基本计数器应用

创建一个简单的计数器应用。

App.vue

<template>
    <div>
        <h2>计数器: {{ count }}</h2>
        <p>双倍计数: {{ doubleCount }}</p>
        <button @click="increment">增加</button>
        <button @click="decrement">减少</button>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const count = ref(0)
const doubleCount = computed(() => count.value * 2)

function increment() {
    count.value++
}

function decrement() {
    count.value--
}
</script>
                

main.js

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')
                

第二章：组合式API

2.1 响应式基础

Vue 3 提供了多种响应式API。

练习 2.1：响应式数据

展示不同的响应式数据使用方式。

响应式数据示例

<script setup>
import { ref, reactive, computed, watch } from 'vue'

// ref 用于基本类型
const count = ref(0)
const message = ref('Hello Vue!')

// reactive 用于对象
const state = reactive({
    name: 'Vue 3',
    version: '3.0.0'
})

// computed 计算属性
const fullName = computed(() => `${state.name} ${state.version}`)

// watch 侦听器
watch(count, (newValue, oldValue) => {
    console.log(`count从${oldValue}变为${newValue}`)
})

// watchEffect 自动追踪依赖
watchEffect(() => {
    console.log(`count的值是: ${count.value}`)
})
</script>
                

2.2 生命周期钩子

Vue 3 的生命周期钩子函数。

练习 2.2：生命周期示例

展示生命周期钩子的使用。

生命周期示例

<script setup>
import { onMounted, onUpdated, onUnmounted } from 'vue'

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

onUpdated(() => {
    console.log('组件已更新')
})

onUnmounted(() => {
    console.log('组件已卸载')
})
</script>
                

2.3 组件通信

Vue 3 的组件通信方式。

练习 2.3：组件通信示例

展示不同的组件通信方式。

组件通信示例

// 父组件
<template>
    <ChildComponent 
        :message="message"
        @update="handleUpdate"
    />
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const message = ref('Hello from parent')

function handleUpdate(newMessage) {
    message.value = newMessage
}
</script>

// 子组件
<template>
    <div>
        <p>{{ message }}</p>
        <button @click="updateMessage">更新消息</button>
    </div>
</template>

<script setup>
defineProps(['message'])
const emit = defineEmits(['update'])

function updateMessage() {
    emit('update', 'New message from child')
}
</script>
                

第三章：路由和状态管理

3.1 Vue Router 4

Vue Router 4 是 Vue 3 的官方路由管理器。

练习 3.1：路由配置

配置基本路由。

路由配置示例

// router/index.js
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

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')
                

3.2 Pinia

Pinia 是 Vue 3 的官方状态管理库。

练习 3.2：Pinia 状态管理

配置 Pinia store。

Pinia 配置示例

// store/counter.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useCounterStore = defineStore('counter', () => {
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)
    
    function increment() {
        count.value++
    }
    
    return { count, doubleCount, increment }
})

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.mount('#app')
                

第四章：高级特性

4.1 Teleport

Teleport 允许我们将组件传送到 DOM 中的其他位置。

练习 4.1：Teleport 示例

展示 Teleport 的使用。

Teleport 示例

<template>
    <button @click="showModal = true">打开模态框</button>
    
    <Teleport to="body">
        <div v-if="showModal" class="modal">
            <h2>模态框标题</h2>
            <p>模态框内容</p>
            <button @click="showModal = false">关闭</button>
        </div>
    </Teleport>
</template>

<script setup>
import { ref } from 'vue'

const showModal = ref(false)
</script>

<style scoped>
.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
</style>
                

4.2 Suspense

Suspense 用于处理异步组件的加载状态。

练习 4.2：Suspense 示例

展示 Suspense 的使用。

Suspense 示例

<template>
    <Suspense>
        <template #default>
            <AsyncComponent />
        </template>
        <template #fallback>
            <div>加载中...</div>
        </template>
    </Suspense>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() =>
    import('./AsyncComponent.vue')
)
</script>
                

第五章：最佳实践

5.1 性能优化

Vue 3 的性能优化技巧。

性能优化示例

// 1. 使用 shallowRef 和 shallowReactive
import { shallowRef, shallowReactive } from 'vue'

const state = shallowReactive({
    nested: { count: 0 }
})

// 2. 使用 markRaw 标记不需要响应式的对象
import { markRaw } from 'vue'

const rawObject = markRaw({
    name: 'Vue'
})

// 3. 使用 v-memo 优化渲染
<div v-memo="[valueA, valueB]">
    {{ valueA }} {{ valueB }}
</div>

// 4. 使用 defineAsyncComponent 实现组件懒加载
import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() =>
    import('./AsyncComponent.vue')
)
            

5.2 TypeScript 支持

Vue 3 的 TypeScript 支持。

TypeScript 示例

// 组件 Props 类型定义
interface Props {
    title: string
    count?: number
}

const props = withDefaults(defineProps<Props>(), {
    count: 0
})

// 组件 Emits 类型定义
const emit = defineEmits<{
    (e: 'update', value: string): void
    (e: 'delete', id: number): void
}>()

// 组件 Ref 类型定义
const count = ref<number>(0)
const user = ref<User | null>(null)
            

第六章：常见问题解答

6.1 常见错误

列举并解决使用 Vue 3 时常见的错误。

常见错误及解决方案

// 错误1：在 setup 中直接修改 props
// ❌ 错误做法
const props = defineProps(['count'])
props.count = 10

// ✅ 正确做法
const props = defineProps(['count'])
const localCount = ref(props.count)

// 错误2：忘记使用 .value 访问 ref
// ❌ 错误做法
const count = ref(0)
console.log(count)

// ✅ 正确做法
const count = ref(0)
console.log(count.value)

// 错误3：在模板中使用解构
// ❌ 错误做法
<template>
    <div>{{ { count } }}</div>
</template>

// ✅ 正确做法
<template>
    <div>{{ count }}</div>
</template>
            

6.2 调试技巧

介绍 Vue 3 的调试工具和技巧。

调试技巧示例

// 1. 使用 Vue Devtools
// 安装 Vue Devtools 浏览器扩展

// 2. 在组件中添加调试信息
onMounted(() => {
    console.log('组件数据:', props)
    console.log('响应式数据:', count.value)
})

// 3. 使用 watch 调试响应式数据
watch(count, (newValue, oldValue) => {
    console.log('count变化:', oldValue, '->', newValue)
}, { immediate: true })

// 4. 使用 watchEffect 自动追踪依赖
watchEffect(() => {
    console.log('当前count:', count.value)
})
            