# @r-utils/vue2

仅用于 Vue2 项目的工具包。

## 适用范围

- 适用于 Vue2 项目。
- 适用于需要根据页面可见性触发组件 `onShow` / `onHide` 的场景。

## 不适用范围

- 不适用于 Vue3 项目。
- 如果是 uni-app 专用能力，建议优先使用 `@r-utils/uni-app`。

## 安装

```bash
pnpm add @r-utils/vue2
```

## 导入方式

### 推荐：根入口导入

大多数场景推荐从根入口导入，路径简单，使用心智负担更低。

```ts
import Vue from "vue";
import { VisibilityPlugin } from "@r-utils/vue2";

Vue.use(VisibilityPlugin);
```

也可以使用默认导出：

```ts
import Vue from "vue";
import VisibilityPlugin from "@r-utils/vue2";

Vue.use(VisibilityPlugin);
```

### 兼容：子路径导入

如果你希望模块边界更清晰，也可以使用子路径导入。两种方式都支持。

```ts
import Vue from "vue";
import VisibilityPlugin from "@r-utils/vue2/plugins/visibility";

Vue.use(VisibilityPlugin);
```

## 当前能力

| 子路径 | 说明 |
| --- | --- |
| `@r-utils/vue2/plugins/visibility` | 基于页面可见性变更触发 `onShow` / `onHide` |

## 使用示例

```ts
export default {
  onShow() {
    console.log("页面显示");
  },
  onHide() {
    console.log("页面隐藏");
  },
};
```

## 注意事项

- 推荐优先使用根入口导入；如果需要更精确的模块边界，也可以使用子路径导入。
- 本包依赖 Vue2，请确保业务项目已安装兼容版本的 `vue`。