一、创建应用（createApp）
Vue3 中通过 createApp 函数创建应用实例，替代了 Vue2 的 new Vue()。
知识点：
createApp(App)创建应用实例，mount('#app')挂载到 DOM。- 应用实例可链式调用配置（如全局组件、指令等）。
例子：
<!-- index.html -->
<div id="app"></div>
<!-- main.js -->
import { createApp } from 'vue'
import App from './App.vue'
// 创建应用并挂载
createApp(App).mount('#app')二、Composition API（核心）
Vue3 新增的 Composition API 允许按逻辑功能组织代码（而非 Vue2 的 Options API 按选项分类），核心包括 setup、ref、reactive 等。
1. setup 函数（或 <script setup> 语法糖）
知识点：
- 组件的入口点，用于编写组合式逻辑。
<script setup>是简化写法（推荐），变量 / 函数无需显式返回即可在模板中使用。
例子 （<script setup> 语法糖）：
<template>
<p>计数：{{ count }}</p>
<button @click="add">+1</button>
</template>
<script setup>
// 直接定义变量和函数，无需 return
const count = 0 // 注意：普通变量不响应式，需用 ref/reactive
const add = () => { count++ } // 这里仅演示语法，实际需用响应式API
</script>2. 响应式 API：ref 和 reactive
知识点：
ref：用于包装基本类型 （Number、String 等）为响应式数据，通过.value访问 / 修改值。reactive：用于包装对象 / 数组为响应式数据，直接通过属性访问 / 修改。
例子：
<template>
<div>
<p>年龄：{{ age }}</p> <!-- 模板中无需 .value -->
<p>姓名：{{ user.name }}</p>
<button @click="change">修改</button>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
// 基本类型用 ref
const age = ref(18) // 响应式包装
// 对象用 reactive
const user = reactive({ name: '张三', age: 18 })
const change = () => {
age.value = 20 // 脚本中需 .value
user.name = '李四' // 直接修改属性
}
</script>3. 计算属性（computed）
知识点：
- 基于响应式数据生成衍生数据，自动缓存，依赖变化时重新计算。
例子：
<template>
<p>原价：{{ price }}</p>
<p>折扣价：{{ discountedPrice }}</p>
</template>
<script setup>
import { ref, computed } from 'vue'
const price = ref(100)
// 计算属性：9折后的价格
const discountedPrice = computed(() => {
return price.value * 0.9
})
</script>4. 监听器（watch 和 watchEffect）
知识点：
watch：显式指定监听的数据源（ref/reactive/ 计算属性），触发时执行回调。watchEffect：自动追踪依赖，依赖变化时执行回调（无需显式指定监听源）。
例子：
<template>
<input v-model="name" placeholder="输入姓名">
</template>
<script setup>
import { ref, watch, watchEffect } from 'vue'
const name = ref('')
// watch：监听 name 变化
watch(name, (newVal, oldVal) => {
console.log(`姓名从 ${oldVal} 变成了 ${newVal}`)
})
// watchEffect：自动追踪 name，变化时执行
watchEffect(() => {
console.log(`当前姓名：${name.value}`) // 用到了 name，自动监听
})
</script>三、生命周期钩子
Vue3 中生命周期钩子通过组合式 API 函数调用（替代 Vue2 的 Options 中的 mounted 等），需从 vue 导入。
常用钩子及例子：
| 钩子函数 | 说明 | Vue2 对应选项 |
|---|---|---|
onMounted |
组件挂载后执行 | mounted |
onUpdated |
组件更新后执行 | updated |
onUnmounted |
组件卸载后执行 | beforeDestroy |
例子：
<template>
<p>{{ message }}</p>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
const message = ref('')
// 组件挂载后获取数据
onMounted(() => {
message.value = '组件挂载完成！'
console.log('组件已挂载')
})
// 组件卸载时清理
onUnmounted(() => {
console.log('组件已卸载，清理资源')
})
</script>四、组件通信
1. 父传子（props）
知识点：
- 父组件通过属性传递数据，子组件通过
defineProps声明接收（<script setup>中直接使用）。
例子：
<!-- 子组件 Child.vue -->
<template>
<p>父组件传来的标题：{{ title }}</p>
</template>
<script setup>
// 声明接收的 props（可指定类型）
const props = defineProps({
title: {
type: String,
required: true
}
})
</script>
<!-- 父组件 Parent.vue -->
<template>
<Child title="我是父组件的标题" />
</template>
<script setup>
import Child from './Child.vue'
</script>2. 子传父（emits）
知识点：
- 子组件通过
emit触发事件，父组件通过v-on监听，子组件需用defineEmits声明事件。
例子：
<!-- 子组件 Child.vue -->
<template>
<button @click="sendMsg">向父组件传值</button>
</template>
<script setup>
// 声明可触发的事件
const emit = defineEmits(['send'])
const sendMsg = () => {
emit('send', '我是子组件的数据') // 触发事件并传参
}
</script>
<!-- 父组件 Parent.vue -->
<template>
<Child @send="handleReceive" />
</template>
<script setup>
const handleReceive = (msg) => {
console.log('收到子组件消息：', msg) // 输出：我是子组件的数据
}
</script>