vue3的常用 Composition API有哪些?

Vue 3 引入的 Composition API 是一个用于组织逻辑的强大工具,它使得代码更加模块化和可复用。以下是一些 Vue 3 中常用的 Composition API:

  1. setup() 函数

    • setup() 是一个在组件创建时执行的函数,它是 Composition API 的入口点。在这个函数中,你可以定义组件的状态、响应式引用、计算属性以及方法。
  2. ref

    • ref 用于创建一个响应式的引用,它返回一个对象,其中包含 .value 属性。当 .value 被修改时,其引用的值也会被追踪并触发组件更新。
  3. reactive

    • reactive 用于创建一个响应式的对象。它会返回一个代理(Proxy)对象,其所有属性的更改都会被追踪。
  4. computed

    • computed 用于定义计算属性。它返回一个响应式引用,其 .value 会在其依赖的响应式源变化时自动重新计算。
  5. watch

    • watch 允许你观察和响应 Vue 实例上的数据变动。它可以是响应式引用、响应式对象或函数。当监听的数据变化时,会执行提供的回调函数。
  6. watchEffect

    • watchEffect 是一个立即执行的函数,它会自动收集依赖并在其依赖的响应式源变化时重新执行。
  7. provide / inject

    • provideinject 用于实现跨组件的属性注入,允许一个祖先组件向其所有后代注入一个依赖,而不论组件层次。
  8. 生命周期钩子

    • Vue 3 中的生命周期钩子可以通过 onBeforeMountonMountedonBeforeUpdateonUpdatedonBeforeUnmountonUnmounted 访问。
  9. onBeforeUnmount

    • 这是 Vue 3 中新增的生命周期钩子,用于在组件卸载之前执行清理逻辑。
  10. Teleport

    • Teleport 是一个新的组件,它允许你将内容移动到 DOM 中的另一个位置。
  11. Suspense

    • Suspense 是一个组件,它允许在异步组件加载过程中显示一些回退内容。
相关推荐
咩咩啃树皮8 小时前
第40篇:Vue3组件化开发精讲——组件拆分、复用、父子通信、工程化架构
java·前端·架构
阳光是sunny8 小时前
LangGraph中的Reducer是什么
前端·人工智能·后端
触底反弹8 小时前
一文搞懂 Tailwind CSS 弹性布局:从原理到实战
前端·css·html
阳光是sunny8 小时前
从链到图:LangGraph 入门基础全解析
前端·人工智能·后端
To_OC9 小时前
LC 42 接雨水:暴力超时卡半天?前后缀数组一用就通了
javascript·算法·leetcode
小林ixn9 小时前
从 ??= 到 onKeyDown:一个 React 组件的“自我修养”
前端·javascript·react.js
REDcker9 小时前
显示分辨率标准对照详解
前端·网络·分辨率·显示·屏幕
এ慕ོ冬℘゜10 小时前
前端实战:jQuery 多条件联合搜索(标题模糊查询 + 日历时间段筛选)
前端·javascript·jquery
武子康10 小时前
Search Console Platform Properties 扩大 SEO 资产边界:从 Page Ranking 到 Topic Coverage(5 类误读边界 + 3 表数据层设计)
前端·人工智能·后端
随心点儿10 小时前
js postMessage 实现跨域发送消息-应用示例
javascript·ecmascript·postmessage