Mosu | Mosuzi的博客
·
从 Vue2 到 Vue3（二）：语法
💡
原文中文，约7100字，阅读约需17分钟。
📝
内容提要
Vue3 引入了组合式 API，允许使用函数声明组件，提升逻辑复用和代码组织。开发者可以通过 `defineProps`、`ref` 和 `computed` 等方法灵活管理状态和生命周期。此外，Vue3 支持多重 `v-model` 和更好的类型推导，推荐使用 Pinia 作为状态管理工具。
🎯
关键要点
- Vue3 引入组合式 API，使用函数声明组件，提升逻辑复用和代码组织。
- 组合式 API 包含响应式 API、生命周期钩子和依赖注入等功能。
- 使用 defineProps 方法定义组件 props，支持更灵活的类型推导。
- Vue3 支持多重 v-model，允许通过名字指定多个绑定值。
- 推荐使用 Pinia 作为状态管理工具，替代 Vuex。
- 生命周期钩子需要显式引入，setup 函数在 beforeCreate 前执行。
- 在组合式 API 中，顶层的 ref 属性会被解包，需注意变量定义顺序。
❓
延伸问答
Vue3 的组合式 API 有哪些主要特性？
Vue3 的组合式 API 包含响应式 API、生命周期钩子和依赖注入等功能，允许使用函数声明组件，提升逻辑复用和代码组织。
如何在 Vue3 中定义组件的 props？
在 Vue3 中，可以使用 defineProps 方法定义组件的 props，支持更灵活的类型推导和默认值设置。
Vue3 中的 v-model 有什么变化？
Vue3 支持多重 v-model，允许通过名字指定多个绑定值，默认名字为 modelValue。
为什么推荐使用 Pinia 作为状态管理工具？
Pinia 被推荐作为状态管理工具，因为它比 Vuex 更加简洁和高效，适合 Vue3 的组合式 API。
Vue3 的生命周期钩子如何使用？
在 Vue3 中，生命周期钩子需要显式引入，例如使用 import { onMounted } from 'vue'，并在 setup 函数中使用。
组合式 API 如何提升代码组织？
组合式 API 通过函数声明组件，避免了 mixins 带来的隐形耦合，使逻辑复用和代码组织更加灵活和清晰。
➡️
