组合式函数
利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。对应 Vue2 的 mixin，但是更优化
作用：抽离封装状态逻辑，进行复用
规范：
- 命名：use 开头，驼峰命名法，如
useFetch - 入参：兼容传入 ref 和不传入 ref 的情况：
const value = unref( para )或者const value = toValue( para )（3.3+） - 返回值：始终返回一个包含多个 ref 的普通的非响应式对象：
return { x: refA, y: refB } - 组合式函数只能在
<script setup>或setup()钩子中调用，也只能被同步地调用
插件
插件通常用来为 Vue 添加全局功能
app.use(myPlugin, {
/* 可选的选项 */
})一般来说，插件发挥作用的方式有：
- 通过
app.component()和app.directive()注册一到多个全局组件或自定义指令 - 通过
app.provide()使一个资源可被注入进整个应用 - 向
app.config.globalProperties中添加一些全局实例属性或方法
自定义指令
除了内置指令外，还可以编写自定义指令，用来复用涉及普通元素的底层 DOM 访问的逻辑
使用时机：只有当所需功能只能通过直接的 DOM 操作来实现时，才应该使用自定义指令
局部注册：
任何以 v 开头的驼峰式命名的变量都可以被用作一个自定义指令
<script setup>
// 在模板中启用 v-focus
const vFocus = {
mounted: (el) => el.focus()
}
</script>
<template>
<input v-focus />
</template>全局注册：
在所有组件中都可用
app.directive('focus', {
/* ... */
})Warning
不推荐在组件上使用自定义指令。当组件具有多个根节点时可能会出现预期外的行为
渲染函数 & JSX
Vue 提供了一个 h() 函数用于创建 vnodes：
import { h } from 'vue'
const vnode = h(
'div', // type
{ id: 'foo', class: 'bar' }, // props
[
/* children */
]
)h 函数虽然灵活但是写起来复杂，所有可以使用 JSX 语法