Vue 3.3新特性入门指南：从零开始学习

Vue 3.3发布了，带来了很多新特性。

本文是入门指南，从零开始学习，包括新特性介绍、使用方法、代码示例、最佳实践，以及我的学习经验。

一、Vue 3.3概览

1. 发布背景

第一个：发布背景。

Vue 3.3是一个小版本
主要是改进开发体验
改进TypeScript支持
改进SFC
是开发者友好的版本

Vue 3.3，是体验优化。

2. 核心改进

第二个：核心改进。

更好的TypeScript支持
更好的SFC宏
更好的泛型支持
更好的开发体验
性能也有提升

核心改进，是体验。

3. 升级成本

第三个：升级成本。

从Vue 3.2升级
成本很低
几乎没有breaking change
可以平滑升级
推荐升级

升级成本，很低。

二、新特性详解

1. 特性一：defineProps的解构

第一个特性：defineProps的解构。

<script setup>
const { name, age = 18 } = defineProps({
    name: String,
    age: Number
})
</script>

可以解构props
可以有默认值
保持响应式
更方便
是常用特性

解构props，是实用特性。

2. 特性二：defineEmits的类型

第二个特性：defineEmits的类型。

<script setup>
const emit = defineEmits<{
    (e: 'change', value: string): void
    (e: 'submit'): void
}>()
</script>

更精确的类型
更好的提示
更安全
是TypeScript友好

emits类型，是类型安全。

3. 特性三：泛型组件

第三个特性：泛型组件。

<script setup generic="T">
const props = defineProps<{
    items: T[]
    selected: T
}>()
</script>

支持泛型
更灵活
更强大
适合通用组件
是高级特性

泛型组件，是高级特性。

4. 特性四：defineSlots

第四个特性：defineSlots。

<script setup>
const slots = defineSlots<{
    default: (props: { item: string }) => any
    header: () => any
}>()
</script>

类型化插槽
更好的提示
更安全
是新特性

defineSlots，是类型安全。

5. 特性五：defineOptions

第五个特性：defineOptions。

<script setup>
defineOptions({
    name: 'MyComponent',
    inheritAttrs: false
})
</script>

在script setup中定义选项
不用单独的script
更方便
是实用特性

defineOptions，是便利特性。

三、从零开始学习

1. 第一步：环境搭建

第一步：环境搭建。

# 创建项目
npm create vue@latest

# 安装依赖
cd project
npm install

# 启动
npm run dev

用Vite创建项目
选择TypeScript
选择Vue 3.3
启动开发服务器

环境，是第一步。

2. 第二步：基础语法

第二步：基础语法。

<template>
    <div>{{ message }}</div>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('Hello Vue 3.3')
</script>

模板语法
响应式
事件处理
条件渲染
列表渲染

基础，是核心。

3. 第三步：组件

第三步：组件。

<!-- 子组件 -->
<script setup>
const props = defineProps<{
    title: string
}>()
const emit = defineEmits<{
    (e: 'close'): void
}>()
</script>

<template>
    <div>
        <h2>{{ title }}</h2>
        <button @click="emit('close')">关闭</button>
    </div>
</template>

定义组件
props
emits
插槽
组件通信

组件，是Vue的核心。

4. 第四步：组合式API

第四步：组合式API。

// composables/useCounter.js
import { ref } from 'vue'

export function useCounter() {
    const count = ref(0)
    const increment = () => count.value++
    const decrement = () => count.value--
    return { count, increment, decrement }
}

ref
reactive
computed
watch
自定义hooks

组合式API，是Vue 3的核心。

5. 第五步：新特性实践

第五步：新特性实践。

用defineProps解构
用defineEmits类型
用泛型组件
用defineSlots
用defineOptions

新特性，要实践。

四、代码示例

1. 示例一：泛型列表组件

第一个示例：泛型列表组件。

<script setup generic="T">
interface Props {
    items: T[]
    labelKey: keyof T
}
const props = defineProps<Props>()
const emit = defineEmits<{
    (e: 'select', item: T): void
}>()
</script>

<template>
    <ul>
        <li v-for="item in items" :key="item.id" @click="emit('select', item)">
            {{ item[labelKey] }}
        </li>
    </ul>
</template>

泛型组件
类型安全
复用性强
是高级用法

泛型列表，是实用示例。

2. 示例二：带类型的表单组件

第二个示例：带类型的表单组件。

<script setup>
interface FormProps {
    modelValue: {
        name: string
        email: string
    }
}
const props = defineProps<FormProps>()
const emit = defineEmits<{
    (e: 'update:modelValue', value: FormProps['modelValue']): void
    (e: 'submit'): void
}>()

const update = (key: string, value: string) => {
    emit('update:modelValue', { ...props.modelValue, [key]: value })
}
</script>

类型化的v-model
类型安全
更好的提示
是实用示例

类型表单，是实用示例。

3. 示例三：类型化插槽

第三个示例：类型化插槽。

<script setup>
interface SlotProps {
    item: { id: number; name: string }
    index: number
}
defineSlots<{
    default: (props: SlotProps) => any
    header: () => any
    footer: () => any
}>()
</script>

<template>
    <div>
        <slot name="header" />
        <div v-for="(item, index) in items" :key="item.id">
            <slot :item="item" :index="index" />
        </div>
        <slot name="footer" />
    </div>
</template>

类型化插槽
更好的提示
更安全
是新特性

类型化插槽，是新特性示例。

五、最佳实践

1. 实践一：用TypeScript

第一个实践：用TypeScript。

Vue 3.3对TS支持更好
推荐用TS
类型安全
更好的提示
提高质量

TypeScript，是推荐的。

2. 实践二：用script setup

第二个实践：用script setup。

更简洁
更高效
更好的类型支持
是推荐的写法
是Vue 3的标准

script setup，是标准。

3. 实践三：用组合式API

第三个实践：用组合式API。

更好的逻辑复用
更好的类型推断
更灵活
是推荐的
是Vue 3的核心

组合式API，是核心。

4. 实践四：善用新特性

第四个实践：善用新特性。

defineProps解构
defineEmits类型
泛型组件
defineSlots
defineOptions

新特性，要用起来。

5. 实践五：组件设计

第五个实践：组件设计。

单一职责
props设计
emits设计
插槽设计
可复用

组件设计，是架构。

六、常见问题

1. 问题一：要不要升级？

第一个问题：要不要升级？

回答：

建议升级
成本低
体验好
类型支持好
推荐升级

升级，推荐。

2. 问题二：新特性一定要用吗？

第二个问题：新特性一定要用吗？

回答：

不一定要
看需求
适合的才用
不要为了用而用
实用为主

新特性，看需求。

3. 问题三：泛型组件怎么用？

第三个问题：泛型组件怎么用？

回答：

适合通用组件
比如列表、表单
需要类型安全
可以用
普通组件不用

泛型，看场景。

4. 问题四：和Vue 2怎么选？

第四个问题：和Vue 2怎么选？

回答：

新项目用Vue 3
老项目可以迁移
Vue 2已经EOL
推荐Vue 3
是趋势

Vue 3，是趋势。

5. 问题五：学习资源推荐？

第五个问题：学习资源推荐？

回答：

官方文档
官方教程
Vue Mastery
B站教程
多实践

资源，很多。

七、学习经验

1. 经验一：多实践

第一个经验：多实践。

光看没用
要多写
多做项目
多踩坑
才能掌握

实践，是最重要的。

2. 经验二：看官方文档

第二个经验：看官方文档。

官方文档最权威
最准确
最及时
要多看
是第一手资料

官方文档，是权威。

3. 经验三：看源码

第三个经验：看源码。

看Vue源码
理解原理
提高水平
是进阶
推荐

源码，是进阶。

4. 经验四：做项目

第四个经验：做项目。

做实际项目
综合运用
发现问题
解决问题
成长快

项目，是综合训练。

5. 经验五：持续学习

第五个经验：持续学习。

Vue在更新
新功能不断
要持续学习
不要停止
保持进步

持续学习，是必须的。

八、写在最后

Vue 3.3新特性入门指南，从零开始学习。

新特性：defineProps解构、defineEmits类型、泛型组件、defineSlots、defineOptions。学习路径：环境搭建、基础语法、组件、组合式API、新特性实践。最佳实践：用TypeScript、用script setup、用组合式API、善用新特性、组件设计。

2023年了，Vue 3.3发布了，带来了更好的开发体验，更好的TypeScript支持。如果你是Vue开发者，推荐升级。如果你是新手，推荐从Vue 3.3开始学习。

最后，用一句话总结："Vue 3.3，是体验优化的版本，升级成本低，新特性实用。从零开始，多实践，多看文档，多做项目，你也能掌握Vue 3.3。"

希望这篇入门指南，能帮你快速上手Vue 3.3。