Vue3 入门指南
Vue3 是 Vue.js 框架的最新版本，带来了许多新特性和改进。
创建项目
使用 Vite 创建 Vue3 项目：
bash
npm create vue@latest
# 或
npm init vue@latest组合式 API
Vue3 引入了 Composition API，这是与 Options API 不同的编写方式。
setup 函数
vue
<script setup>
import { ref, computed, onMounted } from 'vue'
// 响应式状态
const count = ref(0)
// 计算属性
const doubleCount = computed(() => count.value * 2)
// 方法
function increment() {
count.value++
}
// 生命周期钩子
onMounted(() => {
console.log('Component mounted!')
})
</script>
<template>
<button @click="increment">
Count: {{ count }}, Double: {{ doubleCount }}
</button>
</template>响应式系统
ref vs reactive
javascript
import { ref, reactive } from 'vue'
// ref - 适用于原始类型
const count = ref(0)
// reactive - 适用于对象
const state = reactive({
name: 'Vue',
version: 3
})组件通信
Props 和 Emit
vue
<!-- ChildComponent.vue -->
<script setup>
const props = defineProps({
title: String,
count: Number
})
const emit = defineEmits(['update', 'delete'])
</script>
<template>
<button @click="emit('update')">Update</button>
</template>vue
<!-- ParentComponent.vue -->
<template>
<ChildComponent
title="Hello"
:count="5"
@update="handleUpdate"
/>
</template>路由
javascript
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = createRouter({
history: createWebHistory(),
routes
})