Vue 3 的函数知识点

admin5天前it知识54

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


标签: 分享IT知识

相关文章

职场人如何写季度总结

作为职场人,写季度总结是一个展示自己工作成果和总结经验教训的机会。以下是一些撰写季度总结的建议:明确总结的目的:季度总结的目的是为了向上级领导汇报本季度的工作进展、成果和教训,以及下季度的工作计划。因...

湖边

湖边,一片静谧的美好。清晨的阳光洒在湖面上,波光粼粼,让人心旷神怡。湖上的荷叶轻轻摇曳,荷花争奇斗艳,仿佛在向人们展示着它们的美丽。湖边的柳树依依,芦苇丛生,形成了一道道天然的屏障,让人感到一种隐秘的...

夏天的台风

夏天,是一个充满活力和生命力的季节,但同时也伴随着台风的出现。每年的这个时期,台风如同一股强大的自然力量,给人们的生命和财产带来了一定的威胁。在台风的肆虐中,可以看到大自然的威力与无情。台风带来的强风...

拖延症重度患者怎样自救

对于拖延症的重度患者,自救的关键在于以下几点:识别并克服拖延的借口。拖延常常因为我们害怕、不确定、不想不舒服而找到各种借口。我们必须识破这些借口,并对自己说:“如果我拖延,后果将不堪设想。”制定清晰的...

敏捷开发

敏捷开发是一种以人为核心、迭代、循序渐进的开发方法。在敏捷开发中,软件项目的构建被切分成多个子项目,各个子项目的成果都经过测试,具备集成和可运行的特征。换言之,就是把一个大项目分为多个相互联系,但也可...

如何学习 javascript

学习JavaScript需要以下步骤:基础语法:学习JavaScript的基础语法,包括变量、数据类型、函数、循环、条件语句等。DOM 操作:学习如何操作 DOM,例如获取和修改元素、添加和删除事件处...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。