Vue 3 全面详解：从基础到进阶实战

一、Vue 3 基础回顾

1. 安装与创建项目

使用 Vite 快速搭建 Vue 3 项目：

npm create vite@latest my-vue-app
cd my-vue-app
npm install
npm run dev

2. 基础语法

• v-bind、v-model 双向绑定
• 条件渲染：v-if/v-else、v-show
• 列表渲染：v-for
• 事件监听：v-on
• 样式绑定：:class、:style

示例：

<template><div><input v-model="message" /><p>{{ message }}</p></div>
</template><script setup>
import { ref } from 'vue'
const message = ref('Hello Vue 3')
</script>

二、Vue 3 核心 API 全解

1. Composition API 详解

setup

export default {setup() {// 逻辑}
}

ref vs reactive

<script setup>
import { ref, reactive } from 'vue'const count = ref(0)
const user = reactive({ name: 'Tom', age: 20 })
</script>

computed

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

watch / watchEffect

watch(() => user.name, (newVal) => {console.log('Name changed:', newVal)
})watchEffect(() => {console.log(user.name)
})

生命周期钩子

onMounted(() => {console.log('Mounted!')
})

2. 其他实用 API

provide / inject

// 父组件
provide('theme', 'dark')// 子组件
const theme = inject('theme')

getCurrentInstance

const { proxy } = getCurrentInstance()
console.log(proxy)

defineProps / defineEmits

<script setup>
const props = defineProps({title: String
})const emit = defineEmits(['submit'])
</script>

3. 新特性

• Teleport
• Suspense
• 多根节点

示例：

<teleport to="body"><div>I am teleported!</div>
</teleport>

三、Vue 3 高级特性

1. Script Setup 语法糖

<script setup>
const msg = 'Hello script setup!'
</script><template><p>{{ msg }}</p>
</template>

2. 动态组件 & 异步组件

<component :is="currentComponent" />

3. 自定义指令

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

四、性能优化

1. keep-alive

<keep-alive><component :is="currentView"></component>
</keep-alive>

2. 异步组件懒加载

const AsyncComp = defineAsyncComponent(() =>import('./MyComponent.vue')
)

3. v-memo / v-once

<p v-memo="[count]">{{ count }}</p>
<p v-once>{{ onceValue }}</p>

五、生态扩展与实战

1. Vue 3 + TypeScript

<script setup lang="ts">
const count: Ref<number> = ref(0)
</script>

2. Vue 3 + Axios 封装

// utils/request.js
import axios from 'axios'const instance = axios.create({baseURL: '/api',timeout: 5000
})// 请求拦截
instance.interceptors.request.use(config => {// token 等处理return config
})// 响应拦截
instance.interceptors.response.use(res => res.data,err => Promise.reject(err)
)export default instance
}调用示例：{js
import request from './utils/request'request.get('/user').then(res => {console.log(res)
})

3. VueUse 示例

<script setup>
import { useMouse } from '@vueuse/core'const { x, y } = useMouse()
</script><template><p>Mouse: {{ x }}, {{ y }}</p>
</template>

4. Vue 3 + ECharts

<script setup>
import * as echarts from 'echarts'
import { onMounted } from 'vue'onMounted(() => {const chart = echarts.init(document.getElementById('chart'))chart.setOption({xAxis: { type: 'category', data: ['A', 'B', 'C'] },yAxis: { type: 'value' },series: [{ data: [5, 20, 36], type: 'bar' }]})
})
</script><template><div id="chart" style="width: 600px; height: 400px"></div>
</template>

六、工具链与部署

1. ESLint + Prettier 配置

npm install eslint prettier eslint-config-prettier eslint-plugin-vue -D

根目录添加 .eslintrc.js：

module.exports = {extends: ['plugin:vue/vue3-essential', 'prettier']
}

2. Vite 打包优化

• 开启 gzip 压缩
• 使用 vite-plugin-compression

npm install vite-plugin-compression -D

vite.config.js：

import viteCompression from 'vite-plugin-compression'export default {plugins: [viteCompression()]
}

七、总结

本文系统介绍了 Vue 3 的基础用法、核心 API、高级特性、性能优化、生态扩展及工具链配置，希望你能通过本教程对 Vue 3 有整体 + 深入的掌握！

---