轻量UI框架的核心入口是createApp()和defineComponent()：前者负责状态隔离与上下文创建，后者专注声明式描述；其余如render()、mount()等均为衍生逻辑，真正决定轻量性的关键在于初始化和组件注册是否可省、可延。
轻量UI框架该从哪几个函数入口开始组织
别一上来就写 render() 或 mount()，真正决定轻量与否的，是初始化和组件注册这两步是否可省、可延。核心入口就两个：createApp() 负责状态隔离与上下文创建，defineComponent() 负责声明式描述（非 class 构造），其余都是衍生逻辑。
常见错误是把 DOM 操作塞进组件定义里，比如在 defineComponent() 内直接调用 document.createElement —— 这会让组件无法被 SSR 或测试环境安全执行。正确做法是只返回一个纯对象结构，例如：
defineComponent({
name: 'Button',
props: ['label', 'disabled'],
template: '<button class="btn" :disabled="disabled">{{label}}</button>'
})
所有真实 DOM 创建、事件绑定、样式注入，都交给 createApp() 启动后统一调度。这样既保留语义清晰度，又方便后续替换渲染器（比如换到 Canvas 或嵌入式 WebView）。
HTML模板如何不依赖构建工具直接加载组件
关键不是“怎么引入 JS”，而是“怎么让浏览器识别自定义标签并延迟初始化”。现代轻量框架普遍采用 customElements.define() + template 标签组合，而不是靠 innerHTML 注入字符串。
立即学习“前端免费学习笔记（深入）”；
- 每个组件对应一个
<template id="ui-button">，里面写静态 HTML 结构 - JS 中用
document.getElementById('ui-button').content.cloneNode(true)获取片段，避免重复解析 - 注册时传入类定义，但类中
connectedCallback只做属性映射和事件绑定，不做重绘 - 若需响应式，用
Object.defineProperty包裹属性 setter，触发this.render()，而非监听整个对象
这样做的好处是：不引入打包器也能跑，HTML 文件本身即文档即运行时；缺点是 Safari 对 template.content 的早期版本支持不稳定，需加 if (!template.content) template.content = document.createDocumentFragment() 兜底。
为什么轻量框架必须自己管理事件委托而非绑定到每个元素
因为 DOM 节点数量不可控——用户可能一次性渲染几百个列表项，每个绑 click 监听器会直接拖垮内存和 GC 性能。轻量框架的底线是：所有事件必须走一层全局委托，通过 event.target.matches('[data-role="button"]') 判断来源。
具体实现要注意三点：
- 委托容器不能是
document，而应是组件根节点（如this.shadowRoot || this），否则跨组件事件会误触 - 事件名要标准化，比如统一用
ui:click而非原生click，避免和用户手写的onclick冲突 - 阻止冒泡要谨慎：
event.stopPropagation()会切断父组件捕获链，轻量框架通常只调event.preventDefault()处理表单默认行为
如果你看到某个“轻量框架”示例里给每个按钮都写了 addEventListener，那它已经不算轻量了，只是代码行数少而已。
嵌入式设备上最易被忽略的渲染兼容点
不是 CSS Grid 或 Flex 布局支持问题，而是 getComputedStyle 在低端 WebView 中返回空字符串或 undefined，导致基于计算样式的布局逻辑（比如自动居中、宽高适配）直接失效。
实操建议只有两条：
- 所有尺寸相关逻辑，优先读取
element.offsetWidth/offsetHeight，它们在几乎所有嵌入式 WebView（包括 QtWebEngine、WebKitGTK 旧版）中都可靠 - 避免使用
getComputedStyle(el).display === 'flex'这类判断，改用 class 名匹配，比如el.classList.contains('layout-flex')
另外，requestAnimationFrame 在部分 ARM Cortex-M 级 MCU 的 JS 引擎（如 Duktape）里根本不存在，需要用 setTimeout(fn, 16) 模拟，且必须加节流控制，否则动画帧率会崩到 2fps 以下。
