2026-11-05 11:36:05 +00:00

58 lines
38 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>DataSource(基础数据源) | tmagic-editor</title>
<meta name="description" content="页面可视化平台">
<meta name="generator" content="VitePress v2.0.0-alpha.20">
<link rel="preload stylesheet" href="/tmagic-editor/docs/assets/style.BJ2NNEpv.css" as="style">
<link rel="preload stylesheet" href="/tmagic-editor/docs/assets/vp-icons.139f4833.css" as="style">
<script type="module" src="/tmagic-editor/docs/assets/chunks/metadata.dcccadd9.js"></script>
<script type="module" src="/tmagic-editor/docs/assets/app.CPR846ZD.js"></script>
<link rel="preload" href="/tmagic-editor/docs/assets/inter-roman-latin.q5rAVC0E.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/chunks/framework.xVFRZL1t.js">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/chunks/theme.Cnor0NYZ.js">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/runtime-api_data-source_dataSource.md.D-8jq0M8.lean.js">
<meta name="theme-color" content="#646cff">
<script id="check-dark-mode">(()=>{let e=localStorage.getItem(`vitepress-theme-appearance`)||`auto`,t=window.matchMedia(`(prefers-color-scheme: dark)`).matches;(!e||e===`auto`?t: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-30dd6aed><!--[--><!--]--><!--[--><span tabindex="-1" data-v-a433cfaa></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-a433cfaa>Skip to content</a><!--]--><!----><header class="VPNav" data-v-30dd6aed data-v-07bd5c5d><div class="VPNavBar has-sidebar top" data-v-07bd5c5d data-v-21941f7c><div class="wrapper" data-v-21941f7c><div class="container" data-v-21941f7c><div class="title" data-v-21941f7c><div class="VPNavBarTitle has-sidebar" data-v-21941f7c data-v-897088ca><a class="title" href="/tmagic-editor/docs/" title="tmagic-editor" data-v-897088ca><!--[--><!--]--><!--[--><img class="VPImage logo" src="./favicon.png" alt data-v-38e748df><!--]--><span data-v-897088ca>tmagic-editor</span><!--[--><!--]--></a></div></div><div class="content" data-v-21941f7c><div class="content-body" data-v-21941f7c><!--[--><!--]--><div class="VPNavBarSearch search" data-v-21941f7c data-v-f5079369><!--[--><button type="button" class="VPNavBarSearchButton" aria-label="Search" aria-keyshortcuts="/ control+k meta+k" data-v-f5079369 data-v-83aac609><span class="vpi-search" aria-hidden="true" data-v-83aac609></span><span class="text" data-v-83aac609>Search</span><span class="keys" aria-hidden="true" data-v-83aac609><kbd class="key-mod" data-v-83aac609></kbd><kbd class="key-k" data-v-83aac609></kbd></span></button><!----><!--]--></div><nav aria-label="Main Navigation" class="VPNavMenu VPNavBarMenu menu" data-v-21941f7c data-v-4ba09fef><ul class="list" data-v-4ba09fef><!--[--><li class="" data-v-4ba09fef><a class="VPLink link VPNavMenuLink VPNavBarMenuLink" href="/tmagic-editor/docs/guide/" data-v-4ba09fef data-v-7e03ec29><!--[--><span data-v-7e03ec29>文档</span><!--]--></a></li><li class="" data-v-4ba09fef><a class="VPLink link VPNavMenuLink VPNavBarMenuLink" href="/tmagic-editor/docs/api/editor/props.html" data-v-4ba09fef data-v-7e03ec29><!--[--><span data-v-7e03ec29>Editor API</span><!--]--></a></li><li class="" data-v-4ba09fef><a class="VPLink link VPNavMenuLink VPNavBarMenuLink active" href="/tmagic-editor/docs/runtime-api/core/app.html" data-v-4ba09fef data-v-7e03ec29><!--[--><span data-v-7e03ec29>Runtime API</span><!--]--></a></li><li class="" data-v-4ba09fef><a class="VPLink link VPNavMenuLink VPNavBarMenuLink" href="/tmagic-editor/docs/form-config/fields/text.html" data-v-4ba09fef data-v-7e03ec29><!--[--><span data-v-7e03ec29>表单配置</span><!--]--></a></li><li class="" data-v-4ba09fef><a class="VPLink link vp-external-link-icon VPNavMenuLink VPNavBarMenuLink" href="https://github.com/Tencent/tmagic-editor/releases" target="_blank" rel="noreferrer" data-v-4ba09fef data-v-7e03ec29><!--[--><span data-v-7e03ec29>更新日志</span><!--]--></a></li><li class="" data-v-4ba09fef><a class="VPLink link vp-external-link-icon VPNavMenuLink VPNavBarMenuLink" href="https://tencent.github.io/tmagic-editor/playground/index.html" target="_blank" rel="noreferrer" data-v-4ba09fef data-v-7e03ec29><!--[--><span data-v-7e03ec29>Playground</span><!--]--></a></li><!--]--></ul></nav><!----><div class="VPNavAppearance VPNavBarAppearance appearance" data-v-21941f7c data-v-f5ba90e0><!----><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-label="Appearance" aria-checked="false" data-v-f5ba90e0 data-v-dd1ff0a1 data-v-cbe52c7c><span class="check" data-v-cbe52c7c><span class="icon" data-v-cbe52c7c><!--[--><span class="vpi-sun sun" aria-hidden="true" data-v-dd1ff0a1></span><span class="vpi-moon moon" aria-hidden="true" data-v-dd1ff0a1></span><!--]--></span></span></button></div><ul class="VPSocialLinks VPNavSocialLinks VPNavBarSocialLinks social-links" data-v-21941f7c data-v-552b8346 data-v-677dc98a><!--[--><li data-v-677dc98a><a class="VPSocialLink no-icon" href="https://github.com/Tencent/tmagic-editor" aria-label="github" target="_blank" rel="me noopener" data-v-677dc98a data-v-9979aee9><span class="vpi-simple-icons-github" data-v-9979aee9 data-v-8056d6c9></span></a></li><!--]--></ul><!----><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="Menu" aria-expanded="false" data-v-21941f7c data-v-5bed391b><span class="container" aria-hidden="true" data-v-5bed391b><span class="top" data-v-5bed391b></span><span class="middle" data-v-5bed391b></span><span class="bottom" data-v-5bed391b></span></span></button></div></div></div></div><div class="divider" data-v-21941f7c><div class="divider-line" data-v-21941f7c></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-30dd6aed data-v-194cf01f><div class="container" data-v-194cf01f><button type="button" class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-194cf01f><span class="vpi-align-left menu-icon" aria-hidden="true" data-v-194cf01f></span><span class="menu-text" data-v-194cf01f>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-allow-mismatch="style" data-v-194cf01f data-v-5b4c2295><button type="button" data-v-5b4c2295>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-30dd6aed data-v-86dd7c4e><div class="curtain" data-v-86dd7c4e></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-86dd7c4e><span class="visually-hidden" id="sidebar-aria-label" data-v-86dd7c4e> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-e9f7a9fe><section class="VPSidebarItem level-0" data-v-e9f7a9fe data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><h2 class="text" data-v-83833344>@tmagic/core</h2><!----></div><ul class="items" data-v-83833344><li data-v-83833344><!--[--><div class="VPSidebarItem level-1 is-link" data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/app.html" data-v-83833344><!--[--><p class="text" data-v-83833344>App</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/node.html" data-v-83833344><!--[--><p class="text" data-v-83833344>Node</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/page.html" data-v-83833344><!--[--><p class="text" data-v-83833344>Page</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/eventHelper.html" data-v-83833344><!--[--><p class="text" data-v-83833344>EventHelper</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/env.html" data-v-83833344><!--[--><p class="text" data-v-83833344>Env</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/iteratorContainer.html" data-v-83833344><!--[--><p class="text" data-v-83833344>IteratorContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/flowState.html" data-v-83833344><!--[--><p class="text" data-v-83833344>FlowState</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/devtoolApi.html" data-v-83833344><!--[--><p class="text" data-v-83833344>DevtoolApi</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/utils.html" data-v-83833344><!--[--><p class="text" data-v-83833344>工具函数</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><div class="no-transition group" data-v-e9f7a9fe><section class="VPSidebarItem level-0 has-active" data-v-e9f7a9fe data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><h2 class="text" data-v-83833344>@tmagic/data-source</h2><!----></div><ul class="items" data-v-83833344><li data-v-83833344><!--[--><div class="VPSidebarItem level-1 is-link" data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/data-source/dataSourceManager.html" data-v-83833344><!--[--><p class="text" data-v-83833344>DataSourceManager</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link is-active has-active" data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/data-source/dataSource.html" aria-current="page" data-v-83833344><!--[--><p class="text" data-v-83833344>DataSource</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/data-source/httpDataSource.html" data-v-83833344><!--[--><p class="text" data-v-83833344>HttpDataSource</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/data-source/observedData.html" data-v-83833344><!--[--><p class="text" data-v-83833344>观察者数据类</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/data-source/utils.html" data-v-83833344><!--[--><p class="text" data-v-83833344>工具函数</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-30dd6aed data-v-67626bf1><div class="VPDoc has-sidebar has-aside" data-v-67626bf1 data-v-d7746812><!--[--><!--]--><div class="container" data-v-d7746812><div class="aside" data-v-d7746812><div class="aside-curtain" data-v-d7746812></div><div class="aside-container" data-v-d7746812><div class="aside-content" data-v-d7746812><div class="VPDocAside" data-v-d7746812 data-v-c57c5106><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-c57c5106 data-v-44783068><div class="content" data-v-44783068><div class="outline-marker" data-v-44783068></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-44783068>On this page</div><ul class="VPDocOutlineItem root" data-v-44783068 data-v-78fca9da><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-c57c5106></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-d7746812><div class="content-container" data-v-d7746812><!--[--><!--]--><main class="main" data-v-d7746812><div style="position:relative;" class="vp-doc _tmagic-editor_docs_runtime-api_data-source_dataSource" data-v-d7746812><div><h1 id="datasource-基础数据源" tabindex="-1">DataSource(基础数据源) <a class="header-anchor" href="#datasource-基础数据源" aria-label="Permalink to “DataSource(基础数据源)”">​</a></h1><p><code>DataSource</code> 是 <code>@tmagic/data-source</code> 的基础数据源类,用于静态数据管理。</p><h2 id="构造函数" tabindex="-1">构造函数 <a class="header-anchor" href="#构造函数" aria-label="Permalink to “构造函数”">​</a></h2><div class="language-typescript"><button title="Copy code" data-copied="Copied" 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:#c62739;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> DataSource</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(options: DataSourceOptions)</span></span></code></pre></div><h3 id="datasourceoptions" tabindex="-1">DataSourceOptions <a class="header-anchor" href="#datasourceoptions" aria-label="Permalink to “DataSourceOptions”">​</a></h3><table tabindex="0"><thead><tr><th>参数</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td><code>schema</code></td><td><code>DataSourceSchema</code></td><td>数据源配置</td></tr><tr><td><code>app</code></td><td><code>TMagicApp</code></td><td>应用实例</td></tr><tr><td><code>initialData</code></td><td><code>Record&lt;string, any&gt;</code></td><td>初始数据(可选)</td></tr><tr><td><code>useMock</code></td><td><code>boolean</code></td><td>使用 Mock 数据(可选)</td></tr><tr><td><code>request</code></td><td><code>RequestFunction</code></td><td>请求函数(可选)</td></tr><tr><td><code>ObservedDataClass</code></td><td><code>ObservedDataClass</code></td><td>观察者数据类(可选)</td></tr></tbody></table><h3 id="datasourceschema" tabindex="-1">DataSourceSchema <a class="header-anchor" href="#datasourceschema" aria-label="Permalink to “DataSourceSchema”">​</a></h3><table tabindex="0"><thead><tr><th>参数</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td><code>id</code></td><td><code>string</code></td><td>数据源 ID</td></tr><tr><td><code>type</code></td><td><code>&#39;base&#39;</code></td><td>数据源类型</td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>数据源标题(可选)</td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>数据源描述(可选)</td></tr><tr><td><code>fields</code></td><td><code>DataSchema[]</code></td><td>字段配置</td></tr><tr><td><code>methods</code></td><td><code>CodeBlockContent[]</code></td><td>自定义方法配置(可选)</td></tr><tr><td><code>mocks</code></td><td><code>MockSchema</code></td><td>Mock 数据配置(可选)</td></tr><tr><td><code>events</code></td><td><code>EventConfig[]</code></td><td>事件配置(可选)</td></tr></tbody></table><h2 id="属性" tabindex="-1">属性 <a class="header-anchor" href="#属性" aria-label="Permalink to “属性”">​</a></h2><table tabindex="0"><thead><tr><th>属性</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td><code>id</code></td><td><code>string</code></td><td>数据源 ID(只读)</td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>数据源类型,值为 <code>&#39;base&#39;</code></td></tr><tr><td><code>schema</code></td><td><code>DataSourceSchema</code></td><td>配置 schema</td></tr><tr><td><code>fields</code></td><td><code>DataSchema[]</code></td><td>字段配置</td></tr><tr><td><code>methods</code></td><td><code>CodeBlockContent[]</code></td><td>自定义方法配置</td></tr><tr><td><code>data</code></td><td><code>any</code></td><td>当前数据</td></tr><tr><td><code>isInit</code></td><td><code>boolean</code></td><td>是否已初始化</td></tr><tr><td><code>isMounted</code></td><td><code>boolean</code></td><td>页面渲染后的 <code>mounted</code> 是否已执行</td></tr></tbody></table><h2 id="实例方法" tabindex="-1">实例方法 <a class="header-anchor" href="#实例方法" aria-label="Permalink to “实例方法”">​</a></h2><h3 id="setdata" tabindex="-1">setData <a class="header-anchor" href="#setdata" aria-label="Permalink to “setData”">​</a></h3><ul><li><p><strong>参数:</strong></p><ul><li><code>{any} data</code> 数据</li><li><code>{string} path</code> 数据路径(可选)</li></ul></li><li><p><strong>返回:</strong></p><ul><li><code>{void}</code></li></ul></li><li><p><strong>详情:</strong></p><p>设置数据源数据。如果指定路径,则只更新该路径的数据。</p></li><li><p><strong>示例:</strong></p></li></ul><div class="language-typescript"><button title="Copy code" data-copied="Copied" 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:#62687b;--shiki-dark:#818e99;">// 设置整个数据</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">ds.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setData</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;">, count: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;">// 设置特定路径的数据</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">ds.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;newValue&#39;</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;">);</span></span></code></pre></div><h3 id="setvalue" tabindex="-1">setValue <a class="header-anchor" href="#setvalue" aria-label="Permalink to “setValue”">​</a></h3><ul><li><p><strong>参数:</strong></p><ul><li><code>{string} path</code> 数据路径</li><li><code>{any} data</code> 数据</li></ul></li><li><p><strong>返回:</strong></p><ul><li><code>{void}</code></li></ul></li><li><p><strong>详情:</strong></p><p>按路径设置数据,等同于 <code>setData(data, path)</code>。</p></li><li><p><strong>示例:</strong></p></li></ul><div class="language-typescript"><button title="Copy code" data-copied="Copied" 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:#24292E;--shiki-dark:#E1E4E8;">ds.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;user.age&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">25</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h3 id="setfields" tabindex="-1">setFields <a class="header-anchor" href="#setfields" aria-label="Permalink to “setFields”">​</a></h3><ul><li><p><strong>参数:</strong></p><ul><li><code>{DataSchema[]} fields</code> 字段配置</li></ul></li><li><p><strong>返回:</strong></p><ul><li><code>{void}</code></li></ul></li><li><p><strong>详情:</strong></p><p>设置数据源的字段配置 <code>fields</code>。一般在初始化或 schema 更新后调用。</p></li></ul><h3 id="setmethods" tabindex="-1">setMethods <a class="header-anchor" href="#setmethods" aria-label="Permalink to “setMethods”">​</a></h3><ul><li><p><strong>参数:</strong></p><ul><li><code>{CodeBlockContent[]} methods</code> 自定义方法配置</li></ul></li><li><p><strong>返回:</strong></p><ul><li><code>{void}</code></li></ul></li><li><p><strong>详情:</strong></p><p>设置数据源的自定义方法配置 <code>methods</code>。</p></li></ul><h3 id="ondatachange" tabindex="-1">onDataChange <a class="header-anchor" href="#ondatachange" aria-label="Permalink to “onDataChange”">​</a></h3><ul><li><p><strong>参数:</strong></p><ul><li><code>{string} path</code> 数据路径</li><li><code>{(payload: any) =&gt; void} callback</code> 回调函数</li></ul></li><li><p><strong>返回:</strong></p><ul><li><code>{void}</code></li></ul></li><li><p><strong>详情:</strong></p><p>监听指定路径的数据变化。</p><div class="warning custom-block"><p class="custom-block-title">callback 入参取决于 <code>ObservedData</code> 实现</p><ul><li><code>SimpleObservedData</code>(默认):路径监听触发时,回调收到的是 <code>{ updateData, path }</code> 形式的 <code>ChangeEvent</code>,<strong>不是</strong>纯粹的 newVal。仅在 <code>options.immediate</code> 分支会以「当前路径值」回调一次。</li><li><code>DeepObservedData</code>(基于 <code>deep-state-observer</code>):回调入参贴近「值」的语义。</li></ul><p>如需统一拿到「最新值」,可在回调里用 <code>ds.getData(path)</code> 主动读取。</p></div></li><li><p><strong>示例:</strong></p></li></ul><div class="language-typescript"><button title="Copy code" data-copied="Copied" 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:#24292E;--shiki-dark:#E1E4E8;">ds.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onDataChange</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;">, (</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">payload</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> // SimpleObservedData 下 payload 形如 { updateData, path }</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.name 变更,最新值:&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, ds.</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.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></code></pre></div><h3 id="offdatachange" tabindex="-1">offDataChange <a class="header-anchor" href="#offdatachange" aria-label="Permalink to “offDataChange”">​</a></h3><ul><li><p><strong>参数:</strong></p><ul><li><code>{string} path</code> 数据路径</li><li><code>{(payload: any) =&gt; void} callback</code> 回调函数(与 <code>onDataChange</code> 相同的引用)</li></ul></li><li><p><strong>返回:</strong></p><ul><li><code>{void}</code></li></ul></li><li><p><strong>详情:</strong></p><p>取消监听数据变化。</p></li></ul><h3 id="getdefaultdata" tabindex="-1">getDefaultData <a class="header-anchor" href="#getdefaultdata" aria-label="Permalink to “getDefaultData”">​</a></h3><ul><li><p><strong>返回:</strong></p><ul><li><code>{any}</code> 默认数据</li></ul></li><li><p><strong>详情:</strong></p><p>根据字段配置获取默认数据。</p></li></ul><h3 id="init" tabindex="-1">init <a class="header-anchor" href="#init" aria-label="Permalink to “init”">​</a></h3><ul><li><p><strong>返回:</strong></p><ul><li><code>{Promise&lt;void&gt;}</code></li></ul></li><li><p><strong>详情:</strong></p><p>初始化数据源。</p></li></ul><h3 id="mounted" tabindex="-1">mounted <a class="header-anchor" href="#mounted" aria-label="Permalink to “mounted”">​</a></h3><ul><li><p><strong>返回:</strong></p><ul><li><code>{Promise&lt;void&gt;}</code></li></ul></li><li><p><strong>详情:</strong></p><p>页面渲染完成后执行,执行后 <code>isMounted</code> 为 <code>true</code>。由 <code>DataSourceManager</code> 监听到 <code>mounted</code> 事件后统一调用,自定义数据源可以重写该方法实现「页面渲染后」的逻辑。</p></li><li><p><strong>示例:</strong></p></li></ul><div class="language-typescript"><button title="Copy code" data-copied="Copied" 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:#c62739;--shiki-dark:#F97583;">class</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> CustomDataSource</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> extends</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> DataSource</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> public</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> async</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mounted</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> // 页面渲染后再拉取数据,避免阻塞首屏</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fetchSomething</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">());</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> super</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mounted</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 style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="destroy" tabindex="-1">destroy <a class="header-anchor" href="#destroy" aria-label="Permalink to “destroy”">​</a></h3><ul><li><p><strong>返回:</strong></p><ul><li><code>{void}</code></li></ul></li><li><p><strong>详情:</strong></p><p>销毁数据源,清理资源。</p></li></ul><h2 id="事件" tabindex="-1">事件 <a class="header-anchor" href="#事件" aria-label="Permalink to “事件”">​</a></h2><p>DataSource 继承自 EventEmitter,支持以下事件:</p><table tabindex="0"><thead><tr><th>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td><code>change</code></td><td>数据变化时触发</td><td><code>(changeEvent: ChangeEvent)</code>,<code>ChangeEvent</code> 形如 <code>{ updateData, path? }</code></td></tr></tbody></table><h3 id="示例" tabindex="-1">示例 <a class="header-anchor" href="#示例" aria-label="Permalink to “示例”">​</a></h3><div class="language-typescript"><button title="Copy code" data-copied="Copied" 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:#24292E;--shiki-dark:#E1E4E8;">ds.</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;change&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, (</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">changeEvent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#c62739;--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;">, changeEvent.updateData, changeEvent.path);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h2 id="字段配置-dataschema" tabindex="-1">字段配置 (DataSchema) <a class="header-anchor" href="#字段配置-dataschema" aria-label="Permalink to “字段配置 (DataSchema)”">​</a></h2><table tabindex="0"><thead><tr><th>参数</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td><code>name</code></td><td><code>string</code></td><td>字段名</td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>字段类型</td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>字段标题(可选)</td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>字段描述(可选)</td></tr><tr><td><code>defaultValue</code></td><td><code>any</code></td><td>默认值(可选)</td></tr><tr><td><code>fields</code></td><td><code>DataSchema[]</code></td><td>子字段(对象类型时)(可选)</td></tr></tbody></table><h3 id="字段配置示例" tabindex="-1">字段配置示例 <a class="header-anchor" href="#字段配置示例" aria-label="Permalink to “字段配置示例”">​</a></h3><div class="language-typescript"><button title="Copy code" data-copied="Copied" 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:#c62739;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> schema</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;user_ds&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;base&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> fields: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;id&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;number&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, defaultValue: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;name&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;string&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, defaultValue: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#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 style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;profile&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;object&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> fields: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;avatar&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;string&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;bio&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;string&#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 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></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-d7746812 data-v-5edf9672><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-5edf9672><span class="visually-hidden" id="doc-footer-aria-label" data-v-5edf9672>Pager</span><div class="pager" data-v-5edf9672><a class="VPLink link pager-link prev" href="/tmagic-editor/docs/runtime-api/data-source/dataSourceManager.html" data-v-5edf9672><!--[--><span class="desc" data-v-5edf9672>Previous page</span><span class="title" data-v-5edf9672>DataSourceManager</span><!--]--></a></div><div class="pager" data-v-5edf9672><a class="VPLink link pager-link next" href="/tmagic-editor/docs/runtime-api/data-source/httpDataSource.html" data-v-5edf9672><!--[--><span class="desc" data-v-5edf9672>Next page</span><span class="title" data-v-5edf9672>HttpDataSource</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-30dd6aed data-v-58cefbd9><div class="container" data-v-58cefbd9><p class="message" data-v-58cefbd9>Powered by 腾讯视频会员平台技术中心</p><p class="copyright" data-v-58cefbd9>Copyright (C) 2025 Tencent.</p></div></footer><!--[--><!--]--></div></div>
</body>
</html>