Vue3 使用纲要

1. 项目创建与配置

创建项目

bash

npm init vue@latest
# 或
yarn create vue

主要配置文件

• vite.config.js - Vite配置

• tsconfig.json - TypeScript配置

• vue.config.js - Vue CLI配置(如使用)

2. 组件开发

单文件组件(SFC)结构

html

<script setup>
// 组合式API代码
</script>

<template>
  <!-- 模板代码 -->
</template>

<style scoped>
/* 样式代码 */
</style>

两种API风格

1. 组合式API (推荐)

   • <script setup> 语法糖

   • 更好的TypeScript支持

   • 更好的逻辑复用

2. 选项式API

   • 兼容Vue2的写法

   • 适合简单组件

3. 核心响应式API

响应式基础

javascript

import { ref, reactive } from 'vue'

const count = ref(0) // 基本类型
const state = reactive({ // 对象类型
  name: 'Vue3',
  version: 3
})

计算属性

javascript

import { computed } from 'vue'

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

监听器

javascript

import { watch, watchEffect } from 'vue'

watch(count, (newVal) => {
  console.log('count changed:', newVal)
})

watchEffect(() => {
  console.log('count value:', count.value)
})

4. 组件通信

Props/Emits

javascript

// 子组件
const props = defineProps(['title'])
const emit = defineEmits(['update'])

function onClick() {
  emit('update', newValue)
}

Provide/Inject

javascript

// 祖先组件
import { provide } from 'vue'
provide('theme', 'dark')

// 后代组件
import { inject } from 'vue'
const theme = inject('theme', 'light') // 默认值light

5. 生命周期

javascript

import { onMounted, onUpdated } from 'vue'

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

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

6. 路由(Vue Router)

基本使用

javascript

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

在组件中使用

javascript

import { useRoute, useRouter } from 'vue-router'

const route = useRoute() // 当前路由信息
const router = useRouter() // 路由实例

function navigate() {
  router.push('/about')
}

7. 状态管理(Pinia)

创建store

javascript

// stores/counter.js
import { defineStore } from 'pinia'

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

使用store

javascript

import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()
counter.increment()

8. 组合式函数(逻辑复用)

javascript

// composables/useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)

  function update(e) {
    x.value = e.pageX
    y.value = e.pageY
  }

  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  return { x, y }
}

9. 性能优化

1. v-once - 一次性渲染

2. v-memo - 记忆模板子树

3. 异步组件 - 延迟加载

4. keep-alive - 组件缓存

10. TypeScript支持

typescript

<script setup lang="ts">
interface Props {
  title: string
  count?: number
}

const props = defineProps<Props>()
const emit = defineEmits<{
  (e: 'update', value: string): void
}>()
</script>

11. 测试推荐

1. 单元测试: Vitest + Vue Test Utils

2. 组件测试: Cypress Component Testing

3. E2E测试: Cypress

12. 常用工具库

1. VueUse - 常用组合式函数集合

2. Element Plus - UI组件库

3. Axios - HTTP客户端

4. Day.js - 日期处理

13. 部署构建

bash

npm run build
# 生成dist目录，部署到任何静态文件服务器

14. 学习资源

1. 官方文档

2. Vue Mastery

3. Vue School

15. 升级建议

1. 新项目直接使用Vue3

2. 已有项目逐步迁移

3. 优先使用组合式API

4. 考虑使用Pinia替代Vuex