import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/vi/functional/Composables/useLazyItemByMarginRef - Tải lười theo lề'/>

# `useLazyItemByMarginRef`

Composable để theo dõi sự xuất hiện của một phần tử trên màn hình bằng cách sử dụng `IntersectionObserver`. Được tối ưu hóa bằng cách sử dụng một thực thể quan sát duy nhất cho các giá trị `rootMargin` giống nhau.

**Tham số:**
- `element: RefType<HTMLElement | undefined>` — tham chiếu phản ứng đến phần tử HTML được theo dõi.
- `rootMargin: string` — lề cho `IntersectionObserver` (ví dụ: `'100px 0px'`).

**Trả về:**
- `lazyItemStatus: ShallowRef<boolean>` — trạng thái hiển thị của phần tử (liệu nó có cắt vùng quan sát dựa trên `rootMargin` hay không).
- `lazyItem: LazyItem | undefined` — (getter) đối tượng chứa thông tin theo dõi chi tiết (tỷ lệ, mục nhập, v.v.).

## Ví dụ sử dụng

```typescript
import { ref } from 'vue'
import { useLazyItemByMarginRef } from '@dxtmisha/functional'

const element = ref<HTMLElement>()
const { lazyItemStatus } = useLazyItemByMarginRef(element, '128px 0px')

// lazyItemStatus.value sẽ trở thành true khi phần tử nằm trong khoảng 128px so với khung nhìn (viewport)
```
