Vue 3 基础入门指南

Vue 3 基础入门指南

Vue 3 简介

Vue 3 是一个用于构建用户界面的渐进式 JavaScript 框架，相比 Vue 2 具有更好的性能和更多新特性。

开发环境搭建

  1. 安装 Node.js
  2. 使用 Vite 创建项目：
1
2
3
4
npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev

Composition API 基础

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { ref, reactive, computed } from 'vue'

export default {
  setup() {
    // 响应式状态
    const count = ref(0)
    const user = reactive({
      name: 'John',
      age: 25
    })

    // 计算属性
    const doubleCount = computed(() => count.value * 2)

    // 方法
    const increment = () => {
      count.value++
    }

    return {
      count,
      user,
      doubleCount,
      increment
    }
  }
}

模板语法

1
2
3
4
5
6
7
8
<template>
  <div>
    <h1>{{ user.name }}</h1>
    <p>Count: {{ count }}</p>
    <p>Double: {{ doubleCount }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

生命周期钩子

  • onMounted
  • onUpdated
  • onUnmounted
  • onBeforeMount
  • onBeforeUpdate
  • onBeforeUnmount

响应式系统

  • ref：用于基本类型
  • reactive：用于对象
  • computed：计算属性
  • watch/watchEffect：侦听器

组件基础

  • 组件注册
  • Props 传递
  • 事件发射
  • 插槽使用

提示：这是 Vue 3 入门文章，涵盖了基础概念和使用方法。建议配合官方文档深入学习。