---
title: "useSigmaGraph"
description: "把 graphology 的变更桥接成 Vue 的响应式信号，提供 version、order、size 与变更回调。"
canonical_url: "https://sigma.mhaibaraai.cn/docs/composables/use-sigma-graph"
---
# useSigmaGraph

> 把 graphology 的变更桥接成 Vue 的响应式信号，提供 version、order、size 与变更回调。

## 用法

graphology 的 `Graph` 是纯可变对象，Vue 的响应式系统抓不到它的变更，依赖图状态的 UI（图例、统计、检索结果）不会自动更新。这个 composable 订阅图事件并递增 `version`，让下游用常规的 `computed` / `watch` 就能响应：

```vue [UseSigmaGraphExample.vue]
<script setup lang="ts">
const { data } = await useFetch('/api/small.json')
</script>

<template>
  <SigmaGraph :data="data">
    <UseSigmaGraphPanel />
  </SigmaGraph>
</template>
```

```vue [UseSigmaGraphPanel.vue]
<script setup lang="ts">
const { graph, version, order, size, onGraphUpdate } = useSigmaGraph()

const hubs = computed(() => {
  void version.value // 读一次建立依赖，否则计算属性永远不会重算
  return graph.value.nodes().filter(key => graph.value.degree(key) > 5)
})
</script>
```

## API

### useSigmaGraph()

`useSigmaGraph(source?: MaybeRefOrGetter<Graph>): UseSigmaGraphReturn`

#### Parameters

**source** (`MaybeRefOrGetter<Graph>`): 要桥接的 graphology 实例。省略则取当前 SigmaGraph 上下文中的图，此时必须在其子树内调用。

#### Returns

**graph** (`Readonly<Ref<Graph>>`): 原生 graphology 实例。

**version** (`Readonly<Ref<number>>`): 图每次变更后递增。用于让计算属性重算，或作为缓存键。初始值为 1。

**order** (`Readonly<Ref<number>>`): 节点数。

**size** (`Readonly<Ref<number>>`): 边数。

**onGraphUpdate()** (`(callback: () => void) => void`): 图变更时触发的回调，随作用域自动注销。返回 void，不是退订函数。

类型从根出口取：

```ts
import type { UseSigmaGraphReturn } from '@movk/sigma'
```


## Sitemap

See the full [sitemap](https://sigma.mhaibaraai.cn/sitemap.md) for all pages.