service 跑逻辑树，
宿主跑渲染树

service thread                              render thread (one root per page)
+-------------------------------+           +-------------------------------+
| App / Page / Component        |           | host TreeRenderer             |
| glass-easel logic ComponentSpace |  tree  | real built-in components      |
| template -> virtual RenderNode | <------> | glass-easel render tree       |
| data / observers / relations  |  flow    | DOM / layout / styles         |
| node ids + patches            |  patch   | no app methods                |
+-------------------------------+           +-------------------------------+复制

1. 01
   安装兼容全局

   按 runtimeCompatibility 写入 App/Page/Component、getApp/getCurrentPages 等全局；API 对象安装到配置的 namespace 和 aliases。未实现的 API 返回 undefined，并产生 UNSUPPORTED_API 警告。

   installMiniProgramGlobals(registry, apiHost)
2. 02
   注册 App

   service.js 被导入时执行 App(...)，registerApp 会立即调用 onLaunch 和 onShow。此时页面还没有创建。

   registerApp(options)
3. 03
   整理 Page 和 Component 定义

   Page() 按顺序绑定到 manifest 里的页面路径；Component() 执行 normalizeComponentDefinition，合并 behaviors、observers、relations、options 和 externalClasses。

   registerComponent(options)
4. 04
   bootstrap 创建逻辑树

   等待 loadArtifacts，加载 templates 和 styles，构建组件 schema，创建 LogicTreeAdapter，挂载首屏逻辑树并触发 onLoad/onShow。

   control('runtime', 'bootstrap')
5. 05
   render 就绪后同步首屏

   宿主的渲染树挂载完成后发送 tree.ready，service 用逻辑树快照发送 tree.flow；随后宿主发 page.ready，service 触发 onReady。

   control('page', 'ready', { pageId })

1. 01
   写入逻辑树

   页面或组件调用 setData 时，先做 cloneJsonSafe，再按 a.b、list[0] 这样的路径写入 service 的 data。

   cloneJsonSafe(patch) · applyDataPatch(data, patch)
2. 02
   执行 observer

   service 侧的 observers 和 property observer 按变更路径匹配执行；property observer 会收到旧值。

   runObservers(instance, observers, changedPaths, oldData)
3. 03
   重新求值模板

   逻辑树里的 glass-easel 重新计算模板，得到新的虚拟 RenderNode。

   logicTree.updateRenderTree(pageId)
4. 04
   diff 出 patch

   旧快照和新快照按 text、replace、props、insert、remove、reorder、extra 做 diff，同一个 microtask 内的更新会合批。

   diffRenderTree(previous, next)
5. 05
   渲染树应用 patch

   宿主 TreeRenderer 把 patch 应用到真实组件和 DOM；service 不等待 render 的确认。

   tree.patch

Component({
  properties: {
    value: { type: String, value: '', observer: 'onValue' },
  },
  observers: {
    value(value) { this.setData({ derived: value.toUpperCase() }) },
    'a, b'(a, b) { this.setData({ sum: a + b }) },
    '**'(data) { /* 任意变化 */ },
  },
  methods: {
    onValue(value, oldValue) {
      this.setData({ changed: value !== oldValue })
    },
  },
})复制

1. 01
   渲染树收到原生事件

   宿主内置组件和 DOM 监听器先处理点击、输入、滚动、触摸等原生事件，并归一化 detail。

   host event listener
2. 02
   发送 tree.event

   渲染树按稳定 node id 发出事件；不再传 componentData，也不要求 service 根据 tag 猜事件语义。

   sendEvent('tree', 'event', payload)
3. 03
   service 找到逻辑节点

   逻辑树按 node id 找到绑定监听器的元素，读取 typed dataset 和 id，执行 capture/bubble。

   logicTree.dispatchViewEvent(payload)
4. 04
   调用页面或组件方法

   逻辑树调用对应的方法；抛错会转成 EVENT_HANDLER_ERROR 诊断。

   page.invokeMethod(handler, [event])

{
  viewId: 'node-42',
  name: 'tap',
  detail: { ... },
  native: { clientX: 120, clientY: 80, ... },
  touches: [ ... ],
  changedTouches: [ ... ]
}复制

export type TreeRenderer = {
  mount(root: RenderNode): void
  applyPatches(patches: RenderPatch[]): void
  applyStyles?(styles: string[]): void
  setEventSink?(sink: (event: TreeEventPayload) => void): void
  setPagePath?(pagePath: string): void
  query?(selector: string, all: boolean): unknown[]
  measure?(ids: string[]): Record<string, unknown>
  inspectTree?(): unknown
  observeIntersection?(request, emit): (() => void) | undefined
  dispose?(): void
}复制