我面临一个非常奇怪的问题。我正在玩ES6类来构建一个简单的组件系统。我之后的一个实验是一个客户端组件，您可以简单地实例化它，然后它将呈现。如果更改其任何属性，它将重新呈现。该组件将具有其内部模板，因此调用代码不需要了解其HTML。
显示概念的说明：在Chrome中打开，然后在Codepen中打开控制台面板。
突出显示代码以实例化组件，然后更新其中一个属性：
let clientComponent = new MyClientComponent(3,7);
clientComponent.a = 22;
第一行实例化组件，传入第3,7段。实例化导致对_render（）的内部调用，该调用编译DOM片段，如下所示：
"<div><p>3 + 7 = <strong>10</strong></p></div>"
接下来，我们将属性a更新为22，这会触发一个新的渲染，从而产生一个新的编译：
"<div><p>22 + 7 = <strong>29</strong></p></div>"
这是预期的输出，你应该能够看到它在笔中起作用。问题是它在我的开发环境中不起作用，我得到了这个：
"<div><p>22 + 7 = <strong>29</strong></p></div>"
"<div><p>22 + 7 = <strong>29</strong></p></div>"
（两个渲染都显示相同的输出）。笔和我的本地设置之间的区别在于我使用Babel转换，使用以下设置：
{
"plugins": ["transform-es2015-modules-systemjs"],
"presets": ["es2015"]
}
Transpilation当然可能是发生这种情况的一个主要原因，但它更加怪异：输出不正确，除非我使用Chrome的调试器调试并逐步完成代码。然后它确实显示正确的值。我的代码中没有任何内容暗示某种异步或与时间相关的逻辑，那么在调试时它怎么可能起作用，而不是在我不进行调试并让它运行时呢？