JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2026-06-27 10:38:28 +08:00
Code Issues Projects Releases Wiki Activity
tmagic-editor/docs/runtime-api/data-source/observedData.html
github-actions[bot] 584da608cd Deploy to GitHub pages
2026-06-25 10:23:46 +00:00

108 lines
57 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>观察者数据类 | tmagic-editor</title>
<meta name="description" content="页面可视化平台">
<meta name="generator" content="VitePress v2.0.0-alpha.17">
<link rel="preload stylesheet" href="/tmagic-editor/docs/assets/style.BuEOY8n1.css" as="style">
<link rel="preload stylesheet" href="/tmagic-editor/docs/vp-icons.css" as="style">
<script type="module" src="/tmagic-editor/docs/assets/app.DChgYJ8f.js"></script>
<link rel="preload" href="/tmagic-editor/docs/assets/inter-roman-latin.Cy4MYw_J.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/chunks/theme.DlXl19z9.js">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/chunks/framework.DRScawWW.js">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/runtime-api_data-source_observedData.md.CZE0bwLB.lean.js">
<meta name="theme-color" content="#646cff">
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
</head>
<body>
<div id="app"><div class="Layout" data-v-d84d18b9><!--[--><!--]--><!--[--><span tabindex="-1" data-v-4b64956f></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-4b64956f>Skip to content</a><!--]--><!----><header class="VPNav" data-v-d84d18b9 data-v-04cd9f45><div class="VPNavBar has-sidebar top" data-v-04cd9f45 data-v-98204f52><div class="wrapper" data-v-98204f52><div class="container" data-v-98204f52><div class="title" data-v-98204f52><div class="VPNavBarTitle has-sidebar" data-v-98204f52 data-v-a5e0ba12><a class="title" href="/tmagic-editor/docs/" data-v-a5e0ba12><!--[--><!--]--><!--[--><img class="VPImage logo" src="./favicon.png" alt data-v-afa82b87><!--]--><span data-v-a5e0ba12>tmagic-editor</span><!--[--><!--]--></a></div></div><div class="content" data-v-98204f52><div class="content-body" data-v-98204f52><!--[--><!--]--><div class="VPNavBarSearch search" data-v-98204f52 data-v-974eff7a><!--[--><button type="button" class="VPNavBarSearchButton" aria-label="Search" aria-keyshortcuts="/ control+k meta+k" data-v-974eff7a data-v-73422b9f><span class="vpi-search" aria-hidden="true" data-v-73422b9f></span><span class="text" data-v-73422b9f>Search</span><span class="keys" aria-hidden="true" data-v-73422b9f><kbd class="key-cmd" data-v-73422b9f>⌘</kbd><kbd class="key-ctrl" data-v-73422b9f>Ctrl</kbd><kbd data-v-73422b9f>K</kbd></span></button><!----><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-98204f52 data-v-b5e47e6a><span id="main-nav-aria-label" class="visually-hidden" data-v-b5e47e6a> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tmagic-editor/docs/guide/" tabindex="0" data-v-b5e47e6a data-v-e5c7d2e3><!--[--><span data-v-e5c7d2e3>文档</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tmagic-editor/docs/api/editor/props.html" tabindex="0" data-v-b5e47e6a data-v-e5c7d2e3><!--[--><span data-v-e5c7d2e3>Editor API</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/tmagic-editor/docs/runtime-api/core/app.html" tabindex="0" data-v-b5e47e6a data-v-e5c7d2e3><!--[--><span data-v-e5c7d2e3>Runtime API</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tmagic-editor/docs/form-config/fields/text.html" tabindex="0" data-v-b5e47e6a data-v-e5c7d2e3><!--[--><span data-v-e5c7d2e3>表单配置</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://github.com/Tencent/tmagic-editor/releases" target="_blank" rel="noreferrer" tabindex="0" data-v-b5e47e6a data-v-e5c7d2e3><!--[--><span data-v-e5c7d2e3>更新日志</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://tencent.github.io/tmagic-editor/playground/index.html" target="_blank" rel="noreferrer" tabindex="0" data-v-b5e47e6a data-v-e5c7d2e3><!--[--><span data-v-e5c7d2e3>Playground</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-98204f52 data-v-2f8c374a><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-2f8c374a data-v-769da6cc data-v-98daf1c8><span class="check" data-v-98daf1c8><span class="icon" data-v-98daf1c8><!--[--><span class="vpi-sun sun" data-v-769da6cc></span><span class="vpi-moon moon" data-v-769da6cc></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-98204f52 data-v-16712142 data-v-7b918527><!--[--><a class="VPSocialLink no-icon" href="https://github.com/Tencent/tmagic-editor" aria-label="github" target="_blank" rel="me noopener" data-v-7b918527 data-v-a672d564><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-98204f52 data-v-356d8703 data-v-41493e0d><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-41493e0d><span class="vpi-more-horizontal icon" data-v-41493e0d></span></button><div class="menu" data-v-41493e0d><div class="VPMenu" data-v-41493e0d data-v-bec84aa1><!----><!--[--><!--[--><!----><div class="group" data-v-356d8703><div class="item appearance" data-v-356d8703><p class="label" data-v-356d8703>Appearance</p><div class="appearance-action" data-v-356d8703><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-356d8703 data-v-769da6cc data-v-98daf1c8><span class="check" data-v-98daf1c8><span class="icon" data-v-98daf1c8><!--[--><span class="vpi-sun sun" data-v-769da6cc></span><span class="vpi-moon moon" data-v-769da6cc></span><!--]--></span></span></button></div></div></div><div class="group" data-v-356d8703><div class="item social-links" data-v-356d8703><div class="VPSocialLinks social-links-list" data-v-356d8703 data-v-7b918527><!--[--><a class="VPSocialLink no-icon" href="https://github.com/Tencent/tmagic-editor" aria-label="github" target="_blank" rel="me noopener" data-v-7b918527 data-v-a672d564><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-98204f52 data-v-475b1ff1><span class="container" data-v-475b1ff1><span class="top" data-v-475b1ff1></span><span class="middle" data-v-475b1ff1></span><span class="bottom" data-v-475b1ff1></span></span></button></div></div></div></div><div class="divider" data-v-98204f52><div class="divider-line" data-v-98204f52></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-d84d18b9 data-v-dbba7b63><div class="container" data-v-dbba7b63><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-dbba7b63><span class="vpi-align-left menu-icon" data-v-dbba7b63></span><span class="menu-text" data-v-dbba7b63>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-dbba7b63 data-v-016843db><button data-v-016843db>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-d84d18b9 data-v-c36ceaeb><div class="curtain" data-v-c36ceaeb></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-c36ceaeb><span class="visually-hidden" id="sidebar-aria-label" data-v-c36ceaeb> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-ca1a6d76><section class="VPSidebarItem level-0" data-v-ca1a6d76 data-v-0848dd37><div class="item" role="button" tabindex="0" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><h2 class="text" data-v-0848dd37>@tmagic/core</h2><!----></div><div class="items" data-v-0848dd37><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/app.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>App</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/node.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>Node</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/page.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>Page</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/eventHelper.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>EventHelper</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/env.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>Env</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/iteratorContainer.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>IteratorContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/flowState.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>FlowState</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/devtoolApi.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>DevtoolApi</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/utils.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>工具函数</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-ca1a6d76><section class="VPSidebarItem level-0 has-active" data-v-ca1a6d76 data-v-0848dd37><div class="item" role="button" tabindex="0" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><h2 class="text" data-v-0848dd37>@tmagic/data-source</h2><!----></div><div class="items" data-v-0848dd37><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/data-source/dataSourceManager.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>DataSourceManager</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/data-source/dataSource.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>DataSource</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/data-source/httpDataSource.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>HttpDataSource</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/data-source/observedData.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>观察者数据类</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/data-source/utils.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>工具函数</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-d84d18b9 data-v-a267f7c7><div class="VPDoc has-sidebar has-aside" data-v-a267f7c7 data-v-154870fd><!--[--><!--]--><div class="container" data-v-154870fd><div class="aside" data-v-154870fd><div class="aside-curtain" data-v-154870fd></div><div class="aside-container" data-v-154870fd><div class="aside-content" data-v-154870fd><div class="VPDocAside" data-v-154870fd data-v-23ce0ef1><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-23ce0ef1 data-v-26c56095><div class="content" data-v-26c56095><div class="outline-marker" data-v-26c56095></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-26c56095>On this page</div><ul class="VPDocOutlineItem root" data-v-26c56095 data-v-96d7f3c2><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-23ce0ef1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-154870fd><div class="content-container" data-v-154870fd><!--[--><!--]--><main class="main" data-v-154870fd><div style="position:relative;" class="vp-doc _tmagic-editor_docs_runtime-api_data-source_observedData" data-v-154870fd><div><h1 id="观察者数据类" tabindex="-1">观察者数据类 <a class="header-anchor" href="#观察者数据类" aria-label="Permalink to “观察者数据类”">​</a></h1><p><code>@tmagic/data-source</code> 提供了三种观察者数据类，用于实现数据的响应式监听。</p><h2 id="observeddata-抽象类" tabindex="-1">ObservedData（抽象类） <a class="header-anchor" href="#observeddata-抽象类" aria-label="Permalink to “ObservedData（抽象类）”">​</a></h2><p>所有观察者数据类的抽象基类，定义了统一的接口。</p><h3 id="抽象方法" tabindex="-1">抽象方法 <a class="header-anchor" href="#抽象方法" aria-label="Permalink to “抽象方法”">​</a></h3><table tabindex="0"><thead><tr><th>方法</th><th>参数</th><th>返回值</th><th>说明</th></tr></thead><tbody><tr><td><code>update</code></td><td><code>(data: any, path?: string)</code></td><td><code>void</code></td><td>更新数据</td></tr><tr><td><code>on</code></td><td><code>(path: string, callback: (payload: any) =&gt; void, options?: { immediate?: boolean })</code></td><td><code>void</code></td><td>监听数据变化。<code>payload</code> 的形态取决于具体实现：<code>SimpleObservedData</code> 路径回调收到 <code>{ updateData, path }</code>（仅 <code>immediate</code> 分支为「当前值」），<code>DeepObservedData</code> 更接近「值」语义</td></tr><tr><td><code>off</code></td><td><code>(path: string, callback: (payload: any) =&gt; void)</code></td><td><code>void</code></td><td>取消监听</td></tr><tr><td><code>getData</code></td><td><code>(path: string)</code></td><td><code>any</code></td><td>获取指定路径的数据</td></tr><tr><td><code>destroy</code></td><td><code>()</code></td><td><code>void</code></td><td>销毁</td></tr></tbody></table><h2 id="simpleobserveddata" tabindex="-1">SimpleObservedData <a class="header-anchor" href="#simpleobserveddata" aria-label="Permalink to “SimpleObservedData”">​</a></h2><p>基于 EventEmitter 的简单观察者实现，只支持单层路径监听。</p><h3 id="使用示例" tabindex="-1">使用示例 <a class="header-anchor" href="#使用示例" aria-label="Permalink to “使用示例”">​</a></h3><div class="language-typescript"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { SimpleObservedData } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/data-source&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> observed</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> SimpleObservedData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;test&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 监听数据变化（SimpleObservedData 路径监听收到的是 { updateData, path }）</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">observed.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;name&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">payload</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;name 变更，payload:&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, payload, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;当前值:&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, observed.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;name&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">));</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 更新数据</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">observed.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">update</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;new name&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 更新特定路径</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">observed.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">update</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;another name&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;name&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 获取数据</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> name</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> observed.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;name&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 取消监听</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">observed.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">off</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;name&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, callback);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 销毁</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">observed.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">destroy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span></code></pre></div><h3 id="特点" tabindex="-1">特点 <a class="header-anchor" href="#特点" aria-label="Permalink to “特点”">​</a></h3><ul><li>轻量级实现</li><li>只支持单层路径监听（如 <code>&#39;name&#39;</code>，不支持 <code>&#39;user.name&#39;</code>）</li><li>适用于简单数据结构</li></ul><h2 id="deepobserveddata" tabindex="-1">DeepObservedData <a class="header-anchor" href="#deepobserveddata" aria-label="Permalink to “DeepObservedData”">​</a></h2><p>基于 <code>deep-state-observer</code> 的深度观察者实现，支持深层路径监听。</p><h3 id="使用示例-1" tabindex="-1">使用示例 <a class="header-anchor" href="#使用示例-1" aria-label="Permalink to “使用示例”">​</a></h3><div class="language-typescript"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { DeepObservedData } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/data-source&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> observed</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> DeepObservedData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> user: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;test&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> profile: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> avatar: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;url&#39;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 监听深层路径</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">observed.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;user.profile.avatar&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">newVal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;头像变更为:&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, newVal);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 监听整个对象</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">observed.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;user&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">newVal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;user 对象变更:&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, newVal);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 立即执行回调</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">observed.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;user.name&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, callback, { immediate: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 更新深层数据</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">observed.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">update</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;new avatar&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;user.profile.avatar&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 获取深层数据</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> avatar</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> observed.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;user.profile.avatar&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h3 id="特点-1" tabindex="-1">特点 <a class="header-anchor" href="#特点-1" aria-label="Permalink to “特点”">​</a></h3><ul><li>支持深层路径监听（如 <code>&#39;user.profile.avatar&#39;</code>）</li><li>支持 <code>immediate</code> 选项立即执行回调</li><li>适用于复杂嵌套数据结构</li><li>性能更优，只在相关路径变化时触发回调</li></ul><h2 id="在-datasourcemanager-中注册" tabindex="-1">在 DataSourceManager 中注册 <a class="header-anchor" href="#在-datasourcemanager-中注册" aria-label="Permalink to “在 DataSourceManager 中注册”">​</a></h2><p>可以通过静态方法注册自定义的观察者数据类：</p><div class="language-typescript"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { DataSourceManager, DeepObservedData } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/data-source&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 注册深度观察者类</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">DataSourceManager.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">registerObservedData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(DeepObservedData);</span></span></code></pre></div><h2 id="自定义观察者类" tabindex="-1">自定义观察者类 <a class="header-anchor" href="#自定义观察者类" aria-label="Permalink to “自定义观察者类”">​</a></h2><p>可以继承 <code>ObservedData</code> 实现自定义的观察者类：</p><div class="language-typescript"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ObservedData } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/data-source&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">class</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> CustomObservedData</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> extends</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ObservedData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> private</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> data</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> constructor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">data</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> super</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.data </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> data;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> update</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">data</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">path</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 自定义更新逻辑</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">path</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">callback</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">payload</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">immediate</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 自定义监听逻辑</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> off</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">path</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">callback</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">payload</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 自定义取消监听逻辑</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> getData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">path</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 自定义获取数据逻辑</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> destroy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 自定义销毁逻辑</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-154870fd data-v-9aa88903><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-9aa88903><span class="visually-hidden" id="doc-footer-aria-label" data-v-9aa88903>Pager</span><div class="pager" data-v-9aa88903><a class="VPLink link pager-link prev" href="/tmagic-editor/docs/runtime-api/data-source/httpDataSource.html" data-v-9aa88903><!--[--><span class="desc" data-v-9aa88903>Previous page</span><span class="title" data-v-9aa88903>HttpDataSource</span><!--]--></a></div><div class="pager" data-v-9aa88903><a class="VPLink link pager-link next" href="/tmagic-editor/docs/runtime-api/data-source/utils.html" data-v-9aa88903><!--[--><span class="desc" data-v-9aa88903>Next page</span><span class="title" data-v-9aa88903>工具函数</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-d84d18b9 data-v-216d1bad><div class="container" data-v-216d1bad><p class="message" data-v-216d1bad>Powered by 腾讯视频会员平台技术中心</p><p class="copyright" data-v-216d1bad>Copyright (C) 2025 Tencent.</p></div></footer><!--[--><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api_editor_codeblockservicemethods.md\":\"j4dVHCGH\",\"api_editor_componentlistservicemethods.md\":\"NxJJ7jSN\",\"api_editor_datasourceservicemethods.md\":\"Cwx54HG-\",\"api_editor_editorserviceevents.md\":\"hznVLbbd\",\"api_editor_editorservicemethods.md\":\"DQM7LO-B\",\"api_editor_events.md\":\"CK-db6wl\",\"api_editor_eventsservicemethods.md\":\"DgT5USLv\",\"api_editor_historyserviceevents.md\":\"CFMnNblB\",\"api_editor_historyservicemethods.md\":\"D36JHUSZ\",\"api_editor_props.md\":\"BpFDudl-\",\"api_editor_propsserviceevents.md\":\"D0dwju-4\",\"api_editor_propsservicemethods.md\":\"DUyAi5co\",\"api_editor_slots.md\":\"DJqaZ_Ge\",\"api_editor_storageservicemethods.md\":\"CB0C9avr\",\"api_editor_uiserviceevents.md\":\"ExlprVtC\",\"api_editor_uiservicemethods.md\":\"De_fweRS\",\"api_form_form-dialog-events.md\":\"D6XTQ524\",\"api_form_form-dialog-methods.md\":\"Ueuf0c0d\",\"api_form_form-dialog-props.md\":\"Cml-Eqa0\",\"api_form_form-events.md\":\"DG4UpuVr\",\"api_form_form-methods.md\":\"Cd2u7iXt\",\"api_form_form-props.md\":\"CueJnMKv\",\"api_form_submit-form.md\":\"BfvHmJFP\",\"api_stage_coreevents.md\":\"DUyZ-b1s\",\"api_stage_coremethods.md\":\"CCiStN-K\",\"api_table_events.md\":\"D0jrNXi5\",\"api_table_methods.md\":\"BMQLD8Ia\",\"api_table_props.md\":\"Dz6QPlwr\",\"form-config_compare.md\":\"BWiQVKe8\",\"form-config_editor-fields_code-link.md\":\"DTwutJ77\",\"form-config_editor-fields_code-select-col.md\":\"jLTv4GM0\",\"form-config_editor-fields_code-select.md\":\"BYqocUgu\",\"form-config_editor-fields_code.md\":\"Au1f-DNG\",\"form-config_editor-fields_cond-op-select.md\":\"Bs2Yo7ZB\",\"form-config_editor-fields_data-source-field-select.md\":\"9hF5_-aD\",\"form-config_editor-fields_data-source-fields.md\":\"DySelL1w\",\"form-config_editor-fields_data-source-input.md\":\"Dje_r8vk\",\"form-config_editor-fields_data-source-method-select.md\":\"CRWJ97X0\",\"form-config_editor-fields_data-source-methods.md\":\"VMcsUuIm\",\"form-config_editor-fields_data-source-mocks.md\":\"DZu5Ixkb\",\"form-config_editor-fields_data-source-select.md\":\"Dx1QWM6q\",\"form-config_editor-fields_display-conds.md\":\"CYpYuR1J\",\"form-config_editor-fields_event-select.md\":\"DLHp-Vmi\",\"form-config_editor-fields_key-value.md\":\"BjB6X9qa\",\"form-config_editor-fields_page-fragment-select.md\":\"wvSVyv0a\",\"form-config_editor-fields_ui-select.md\":\"5lxwceR1\",\"form-config_fields_cascader.md\":\"BqaR_jJk\",\"form-config_fields_checkbox.md\":\"B3H9tDTv\",\"form-config_fields_color-picker.md\":\"BfKhuQ2V\",\"form-config_fields_date-picker.md\":\"DX4YW5cD\",\"form-config_fields_daterange-picker.md\":\"CQx7_7o0\",\"form-config_fields_datetime-picker.md\":\"BifHCHfQ\",\"form-config_fields_display.md\":\"C1mZcdPm\",\"form-config_fields_dynamic-field.md\":\"DJ-cs012\",\"form-config_fields_hidden.md\":\"Bne9Uir9\",\"form-config_fields_link.md\":\"Bx2F9oyx\",\"form-config_fields_number-range.md\":\"CKp78RUr\",\"form-config_fields_number.md\":\"D5bNUfXk\",\"form-config_fields_radio.md\":\"CApc-YRl\",\"form-config_fields_select.md\":\"6co_ozfc\",\"form-config_fields_switch.md\":\"nutxDuJ1\",\"form-config_fields_text.md\":\"BnY1GBJk\",\"form-config_fields_textarea.md\":\"DEFuwkuE\",\"form-config_fields_time-picker.md\":\"pwvE5Apr\",\"form-config_fields_timerange-picker.md\":\"WH5XqYvi\",\"form-config_layout.md\":\"CfbeUtDN\",\"form-config_relate.md\":\"BOq8cCWc\",\"guide_advanced_code-block.md\":\"BRqBOl1x\",\"guide_advanced_coupling.md\":\"BlqRETb5\",\"guide_advanced_data-source.md\":\"DwDLaCo2\",\"guide_advanced_history-list.md\":\"DG5H89iI\",\"guide_advanced_js-schema.md\":\"CVtu2aDq\",\"guide_advanced_layout.md\":\"BPHaakQH\",\"guide_advanced_page.md\":\"Bq5ur5ZK\",\"guide_advanced_tmagic-form.md\":\"pI-LesMe\",\"guide_component.md\":\"B0oMaoQH\",\"guide_conception.md\":\"Bk0z--Tx\",\"guide_editor-expand.md\":\"kURJwp1-\",\"guide_index.md\":\"Cs-1gaGv\",\"guide_introduction.md\":\"CbOBap0m\",\"guide_migration.md\":\"D7i0kyJT\",\"guide_publish.md\":\"CobEKm-2\",\"guide_runtime.md\":\"B8894cSC\",\"guide_tutorial_hello-world.md\":\"CdYVqNSu\",\"guide_tutorial_index.md\":\"Ca5QBUUf\",\"guide_tutorial_render.md\":\"C5eTNnhW\",\"guide_tutorial_runtime.md\":\"_r_5RwDT\",\"index.md\":\"DFLiGMfT\",\"runtime-api_core_app.md\":\"4d5_XHQc\",\"runtime-api_core_devtoolapi.md\":\"2ECqsdl6\",\"runtime-api_core_env.md\":\"CV_zSdgZ\",\"runtime-api_core_eventhelper.md\":\"DMQnqJ7Y\",\"runtime-api_core_flowstate.md\":\"CRQBKc_7\",\"runtime-api_core_iteratorcontainer.md\":\"9UCetu3n\",\"runtime-api_core_node.md\":\"FX3DSVeV\",\"runtime-api_core_page.md\":\"F0Kx4TDo\",\"runtime-api_core_utils.md\":\"CU9eOiU-\",\"runtime-api_data-source_datasource.md\":\"DP7MB7U8\",\"runtime-api_data-source_datasourcemanager.md\":\"Dca7MeRy\",\"runtime-api_data-source_httpdatasource.md\":\"CznGnva6\",\"runtime-api_data-source_observeddata.md\":\"CZE0bwLB\",\"runtime-api_data-source_utils.md\":\"CZqbuBtE\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"tmagic-editor\",\"description\":\"页面可视化平台\",\"base\":\"/tmagic-editor/docs/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"./favicon.png\",\"search\":{\"provider\":\"local\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/Tencent/tmagic-editor\"}],\"footer\":{\"message\":\"Powered by 腾讯视频会员平台技术中心\",\"copyright\":\"Copyright (C) 2025 Tencent.\"},\"nav\":[{\"text\":\"文档\",\"link\":\"/guide/\",\"activeMatch\":\"/guide/\"},{\"text\":\"Editor API\",\"link\":\"/api/editor/props\",\"activeMatch\":\"/api/\"},{\"text\":\"Runtime API\",\"link\":\"/runtime-api/core/app\",\"activeMatch\":\"/runtime-api/\"},{\"text\":\"表单配置\",\"link\":\"/form-config/fields/text\",\"activeMatch\":\"/form-config/\"},{\"text\":\"更新日志\",\"link\":\"https://github.com/Tencent/tmagic-editor/releases\"},{\"text\":\"Playground\",\"link\":\"https://tencent.github.io/tmagic-editor/playground/index.html\"}],\"sidebar\":{\"/guide/\":[{\"text\":\"文档\",\"items\":[{\"text\":\"介绍\",\"link\":\"/guide/introduction.md\"},{\"text\":\"快速开始\",\"link\":\"/guide/\"},{\"text\":\"RUNTIME\",\"link\":\"/guide/runtime.md\"},{\"text\":\"组件开发\",\"link\":\"/guide/component.md\"},{\"text\":\"基础概念\",\"link\":\"/guide/conception.md\"},{\"text\":\"页面发布\",\"link\":\"/guide/publish.md\"},{\"text\":\"编辑器扩展\",\"link\":\"/guide/editor-expand.md\"},{\"text\":\"升级到1.5.x\",\"link\":\"/guide/migration.md\"}]},{\"text\":\"进阶指南\",\"items\":[{\"text\":\"JS Schema\",\"link\":\"/guide/advanced/js-schema.md\"},{\"text\":\"布局原理\",\"link\":\"/guide/advanced/layout.md\"},{\"text\":\"页面渲染\",\"link\":\"/guide/advanced/page.md\"},{\"text\":\"联动原理\",\"link\":\"/guide/advanced/coupling.md\"},{\"text\":\"代码块\",\"link\":\"/guide/advanced/code-block.md\"},{\"text\":\"数据源\",\"link\":\"/guide/advanced/data-source.md\"},{\"text\":\"历史记录面板\",\"link\":\"/guide/advanced/history-list.md\"},{\"text\":\"@tmagic/form\",\"link\":\"/guide/advanced/tmagic-form.md\"}]},{\"text\":\"教程\",\"items\":[{\"text\":\"写在前面\",\"link\":\"/guide/tutorial/\"},{\"text\":\"1.Hello World\",\"link\":\"/guide/tutorial/hello-world.md\"},{\"text\":\"2.Runtime\",\"link\":\"/guide/tutorial/runtime.md\"},{\"text\":\"3.DSL解析渲染\",\"link\":\"/guide/tutorial/render.md\"}]}],\"/api/\":[{\"text\":\"编辑器\",\"items\":[{\"text\":\"Editor组件\",\"items\":[{\"text\":\"props\",\"link\":\"/api/editor/props.md\"},{\"text\":\"slots\",\"link\":\"/api/editor/slots.md\"},{\"text\":\"events\",\"link\":\"/api/editor/events.md\"}]},{\"text\":\"editorService\",\"items\":[{\"text\":\"方法\",\"link\":\"/api/editor/editorServiceMethods.md\"},{\"text\":\"事件\",\"link\":\"/api/editor/editorServiceEvents.md\"}]},{\"text\":\"propsService\",\"items\":[{\"text\":\"方法\",\"link\":\"/api/editor/propsServiceMethods.md\"},{\"text\":\"事件\",\"link\":\"/api/editor/propsServiceEvents.md\"}]},{\"text\":\"historyService\",\"items\":[{\"text\":\"方法\",\"link\":\"/api/editor/historyServiceMethods.md\"},{\"text\":\"事件\",\"link\":\"/api/editor/historyServiceEvents.md\"}]},{\"text\":\"eventsService\",\"link\":\"/api/editor/eventsServiceMethods.md\"},{\"text\":\"uiService\",\"items\":[{\"text\":\"方法\",\"link\":\"/api/editor/uiServiceMethods.md\"},{\"text\":\"事件\",\"link\":\"/api/editor/uiServiceEvents.md\"}]},{\"text\":\"codeBlockService\",\"link\":\"/api/editor/codeBlockServiceMethods.md\"},{\"text\":\"componentListService\",\"link\":\"/api/editor/componentListServiceMethods.md\"},{\"text\":\"storageService\",\"link\":\"/api/editor/storageServiceMethods.md\"}]},{\"text\":\"表单\",\"items\":[{\"text\":\"Form组件\",\"items\":[{\"text\":\"props\",\"link\":\"/api/form/form-props\"},{\"text\":\"methods\",\"link\":\"/api/form/form-methods\"},{\"text\":\"events\",\"link\":\"/api/form/form-events\"}]},{\"text\":\"FormDialog组件\",\"items\":[{\"text\":\"props\",\"link\":\"/api/form/form-dialog-props\"},{\"text\":\"methods\",\"link\":\"/api/form/form-dialog-methods\"},{\"text\":\"events\",\"link\":\"/api/form/form-dialog-events\"}]},{\"text\":\"工具函数\",\"items\":[{\"text\":\"submitForm\",\"link\":\"/api/form/submit-form\"}]}]},{\"text\":\"表格\",\"items\":[{\"text\":\"Table组件\",\"items\":[{\"text\":\"props\",\"link\":\"/api/table/props\"},{\"text\":\"methods\",\"link\":\"/api/table/methods\"},{\"text\":\"events\",\"link\":\"/api/table/events\"}]}]},{\"text\":\"stage\",\"items\":[{\"text\":\"StageCore\",\"items\":[{\"text\":\"方法\",\"link\":\"/api/stage/coreMethods\"},{\"text\":\"事件\",\"link\":\"/api/stage/coreEvents\"}]}]}],\"/form-config/\":[{\"text\":\"基础配置\",\"items\":[{\"text\":\"Input输入框\",\"link\":\"/form-config/fields/text.md\"},{\"text\":\"Textarea文本域\",\"link\":\"/form-config/fields/textarea.md\"},{\"text\":\"InputNumber计数器\",\"link\":\"/form-config/fields/number.md\"},{\"text\":\"NumberRange数字范围\",\"link\":\"/form-config/fields/number-range.md\"},{\"text\":\"Display只读文本\",\"link\":\"/form-config/fields/display.md\"},{\"text\":\"Hidden隐藏域\",\"link\":\"/form-config/fields/hidden.md\"},{\"text\":\"Link链接\",\"link\":\"/form-config/fields/link.md\"},{\"text\":\"Checkbox多选框\",\"link\":\"/form-config/fields/checkbox.md\"},{\"text\":\"Radio单选框\",\"link\":\"/form-config/fields/radio.md\"},{\"text\":\"Switch开关\",\"link\":\"/form-config/fields/switch.md\"},{\"text\":\"Select选择器\",\"link\":\"/form-config/fields/select.md\"},{\"text\":\"Cascader级联选择器\",\"link\":\"/form-config/fields/cascader.md\"},{\"text\":\"ColorPicker颜色选择器\",\"link\":\"/form-config/fields/color-picker.md\"},{\"text\":\"DatePick日期选择器\",\"link\":\"/form-config/fields/date-picker.md\"},{\"text\":\"DateRangePick日期范围选择器\",\"link\":\"/form-config/fields/daterange-picker.md\"},{\"text\":\"DatetimePick日期时间选择器\",\"link\":\"/form-config/fields/datetime-picker.md\"},{\"text\":\"TimePick时间选择器\",\"link\":\"/form-config/fields/time-picker.md\"},{\"text\":\"TimeRangePick时间范围选择器\",\"link\":\"/form-config/fields/timerange-picker.md\"},{\"text\":\"DynamicField动态表单\",\"link\":\"/form-config/fields/dynamic-field.md\"}]},{\"text\":\"编辑器中可用配置\",\"items\":[{\"text\":\"Code代码编辑器\",\"link\":\"/form-config/editor-fields/code.md\"},{\"text\":\"CodeLink代码链接\",\"link\":\"/form-config/editor-fields/code-link.md\"},{\"text\":\"CodeSelect代码块选择器\",\"link\":\"/form-config/editor-fields/code-select.md\"},{\"text\":\"CodeSelectCol代码块选择列\",\"link\":\"/form-config/editor-fields/code-select-col.md\"},{\"text\":\"DataSourceSelect数据源选择器\",\"link\":\"/form-config/editor-fields/data-source-select.md\"},{\"text\":\"DataSourceFieldSelect数据源字段选择器\",\"link\":\"/form-config/editor-fields/data-source-field-select.md\"},{\"text\":\"DataSourceMethodSelect数据源方法选择器\",\"link\":\"/form-config/editor-fields/data-source-method-select.md\"},{\"text\":\"DataSourceFields数据源字段配置\",\"link\":\"/form-config/editor-fields/data-source-fields.md\"},{\"text\":\"DataSourceInput数据源输入框\",\"link\":\"/form-config/editor-fields/data-source-input.md\"},{\"text\":\"DataSourceMethods数据源方法配置\",\"link\":\"/form-config/editor-fields/data-source-methods.md\"},{\"text\":\"DataSourceMocks数据源Mock配置\",\"link\":\"/form-config/editor-fields/data-source-mocks.md\"},{\"text\":\"UISelect组件选择器\",\"link\":\"/form-config/editor-fields/ui-select.md\"},{\"text\":\"KeyValue键值对\",\"link\":\"/form-config/editor-fields/key-value.md\"},{\"text\":\"PageFragmentSelect页面片选择器\",\"link\":\"/form-config/editor-fields/page-fragment-select.md\"},{\"text\":\"EventSelect事件选择器\",\"link\":\"/form-config/editor-fields/event-select.md\"},{\"text\":\"DisplayConds显示条件配置\",\"link\":\"/form-config/editor-fields/display-conds.md\"},{\"text\":\"CondOpSelect条件操作选择器\",\"link\":\"/form-config/editor-fields/cond-op-select.md\"}]},{\"text\":\"布局配置\",\"items\":[{\"text\":\"布局\",\"link\":\"/form-config/layout.md\"}]},{\"text\":\"联动配置\",\"items\":[{\"text\":\"联动\",\"link\":\"/form-config/relate.md\"}]},{\"text\":\"表单对比\",\"items\":[{\"text\":\"表单对比\",\"link\":\"/form-config/compare.md\"}]}],\"/runtime-api/\":[{\"text\":\"@tmagic/core\",\"items\":[{\"text\":\"App\",\"link\":\"/runtime-api/core/app\"},{\"text\":\"Node\",\"link\":\"/runtime-api/core/node\"},{\"text\":\"Page\",\"link\":\"/runtime-api/core/page\"},{\"text\":\"EventHelper\",\"link\":\"/runtime-api/core/eventHelper\"},{\"text\":\"Env\",\"link\":\"/runtime-api/core/env\"},{\"text\":\"IteratorContainer\",\"link\":\"/runtime-api/core/iteratorContainer\"},{\"text\":\"FlowState\",\"link\":\"/runtime-api/core/flowState\"},{\"text\":\"DevtoolApi\",\"link\":\"/runtime-api/core/devtoolApi\"},{\"text\":\"工具函数\",\"link\":\"/runtime-api/core/utils\"}]},{\"text\":\"@tmagic/data-source\",\"items\":[{\"text\":\"DataSourceManager\",\"link\":\"/runtime-api/data-source/dataSourceManager\"},{\"text\":\"DataSource\",\"link\":\"/runtime-api/data-source/dataSource\"},{\"text\":\"HttpDataSource\",\"link\":\"/runtime-api/data-source/httpDataSource\"},{\"text\":\"观察者数据类\",\"link\":\"/runtime-api/data-source/observedData\"},{\"text\":\"工具函数\",\"link\":\"/runtime-api/data-source/utils\"}]}]}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false,\"additionalConfig\":{}}");</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink