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

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> 语法
• 组件样式和模板编写

示例组件：

<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：

<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：

<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> 语法糖

基本使用：

<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>：

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

// 直接定义响应式数据
const count = ref(0)

// 直接定义方法
const increment = () => {
  count.value++
}

// 无需return，自动暴露给模板
</script>

1.6 响应式数据处理

重点掌握：

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

ref 示例：

<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 示例：

<script setup>
import { reactive } from 'vue'

// 创建响应式对象
const state = reactive({
  count: 0,
  user: {
    name: 'John',
    age: 30
  }
})

// 直接修改属性
state.count++
state.user.age++
</script>