# vue3-学习

**Repository Path**: web_74/vue3--learning

## Basic Information

- **Project Name**: vue3-学习
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-20
- **Last Updated**: 2026-04-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 学习笔记

适合小白上手的 Vue3 + TypeScript 教程。

---

## 📚 学习顺序

| 序号 | 文档 | 学什么 |
|:---:|------|--------|
| 1 | [基本使用](./1%20基本使用.md) | ref / reactive / toRefs |
| 2 | [生命周期](./2%20生命周期.md) | onMounted / onUpdated |
| 3 | [路由](./3%20路由.md) | 页面跳转 |
| 4 | [路由参数](./4%20路由参数.md) | 传参 |
| 5 | [Pinia](./5%20pinia%20.md) | 状态管理 |
| 6 | [watch](./6%20watch.md) | 监听变化 |

---

## 🚀 3秒上手

### 1. 响应式数据
```vue
<script setup>
import { ref } from 'vue'

const count = ref(0)  // 定义数据

function add() {
  count.value++       // 修改要加 .value
}
</script>

<template>
  <p>{{ count }}</p>  <!-- 自动更新 -->
  <button @click="add">+1</button>
</template>
```

### 2. 生命周期
```javascript
import { onMounted } from 'vue'

onMounted(() => {
  console.log('组件加载完成')
})
```

### 3. 路由跳转
```javascript
import { useRouter } from 'vue-router'
const router = useRouter()

router.push('/home')  // 跳转到首页
```

### 4. Pinia 状态管理
```javascript
// stores/user.js
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useUserStore = defineStore('user', () => {
  const name = ref('张三')
  function changeName(newName) {
    name.value = newName
  }
  return { name, changeName }
})

// 组件中使用
import { useUserStore } from '@/stores/user'
const user = useUserStore()

user.name              // 读取
user.changeName('李四') // 修改
```

### 5. 监听数据
```javascript
import { watch } from 'vue'

watch(count, (newVal, oldVal) => {
  console.log('变了', newVal, oldVal)
})
```

---

## ⚠️ 易错点

| 错误 | 正确 |
|------|------|
| `let name = reactive.name` | `let { name } = toRefs(reactive)` |
| `count = 1` | `count.value = 1` |
| `watch(obj.prop, ...)` | `watch(() => obj.prop, ...)` |

---

**开始学吧！** 🎉