Vue3 完整学习笔记 - 第一部分

1. Vue3 基础入门

1.1 Vue3 简介

重点掌握：

• Vue3 的主要特性和优势
• 相比 Vue2 的重大改进
• 为什么要学习 Vue3

核心要点：

1. 性能提升：
   • 重写虚拟DOM实现
   • 编译器优化
   • 更高效的组件初始化
2. 新特性：
   • Composition API
   • Teleport
   • Fragments
   • Suspense
3. 更好的 TypeScript 支持

示例：

// Vue2 写法
export default {data() {return {count: 0}},methods: {increment() {this.count++}}
}// Vue3 Composition API 写法
import { ref } from 'vue'export default {setup() {const count = ref(0)const increment = () => count.value++return {count,increment}}
}

1.2 创建 Vue3 工程

重点掌握：

• 使用 Vite 创建项目
• 项目目录结构
• 基本配置说明

步骤：

1. 创建项目：

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

2. 目录结构说明：

my-vue-app/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── index.html
├── package.json
└── vite.config.js

核心配置：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],server: {port: 3000}
})

1.3 编写首个 Vue3 组件

重点掌握：

• 组件基本结构
• <script setup> 语法
• 组件样式和模板编写

示例组件：

vue"><template><div class="container"><h1>{{ title }}</h1><button @click="increment">点击次数: {{ count }}</button></div>
</template><script setup>
import { ref } from 'vue'const title = 'My First Vue3 App'
const count = ref(0)const increment = () => {count.value++
}
</script><style scoped>
.container {text-align: center;margin-top: 20px;
}button {padding: 8px 16px;font-size: 16px;
}
</style>

1.4 Composition API vs Options API

重点掌握：

• 两种 API 的区别
• 各自的适用场景
• 如何选择使用哪种 API

Options API：

vue"><script>
export default {data() {return {firstName: 'John',lastName: 'Doe',age: 30}},computed: {fullName() {return `${this.firstName} ${this.lastName}`}},methods: {incrementAge() {this.age++}}
}
</script>

Composition API：

vue"><script setup>
import { ref, computed } from 'vue'const firstName = ref('John')
const lastName = ref('Doe')
const age = ref(30)const fullName = computed(() => `${firstName.value} ${lastName.value}`)const incrementAge = () => {age.value++
}
</script>

优劣对比：

1. Options API:
   • 优点：结构清晰，容易理解
   • 缺点：代码复用困难，逻辑分散
2. Composition API:
   • 优点：逻辑复用方便，更好的TypeScript支持
   • 缺点：学习曲线相对陡峭

1.5 setup 函数详解

重点掌握：

• setup 执行时机
• setup 参数
• 返回值处理
• <script setup> 语法糖

基本使用：

vue"><script>
import { ref } from 'vue'export default {props: {title: String},setup(props, context) {// 创建响应式数据const count = ref(0)// 方法const increment = () => {count.value++}// 返回值会暴露给模板return {count,increment}}
}
</script>

使用 <script setup>：

vue"><script setup>
import { ref } from 'vue'// 直接定义响应式数据
const count = ref(0)// 直接定义方法
const increment = () => {count.value++
}// 无需return，自动暴露给模板
</script>

1.6 响应式数据处理

重点掌握：

• ref 的使用
• reactive 的使用
• 两者的区别和选择

ref 示例：

vue"><script setup>
import { ref } from 'vue'// 基本类型
const count = ref(0)
const message = ref('Hello')// 访问和修改
console.log(count.value)
count.value++// 对象类型
const user = ref({name: 'John',age: 30
})// 修改对象属性
user.value.age++
</script>

reactive 示例：

vue"><script setup>
import { reactive } from 'vue'// 创建响应式对象
const state = reactive({count: 0,user: {name: 'John',age: 30}
})// 直接修改属性
state.count++
state.user.age++
</script>