Vue 3 学习笔记

开始时间: 2024年1月

重要提醒: 多练习，多实践！

学习进度

基础语法

组件系统

状态管理

路由系统

第一章：Vue 3 基础概念

1. 什么是 Vue 3？

Vue 3 是一个用于构建用户界面的渐进式框架。更快、更小、更易维护

2. 主要特性

Composition API
更好的 TypeScript 支持
性能提升
Tree-shaking 支持

代码示例

创建 Vue 应用

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

Composition API 示例

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

const count = ref(0)
const doubleCount = computed(() => count.value * 2)

function increment() {
  count.value++
}
</script>

注意：ref() 用于创建响应式数据

重点笔记

响应式原理

Vue 3 使用 Proxy 替代了 Vue 2 的 Object.defineProperty，性能更好，支持更多数据类型

生命周期钩子

• onMounted() - 组件挂载后

• onUpdated() - 组件更新后

• onUnmounted() - 组件卸载前

常用 API

• ref() - 基本类型响应式

• reactive() - 对象响应式

• computed() - 计算属性

• watch() - 侦听器

练习题

题目1：创建一个计数器组件

要求：使用 Composition API，包含增加、减少、重置功能

已完成难度: ⭐⭐

题目2：实现 Todo List

要求：添加、删除、标记完成、筛选功能

已完成难度: ⭐⭐⭐

学习心得

• Vue 3 的 Composition API 让代码更加模块化

• TypeScript 支持真的很棒！

• 性能提升明显，特别是大型应用

• 记住多练习，理论结合实践最重要！

学习者笔记

目录导航