Vue3 封装自定义指令与 Hooks，并发布 npm 包
在开发响应式布局时，我们经常需要监听 DOM 元素的宽高变化。虽然 ResizeObserver API 已经提供了原生支持，但将其封装为可复用的 Vue 插件，同时支持 Hooks 和自定义指令两种用法，能极大提升开发效率。
本文将带你从零开始，完成一个支持 TypeScript 的 Vue3 工具库，并打包发布到 npm。
项目初始化
首先创建项目目录并初始化依赖。推荐使用 pnpm 管理包。
mkdir v-resize-xm
cd v-resize-xm
pnpm init
接着配置 TypeScript 环境。全局安装 TypeScript 并生成配置文件：
npm install -g typescript
tsc --init
随后创建 Vite 配置文件及类型声明文件：
vite.config.ts
index.d.ts
安装开发依赖。注意这里只安装 vue 和 vite 作为 devDependencies，因为最终使用本插件的用户本地已具备这些环境：
pnpm install [email protected] [email protected] -D
核心逻辑实现
在 src/index.ts 中编写业务逻辑。我们需要利用 ResizeObserver 监听元素尺寸，并导出一个既可作为 Hook 使用，又可注册为 Vue 指令的对象。
import type { App } from 'vue';
// 侦听元素宽高的变化
export function useResize(el: HTMLElement, callback: (rect: DOMRectReadOnly) => void) {
const resize = new ResizeObserver((entries) => {
// entries 是数组，默认监听多个，取第一个即可
callback(entries[0].contentRect);
});
resize.observe(el);
}
// 定义插件结构
const install = () => {
app.(, {
() {
( binding. === ) {
(el, binding.);
}
},
});
};
useResize. = install;
useResize;
