Button 组件渲染错误

[abramdev]

相关平台

微信小程序

复现仓库

https://gist.github.com/abramdev/ec0c3902cb8ce1c952683748ca4616d7
小程序基础库: 2.12.0
使用框架: Vue3

复现步骤

直接用初始化的项目 vue3 默认模板，当 Button 同级元素总数超过 5 个，Button 元素将会被渲染成 view 元素，并且丢失所有的默认样式

期望结果

Button 元素正确被渲染成 button 元素

实际结果

被渲染成 view 元素

环境信息

Taro CLI 3.0.5 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 12.13.0 - C:\Program Files\nodejs\node.EXE
      Yarn: 1.21.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
      npm: 6.12.0 - C:\Program Files\nodejs\npm.CMD

---

补充信息

如果使用 button plain=true 的按钮有些情况下渲染正确，有些时候渲染失败，整体比较奇怪，规律很难摸清楚，不同按钮，不同位置，渲染正确率不同，但基本是发生在同级元素超过5个以上，同级元素可以是 button 或者 view

[Chen-jj]

@abramdev 非常感谢反馈！

检查到原因是 Vue3 会把一些没有数据绑定或事件绑定（根据你的例子，应该还和层级节点数有关）的静态节点做一些优化，对这些静态部分会使用 node.innerHTML API 进行渲染。

然后我们模拟的 innerHTML API 有点问题而导致最终渲染为 View。