比如从import { reactive, computed } from 'vue'可以看到,我们常用的API可以有:reactive、computed,那么,你知道vue模块到底有多少API?事实上它的API还真的不少,高达113个。
你应当首先关注单文件组件开发下如何使用这些API。
https://v3.cn.vuejs.org/guide/composition-api-setup.html
https://composition-api.vuejs.org/zh/#api-介绍
| 方法/属性 | 一句话介绍 |
|---|---|
| BaseTransition | |
| Comment | |
| Fragment | |
| KeepAlive | |
| Static | |
| Suspense | |
| Teleport | 传送到页面其他位置 |
| Text | |
| Transition | |
| TransitionGroup | |
| callWithAsyncErrorHandling | |
| callWithErrorHandling | |
| camelize | |
| capitalize | |
| cloneVNode | |
| compile$1 as compile | |
| computed$1 as computed | 计算属性 |
| createApp | 调用 createApp 返回一个应用实例 |
| createBlock | |
| createCommentVNode | |
| createHydrationRenderer | |
| createRenderer | |
| createSSRApp | |
| createSlots | |
| createStaticVNode | |
| createTextVNode | |
| createVNode | |
| customRef | 创建自定义的 ref |
| defineAsyncComponent | |
| defineComponent | 专用于ts的export default defineComponent({}) |
| defineEmit | |
| defineProps | 接收props |
| devtools | |
| getCurrentInstance | 获取当前实例 |
| getTransitionRawChildren | |
| h | 返回一个”虚拟节点“,通常缩写为 VNode |
| handleError | |
| hydrate | |
| initCustomFormatter | |
| inject | 接收子孙组件的数据 |
| isProxy | 检查对象是否是由 reactive 或 readonly 创建的 proxy。 |
| isReactive | 检查对象是否是 reactive创建的响应式 proxy。 |
| isReadonly | 检查对象是否是由readonly创建的只读 proxy。 |
| isRef | 检查一个对象是否是Ref对象。 |
| isVNode | |
| markRaw | 标记一个对象,使其永远不能转换为 proxy。 |
| mergeProps | |
| nextTick | 同Vue 2 |
| onActivated | 生命周期钩子 |
| onBeforeMount | 生命周期钩子 |
| onBeforeUnmount | 生命周期钩子 |
| onBeforeUpdate | 生命周期钩子 |
| onDeactivated | 生命周期钩子 |
| onErrorCaptured | 捕捉子孙组件的错误 |
| onMounted | 生命周期钩子 |
| onRenderTracked | |
| onRenderTriggered | |
| onUnmounted | 生命周期钩子 |
| onUpdated | 生命周期钩子 |
| openBlock | |
| popScopeId | |
| provide | 向子孙组件提供数据 |
| proxyRefs | |
| pushScopeId | |
| queuePostFlushCb | |
| reactive | 等价于 2.x 中的 Vue.observable() API |
| readonly | 只读 proxy |
| ref | 接受一个内部值并返回一个响应式且可变的 ref 对象 |
| registerRuntimeCompiler | |
| render | |
| renderList | |
| renderSlot | |
| resolveComponent | |
| resolveDirective | |
| resolveDynamicComponent | |
| resolveTransitionHooks | |
| setBlockTracking | |
| setDevtoolsHook | |
| setTransitionHooks | |
| shallowReactive | 创建一个表层响应式 |
| shallowReadonly | 创建一个只读响应式 |
| shallowRef | 创建一个表层响应式ref |
| ssrContextKey | |
| ssrUtils | |
| toDisplayString | |
| toHandlerKey | |
| toHandlers | |
| toRaw | 返回 reactive 或 readonly proxy 的原始对象 |
| toRef | 只操作一个对象的属性值 |
| toRefs | toRef的批量版 |
| transformVNodeArgs | |
| triggerRef | 手动执行与 shallowRef 关联的任何效果 |
| unref | ref的反操作,将Ref对象还原成基础数据 |
| useContext | 在setup函数中使用,获取上下文 |
| useCssModule | |
| useCssVars | |
| useSSRContext | |
| useTransitionState | |
| vModelCheckbox | |
| vModelDynamic | |
| vModelRadio | |
| vModelSelect | |
| vModelText | |
| vShow | |
| version | |
| warn | |
| watch | 监听器 |
| watchEffect | 监听器 |
| withCtx | |
| withDirectives | |
| withKeys | |
| withModifiers | |
| withScopeId |