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 有整体 + 深入的掌握！

---