小程序为什么没有普通 DOM?逻辑层、渲染层与 setData 如何协作?

先理解原理和示例,再练习完整口述与追问。

宿主能力与 JS 引擎分开;逻辑/渲染隔离;序列化通信;局部更新、频率与数据量;渲染引擎版本边界。

小程序逻辑层不是普通浏览器页面,不能因为能运行 JavaScript 就假设有 window/document。框架把逻辑和渲染环境隔离,通过规定的数据更新与事件协议协作。常规 WebView 渲染背景下可用“双层通信”理解,但不同平台及 Skyline 等渲染模式细节不同,不能统一断言所有视图都由同一个 WebView 实现。

setData 更新数据并把必要变化传递到视图,通信量、调用频率与渲染范围都会影响性能。直接改 this.data 内字段不能代替视图同步;不用于渲染的大对象也不应全部塞进 data。

js
// 微信小程序 Page methods 中的示例片段
function updateRow(index, title) {
  this.setData({ [`rows[${index}].title`]: title })
}

只更新目标路径通常比每次传整张大表更合适。连续变化可按合理窗口合并,需等待渲染后操作时使用平台提供的回调或测量 API。

缺少 DOM 不是“JavaScriptCore 慢于 V8”导致;DOM 是宿主提供的接口。rpx、选择器查询、原生组件与生命周期也按平台协议使用。

小程序把逻辑与渲染分离,DOM 不作为普通逻辑接口暴露。我通过 setData 和事件协议驱动视图,减少无效数据与高频全量更新,使用平台测量和生命周期,并明确具体平台与渲染模式。官方 API 类型