当前位置：首页 > news >正文

Vue3 全面学习指南 - 从入门到实战

news 2025/10/30 14:23:30

1. Vue3 简介与优势

1.1 Vue3 新特性

Vue3 是 Vue.js 的最新主要版本，带来了多项重大改进：

性能提升：重写虚拟 DOM，初始渲染速度提升 100%，更新速度提升 133%
Tree-shaking 支持：按需引入功能，减小打包体积
Composition API：更好的逻辑组织和代码复用
更好的 TypeScript 支持
新的响应式系统：使用 Proxy 替代 Object.defineProperty

1.2 环境要求

Node.js 14.0+
现代浏览器支持

2. 项目创建与配置

2.1 使用 Vite 创建项目

# 使用 npm
npm create vue@latest# 或使用 yarn
yarn create vue# 或使用 pnpm
pnpm create vue

2.2 项目结构

my-vue-app/
├── public/
├── src/
│   ├── components/
│   ├── views/
│   ├── stores/
│   ├── router/
│   ├── App.vue
│   └── main.js
├── package.json
└── vite.config.js

3. Composition API

3.1 响应式基础

<template><div><p>{{ count }}</p><button @click="increment">增加</button><p>{{ user.name }}</p></div>
</template><script setup>
import { ref, reactive } from 'vue'// 基本类型使用 ref
const count = ref(0)// 对象使用 reactive
const user = reactive({name: '张三',age: 25
})const increment = () => {count.value++user.age++
}
</script>

3.2 计算属性与侦听器

<script setup>
import { ref, computed, watch } from 'vue'const price = ref(10)
const quantity = ref(2)// 计算属性
const total = computed(() => price.value * quantity.value)// 侦听器
watch(quantity, (newValue, oldValue) => {console.log(`数量从 ${oldValue} 变为 ${newValue}`)
})// 深度侦听
watch(() => user,(newValue) => {console.log('用户信息变化:', newValue)},{ deep: true }
)
</script>

4. 组件系统

4.1 组件基础

<!-- ChildComponent.vue -->
<template><div class="child"><h3>{{ title }}</h3><slot name="header"></slot><p>{{ content }}</p><slot></slot><slot name="footer" :text="footerText"></slot></div>
</template><script setup>
defineProps({title: String,content: {type: String,default: '默认内容'}
})const footerText = '这是底部内容'
</script>

4.2 组件通信

<!-- ParentComponent.vue -->
<template><ChildComponent:title="parentTitle":content="parentContent"@update="handleUpdate"><template #header><h2>自定义头部</h2></template><p>默认插槽内容</p><template #footer="{ text }"><p>{{ text }}</p></template></ChildComponent>
</template><script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'const parentTitle = ref('父组件标题')
const parentContent = ref('父组件内容')const handleUpdate = (data) => {console.log('接收到子组件数据:', data)
}
</script>

5. 生命周期

<script setup>
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated,onBeforeUnmount,onUnmounted
} from 'vue'onBeforeMount(() => {console.log('挂载前')
})onMounted(() => {console.log('挂载完成')// 在这里进行 DOM 操作或数据请求
})onBeforeUpdate(() => {console.log('更新前')
})onUpdated(() => {console.log('更新完成')
})onBeforeUnmount(() => {console.log('卸载前')
})onUnmounted(() => {console.log('卸载完成')
})
</script>

6. 路由管理 (Vue Router 4)

6.1 路由配置

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'const routes = [{path: '/',name: 'Home',component: () => import('../views/Home.vue')},{path: '/about',name: 'About',component: () => import('../views/About.vue'),meta: { requiresAuth: true }},{path: '/user/:id',name: 'User',component: () => import('../views/User.vue'),props: true}
]const router = createRouter({history: createWebHistory(),routes
})// 路由守卫
router.beforeEach((to, from, next) => {if (to.meta.requiresAuth && !isLoggedIn()) {next('/login')} else {next()}
})export default router

6.2 路由使用

<template><div><nav><router-link to="/">首页</router-link><router-link to="/about">关于</router-link></nav><router-view></router-view></div>
</template><script setup>
import { useRouter, useRoute } from 'vue-router'const router = useRouter()
const route = useRoute()const goToAbout = () => {router.push('/about')
}// 获取路由参数
const userId = route.params.id
</script>

7. 状态管理 (Pinia)

7.1 Store 定义

// stores/counter.js
import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {state: () => ({count: 0,name: '计数器'}),getters: {doubleCount: (state) => state.count * 2,doubleCountPlusOne() {return this.doubleCount + 1}},actions: {increment() {this.count++},async incrementAsync() {await new Promise(resolve => setTimeout(resolve, 1000))this.increment()}}
})

7.2 Store 使用

<template><div><p>{{ count }}</p><p>{{ doubleCount }}</p><button @click="increment">增加</button><button @click="incrementAsync">异步增加</button></div>
</template><script setup>
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'const counterStore = useCounterStore()// 使用 storeToRefs 保持响应式
const { count, doubleCount } = storeToRefs(counterStore)const { increment, incrementAsync } = counterStore
</script>

8. 高级特性

8.1 自定义指令

// directives/focus.js
export const vFocus = {mounted: (el) => {el.focus()},updated: (el, binding) => {if (binding.value) {el.focus()}}
}// 在组件中使用
<script setup>
import { vFocus } from '@/directives/focus'
</script><template><input v-focus="shouldFocus" />
</template>

8.2 插件开发

// plugins/i18n.js
export default {install: (app, options) => {app.config.globalProperties.$translate = (key) => {return key.split('.').reduce((o, i) => {if (o) return o[i]}, options)}app.provide('i18n', options)}
}

9. 最佳实践

9.1 代码组织

<script setup>
// 1. 导入
import { ref, computed, onMounted } from 'vue'// 2. 响应式数据
const count = ref(0)
const user = reactive({ name: '' })// 3. 计算属性
const doubleCount = computed(() => count.value * 2)// 4. 方法
const increment = () => count.value++// 5. 生命周期
onMounted(() => {// 初始化逻辑
})// 6. 监听器
watch(count, (newVal) => {console.log(newVal)
})
</script>

9.2 性能优化

使用 v-once 静态内容
合理使用 v-memo
组件懒加载
列表使用 key

10. TypeScript 支持

<template><div><p>{{ message }}</p><button @click="increment">{{ count }}</button></div>
</template><script setup lang="ts">
import { ref, computed } from 'vue'interface User {name: stringage: number
}// 类型推断
const count = ref<number>(0)
const user = ref<User>({ name: 'John', age: 25 })const message = computed(() => `Count: ${count.value}`)const increment = (): void => {count.value++
}
</script>