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

<Meta title='@dxtmisha/vi/functional/# Thuộc Tính Tính Toán Nâng Cao'/>

# Thuộc Tính Tính Toán Nâng Cao (Custom Computed)

Thư viện cung cấp ba lớp bọc (wrapper) chuyên biệt nâng cấp lên từ thuộc tính `computed` truyền thống của Vue 3. Chúng giải trừ các bài toán cấu trúc kiến trúc hóc búa: xử lý bất đồng bộ, thoát ly khỏi vòng đời component, và phản xạ dữ liệu tức thời theo đa ngôn ngữ.

## 1. Tính Toán Bất Đồng Bộ (`computedAsync`)

Thuộc tính `computed` của Vue vốn bị khóa ở đồng bộ chặt chẽ (synchronous). `computedAsync` xoá bỏ rào cản đó, cho phép bạn thoải mái nhúng logic `async/await` vào trong getter.

**Đặc tính:**
- Tính năng lười (chỉ thực sự sạc dữ liệu khi được truy vấn lần đầu tiên).
- Tự động nạp mạng hoặc tính lại khi các dependencies bên trong thay đổi (được dẫn dắt bởi `watchEffect` ngầm).
- Bạn có quyền lọc và quăng bỏ những kết quả không mong muốn thông qua tham số mồi `ignore` để chặn vòng lặp UI chớp nháy vô ích.

**Ví dụ:**
```typescript
import { ref } from 'vue'
import { computedAsync } from '@dxtmisha/functional'

const userId = ref(1)

const userData = computedAsync(async () => {
  // Sẽ tự nã lệnh fetch đi lại mỗi lần userId.value đổi số
  const response = await fetch(`/api/users/${userId.value}`)
  return await response.json()
})
```

## 2. Bộ Cất Giữ Bộ Nhớ Vĩnh Cửu (`computedEternity`)

Các biểu thức tính toán thông thường sẽ thoi thóp và chết đi nếu linh hồn component chứa chúng bị xóa sổ. Trái lại, `computedEternity` thâu tóm biểu thức bỏ vào trọn vẹn trong một khoảng không gian biệt lập toàn cục `effectScope`.

**Đặc tính:**
- Sinh ra cho loại dữ liệu siêu nặng. Bạn chỉ tốn công tải về đúng 1 lần khi người dùng đáp đến một trang, rồi từ đó chôn sâu lưu giữ chúng mà vẫn đảm bảo tính react cực chuẩn xác dẫu họ có thao tác lướt đi trang khác.
- Giao thức chực chờ: Đè nén tới khi có bất cứ linh kiện nào thật sự chèn tay vào gọi xin dữ liệu.
- Chế độ "Sinh Tử cùng Ứng Dụng" — Sống trọn đời trừ khi ứng dụng sập hầm.
- Thuộc tính Read-only cứng ngắc.

**Ví dụ:**
```typescript
import { computedEternity } from '@dxtmisha/functional'

// Theo sát bộ cấu hình hạng nặng này trong RAM tới tận lúc user đóng tab trình duyệt
const heavyGlobalConfig = computedEternity(async () => {
  return await fetch('/api/heavy-config').then(res => res.json())
})
```

## 3. Phản Xạ Đa Ngôn Ngữ Chớp Nhoáng (`computedByLanguage`)

Một cấu trúc đường cú pháp (syntax sugar) lộng lẫy để bắt thóp các dữ liệu cần phải ngay lập tức chuyển ngữ hễ bộ tự điển ứng dụng hoặc thẻ thay đổi ngôn ngữ.

**Đặc tính:**
- Gắn kết số phận mạn hệ mật thiết với cầu nối `GeoRef` nội hàm lõi hệ thống.
- Ban cho quyền lực khống chế các ngoại lệ điều kiện (`conditions`) ngặt nghèo trước lúc cất công tra ngữ.
- Tính năng dự phòng lấp khoảng trống (`getterNone`) tự tuôn ra kết quả rào chắn trong màn lưới hễ dữ liệu đích vắng mặt hoặc có trục trặc ngoài dự đoán.

**Ví dụ:**
```typescript
import { computedByLanguage } from '@dxtmisha/functional'

const pageTitle = computedByLanguage(
  // Getter chân ái (khi thỏi điều kiện thoả màn)
  () => dictionary.value.title,
  
  // Dữ liệu fallback chắp nối (xử lý khi dữ liệu null/undefined)
  () => 'Default Title',
  
  // Khối băng rào bảo vệ precondition (không ép buộc)
  () => isReady.value === true
)
```
