本文已参与掘金创作者训练营第三期「高产更文」赛道，详情查看：掘力计划｜创作者训练营第三期正在进行，「写」出个人影响力

本文为掘金技术社区首发，未经授权禁止转载！

前言

📚最近重新夯实Vue3，梳理的相关知识点和细节

🎉目前已撒花的：

• 第1部分：基础 ✔
• 第2部分：深入组件 ✔
• 第3部分：过渡和动画 ✔

本文关于Vue3中的组合API和复用性相关知识，我将相关内容整理成12张脑图，一来可以快速了解相关知识，二来方便以后查看！

🎁看完此部分你将会，对Vue的复用性有个全面和清晰的认识

本系列解决的痛点

1. 告别枯燥的文档；以图的形式，言简意赅的汇总所有Vue3.x的知识点

2. 会附原文件；并原文件会随Vue版本迭代而长期更新

具体内容如下👇

脑图

组合式API介绍

我们知道Vue3引入了composition API，但它有什么作用呢？很多人难以讲清楚！我用一句通俗的话来说：composition API其实时用于解决功能、数据和业务逻辑分散的问题，使项目更益于模块化开发以及后期维护

具体使用，可以查看如下的第二部分

setup函数

setup是一个可选配置项，也是composition API的入口，本质是一个函数，改函数可以接收props和context作为参数，其中context是一个对象，它暴露组件的三个属性：

• attrs
• slots
• emit

需要注意：执行setup时，组件实例尚未被创建

生命周期钩子

Vue在setup中也注册一些生命周期钩子函数，这些钩子函数与选项式API的名称相似，但前缀为 on

Provide和Inject

组合式API中也可以使用provide/inject,但两者都只能在当前活动实例的setup()期间调用

模板引用 template-refs

可以使用ref，获得模板内的元素或组件实例的引用。需要注意，模板引用只会在初始渲染之后获得赋值

Mixin

Mixin一种用于分发组件中可复用的功能的技术，本质是一个对象，一个mixin对象可以包含任意组件选项

组件可通过配置选项mixins使用mixin对象，当mixin对象被使用时，所有mixin对象中的选项都会以恰当的方式，混入到组件本身的选项中

也可以为Vue应用程序全局应用mixin，通过应用实例身上的mixin()方法

自定义指令

vue中可以通过应用实例身上的directive()注册一个全局自定义指令，如果想注册局部指令，可在组件中配置directives选项；但在使用指令时，记得以“v-”开头

Teleport组件

Teleport也被称为传送门组件，用于提供一种简洁的方式，指定其里面内容的父元素

Vue插件

插件是实现扩展的重要途径，我们可以根据自己的情况编写一个插件，也可以通过应用程序实例app身上的use方法使用插件。注意：多次调用use()只会安装一次该插件

附件

我会将以上原图及源文件已上传github：github.com/jCodeLife/m…

目的：

• 一来方便大家批量下载
• 二来可以根据自己的想法和习惯进行修改

END

以上就是Vue中复用性相关的所有内容

如有问题，欢迎留言告知，感谢~