跳到主要内容

useEntityChange()

function useEntityChange<T>(entity, options?): EntityChangeResource<T>;

Defined in: rxdb-vue/src/use-entity-change.ts:100

把实体的 patch 流桥接到 Vue 响应式系统,让原地修改能实时反映到视图。

Type Parameters​

Type ParameterDescription
T extends unknown实体实例类型

Parameters​

ParameterTypeDescription
entityMaybeRefOrGetter<T | undefined>要监听的实体实例;可为常量、Ref 或 getter。为 undefined 时不建立订阅
optionsEntityChangeOptions见 EntityChangeOptions

Returns​

EntityChangeResource<T>

见 EntityChangeResource

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,三端语义完全一致。