常见问题

模板与渲染

Q: 模板必须单根吗？

是的。Vue 模板编译器对多根节点处理不完整，只渲染第一个元素。务必用单一根包裹：

javascript

// ❌ 错误
app.mount('<h1>标题</h1><p>内容</p>');

// ✅ 正确
app.mount('<div><h1>标题</h1><p>内容</p></div>');

Q: 为什么 effect 重渲染后输入框内容丢失？

重渲染前需要先从 DOM 读取输入框值。顺序：先读 DOM → 再更新 ref → 再渲染：

javascript

effect(() => {
  const inputVal = container.querySelector('#my-input')?.value ?? '';
  myRef.value = inputVal;
  const html = renderList();
  app.isMountedState() ? app.update(html) : app.mount(html);
  bindEvents();
});

Q: 表单提交清空后，输入框又出现旧值？

顺序很重要：先清空 DOM 和 ref，再 push，否则 effect 重渲染时会读回旧值：

javascript

form.onsubmit = (e) => {
  e.preventDefault();
  const name = input.value.trim();
  if (name) {
    input.value = '';        // 先清空 DOM
    newItemRef.value = '';   // 再清空 ref
    items.push({ name });    // 最后 push
  }
};

Q: 用户输入直接插到模板里安全吗？

需转义防 XSS。使用 escapeHtml()：

javascript

function escapeHtml(str) {
  const div = document.createElement('div');
  div.textContent = str ?? '';
  return div.innerHTML;
}
// 使用：${escapeHtml(userInput)}

安装与使用

Q: 浏览器支持？

Chrome 80+、Firefox 75+、Safari 14+、Edge 80+

Q: 有 createApp 或 h 函数吗？

没有。统一使用 new WasmUXApp(container, config) 和 compile()。

微前端

Q: Web Component 不显示？

使用 <wasmux-micro-app> 前需先调用 registerWasmuxMicroAppElement()。

Q: 子应用容器被主壳替换掉了？

子应用容器应独立于主壳 #app。例如主壳用 #app，子应用用 #micro-container，两者分开写在 HTML 中。

排错

Q: Vite 报 process 未定义？

在 index.html 添加：

html

<script>window.process = window.process || { env: { NODE_ENV: 'development' } };</script>