Vue 3 入门指南

Vue 3 是一个用于构建用户界面的 JavaScript 框架。本指南将帮助你快速上手。

什么是 Vue 3?

Vue 3 是 Vue.js 的最新版本，提供了更好的性能和开发体验。

主要特性

• Composition API - 更灵活的代码组织方式
• 更小的包体积 - 相比 Vue 2 减少了约 33%
• 更好的 TypeScript 支持 - 完整的类型推导
• 更快的性能 - 优化的虚拟 DOM 实现

快速开始

安装

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

创建第一个组件

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="count++">计数: {{ count }}</button>
  </div>
</template>

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

const message = ref('Hello Vue 3!')
const count = ref(0)
</script>

Composition API vs Options API

Vue 3 支持两种写法：

Options API（选项式）

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

Composition API（组合式，推荐）

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const increment = () => count.value++

    return { count, increment }
  }
}

响应式数据

ref - 包装基本类型

import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 访问值需要使用 .value

reactive - 包装对象类型

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  name: 'Vue'
})

console.log(state.count) // 直接访问

生命周期钩子

import { onMounted, onUnmounted } from 'vue'

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

    onUnmounted(() => {
      console.log('组件卸载')
    })
  }
}

推荐资源

• Vue 3 官方文档
• Vue 3 教程
• VitePress 文档

---

更新日期: 2025-11-11 阅读时间: 5 分钟