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 体系,让开发者能够更自由地组织代码逻辑,提高项目的可维护性和复用性。
