useEntityChange()
function useEntityChange<T>(entity, options?): EntityChangeResource<T>;
Defined in: rxdb-vue/src/use-entity-change.ts:100
把实体的 patch 流桥接到 Vue 响应式系统,让原地修改能实时反映到视图。
Type Parameters
| Type Parameter | Description |
|---|---|
T extends unknown | 实体实例类型 |
Parameters
| Parameter | Type | Description |
|---|---|---|
entity | MaybeRefOrGetter<T | undefined> | 要监听的实体实例;可为常量、Ref 或 getter。为 undefined 时不建立订阅 |
options | EntityChangeOptions | 见 EntityChangeOptions |
Returns
Throws
RxDBError 传入的不是已挂载的 RxDB 实体实例时,由 getEntityStatus 抛出
Example
<script lang="ts" setup>
import { useEntityChange } from '@aiao/rxdb-vue';
const props = defineProps<{ todo: Todo }>();
// 输入停止 200ms 后才重渲染
const live = useEntityChange(() => props.todo, { debounceTime: 200 });
</script>
<template>
<div>{{ live.value?.title }}</div>
</template>
Remarks
实体是原地可变的类实例,Vue 的响应式系统看不到它们的字段变化。编辑中的实体需要
在多处实时预览时,用这个 hook 把 patches$ 接进渲染依赖。
patches$ 带 shareReplay(1):订阅时如果该实体此前已有 patch,会立即收到一次
重放,因此 revision 可能在建立订阅后马上变成 1。
订阅随作用域销毁自动清理;实体或时间窗变化时先退订旧订阅再重建。
三端等价实现:Angular 的 RxDBEntityChangeDirective(OnPush 视图用 markForCheck)、
React 的 useEntityChange(快照 + revision)。时间窗判定共用
@aiao/utils 的 withTimeWindows,三端语义完全一致。