<template> <!-- 视图层：HTML模板，用于展示数据 --> </template> <script setup> // 逻辑层：Composition API编写业务逻辑 import { ref, reactive } from 'vue' const count = ref(0) const user = reactive({ name: 'Vue3', age: 5 }) </script> <style> /* 样式层：CSS定义组件外观 */ </style>

这种结构将视图、逻辑、样式分离，使代码更清晰、可维护性更强。

2. Composition API vs Options API

Options API（Vue2风格）：按选项组织代码（data、methods、computed等），适合简单组件
Composition API（Vue3核心）：按功能组织代码，将相关逻辑聚合在一起，适合复杂组件
关键优势：解决逻辑分散问题，提高代码复用性，降低维护成本

二、核心语法详解

1. 响应式数据管理

Vue3使用Proxy替代Vue2的Object.defineProperty，解决了响应式局限问题。

ref() - 基本类型响应式

import { ref } from 'vue' // 创建响应式数据 const count = ref(0) const message = ref('Hello Vue3') // 修改数据（需通过.value） count.value = 1 message.value = 'Updated message' // 模板中直接使用，无需.value // {{ count }} {{ message }}

适用场景：基本类型数据（数字、字符串、布尔值）
特点：需通过.value访问和修改

reactive() - 对象/数组响应式

import { reactive } from 'vue' // 创建响应式对象 const user = reactive({ name: '张三', age: 25 }) const list = reactive() // 直接修改属性，无需.value user.name = '李四' list.push(4) // 模板中直接使用 // {{ user.name }} {{ list }}

适用场景：对象、数组等引用类型
特点：直接操作属性，无需.value

toRef() / toRefs() - 解构响应式对象

import { reactive, toRef, toRefs } from 'vue' const user = reactive({ name: 'Vue3', age: 5 }) // 单个属性转ref const nameRef = toRef(user, 'name') nameRef.value = 'Vue3 Pro' // user.name同步更新 // 所有属性转ref const { name, age } = toRefs(user) name.value = 'Vue3 Expert' // user.name更新

解决痛点：解构reactive对象后失去响应式的问题

2. 模板语法

Vue3模板语法基本兼容Vue2，但新增了实用特性：

基本插值

<template> <div> <h1>{{ title }}</h1> <p>计数：{{ count }}</p> <p>计算：{{ 2 + 2 }}</p> </div> </template>

指令系统

v-bind：动态绑定属性

<img :src="imageUrl" :class="{ active: isActive }">

v-if/v-show：条件渲染

<div v-if="showContent">显示内容</div> <div v-show="isVisible">显示内容</div>

v-for：列表渲染

<ul> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul>

v-on：事件绑定

<button @click="increment">增加</button>

v-model：双向绑定
```
<input v-model="searchQuery">
```
v-html：渲染原始HTML
```
<div v-html="htmlContent"></div>
```
v-memo：缓存模板片段（Vue3新增）
```
<div v-memo="[value]">内容</div>
```

多根节点支持

<template> <h1>Vue3</h1> <p>支持多根节点，无需包裹</p> </template>

优势：减少DOM层级，优化渲染性能

3. 生命周期钩子

Vue3的Composition API提供了与Options API对应的生命周期函数：

import { onMounted, onUpdated, onUnmounted } from 'vue' onMounted(() => { console.log('组件已挂载') }) onUpdated(() => { console.log('组件已更新') }) onUnmounted(() => { console.log('组件已卸载') })

关键变化：从created/mounted等选项变为onCreated/onMounted等函数

4. 组件通信方式

Vue3提供了多种组件通信方案，按场景选择：

父子直连（props + $emit）

// 父组件 <ChildComponent :msg="parentMsg" @update="handleUpdate" /> // 子组件 const props = defineProps(['msg']) const emit = defineEmits(['update']) emit('update', newValue)

祖孙注入（provide/inject）

// 祖先组件 provide('theme', 'dark') // 孙子组件 const theme = inject('theme')

事件总线（EventBus）

// 创建 export const EventBus = new Vue() // 发送 EventBus.$emit('user-login', userInfo) // 接收 EventBus.$on('user-login', cb)

状态管理（Vuex/Pinia）
- 适合复杂应用的状态集中管理

三、Vue3 vs Vue2 关键差异

关注点	Vue2（Options API）	Vue3（Composition API）
响应式原理	Object.defineProperty	Proxy
响应式局限	无法监听数组/对象新增属性	完美支持
代码组织方式	按选项组织（data、methods等）	按功能组织（组合函数）
逻辑复用	依赖mixins，易冲突	组合函数，无命名冲突
TypeScript支持	支持差	原生支持
SSR性能	一般	优化