Vue 3 引入的 Composition API 是一个用于组织逻辑的强大工具,它使得代码更加模块化和可复用。以下是一些 Vue 3 中常用的 Composition API:
-
setup() 函数
setup()
是一个在组件创建时执行的函数,它是 Composition API 的入口点。在这个函数中,你可以定义组件的状态、响应式引用、计算属性以及方法。
-
ref
ref
用于创建一个响应式的引用,它返回一个对象,其中包含.value
属性。当.value
被修改时,其引用的值也会被追踪并触发组件更新。
-
reactive
reactive
用于创建一个响应式的对象。它会返回一个代理(Proxy)对象,其所有属性的更改都会被追踪。
-
computed
computed
用于定义计算属性。它返回一个响应式引用,其.value
会在其依赖的响应式源变化时自动重新计算。
-
watch
watch
允许你观察和响应 Vue 实例上的数据变动。它可以是响应式引用、响应式对象或函数。当监听的数据变化时,会执行提供的回调函数。
-
watchEffect
watchEffect
是一个立即执行的函数,它会自动收集依赖并在其依赖的响应式源变化时重新执行。
-
provide / inject
provide
和inject
用于实现跨组件的属性注入,允许一个祖先组件向其所有后代注入一个依赖,而不论组件层次。
-
生命周期钩子
- Vue 3 中的生命周期钩子可以通过
onBeforeMount
、onMounted
、onBeforeUpdate
、onUpdated
、onBeforeUnmount
和onUnmounted
访问。
- Vue 3 中的生命周期钩子可以通过
-
onBeforeUnmount
- 这是 Vue 3 中新增的生命周期钩子,用于在组件卸载之前执行清理逻辑。
-
Teleport
Teleport
是一个新的组件,它允许你将内容移动到 DOM 中的另一个位置。
-
Suspense
Suspense
是一个组件,它允许在异步组件加载过程中显示一些回退内容。