Vue3的简单学习

一、创建应用（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  // 脚本中需 .valueuser.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>