Vue 3 的函数知识点

Vue 3 的函数知识点主要围绕‌组合式 API‌展开，它彻底改变了 Vue 的开发范式，让代码组织更灵活、逻辑复用更高效。

🎯 核心响应式函数

‌ref()‌ - 用于创建基本类型的响应式数据‌

• 适用于字符串、数字、布尔值等

• 访问和修改值需要通过 .value 属性

• 在模板中自动解包，无需 .value

‌reactive()‌ - 用于创建对象类型的响应式数据‌

• 适用于对象、数组等复杂数据结构

• 直接操作属性即可触发更新

• 不可直接解构，否则会失去响应性

🔧 计算与监听函数

‌computed()‌ - 创建计算属性‌

• 基于已有响应式值生成派生值

• 具有缓存特性，依赖不变时不重新计算

• 支持 getter/setter 两种形式

‌watch()‌ - 监听数据变化

• 监听响应式数据的变化并执行副作用

• 支持深度监听和立即执行

📦 组件通信函数

‌defineProps()‌ - 定义组件属性

• 声明和验证组件的 props

• 提供类型安全和可控的数据传递

‌defineEmits()‌ - 定义组件事件

• 声明组件可以发出的自定义事件

• 实现子组件向父组件的通信

‌defineExpose()‌ - 暴露组件方法

• 定义组件暴露给父组件的方法或属性

• 提供更高级的组件封装能力

⚡ 生命周期函数

组合式 API 提供了对应的生命周期钩子函数‌：

• onMounted() - 组件挂载后

• onUpdated() - 组件更新后

• onUnmounted() - 组件卸载后

• 函数形式调用，无需 this 指针‌

🎪 组合式函数 (Composables)

组合式函数是利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数‌：

• 按照惯例以 "use" 开头命名

• 可以管理状态和挂靠组件生命周期

• 通过返回值暴露所管理的状态

💡 学习建议

‌立即实践‌：从简单的计数器组件开始，尝试用 ref() 和 reactive() 创建响应式数据，体验组合式 API 的编码风格。

这些函数共同构成了 Vue 3 强大的组合式 API 体系，让开发者能够更自由地组织代码逻辑，提高项目的可维护性和复用性。