如何在 Vue 中渲染 createElement() 的结果.js而无需创建组件

Question

我的目标是构建一个测试套件，以可视化内部超脚本方法createElement()（也称为h()）在React，preact，Inferno，Snabbdom，Vue中的实现差异。

在 React 中，我可以像这样调用它（无需构建组件）：

ReactDOM.render(
  React.createElement('div', { className: 'preview' }, ['Hello World']),
  document.getElementById('react-preview')
)

在Preact中，我们只需执行以下操作：

preact.render(
  preact.h('div', { className: 'preview' }, ['Hello World']),
  document.getElementById('preact-preview')
)

使用Inferno..我必须导入inferno和inferno-hyperscript：

Inferno.render(
  Inferno.h('div', { className: 'preview' }, ['Hello World']),
  document.getElementById('inferno-preview')
)

现在，我

仍在尝试弄清楚如何在 Vue 中执行此操作而无需创建组件：我不想处理组件实例创建的额外成本，我只想可视化和比较每个库的原始虚拟 dom 创建和渲染过程。

我在这篇文章中找到了一种方法，但它仍然创建了一个新的 Vue 实例。

new Vue({
 render: h => h('div', { className: 'preview' }, ['Hello World'])
}).$mount('#vue-preview')

Answer 1

这在

Vue 世界中通常不会完成，并且由于 Vue "侦听"变量变化的方式，默认情况下它附带一个实际执行侦听的实例。

这是 Vue

和其他框架之间的主要区别，在其他框架中你需要手动调用渲染函数，Vue 修改原始对象并监视它们。

如果你只对最终的 DOM 结构感兴趣，只需在完成后销毁 Vue 对象即可。

new Vue({
    render: h => h('div', { className: 'preview' }, ['Hello World'])
}).$mount('#vue-preview').$destroy()

Answer 2

快速方法是访问 render 方法。

var app = new Vue({
  el: '#app',
data() {
    return {
      isRed: true
    }
  },
  /*
   * Same as
   * <template>
   *   <div :class="{'is-red': isRed}">
   *     <p>Example Text</p>
   *   </div>
   * </template>
   */
  render(h) {
    return h('div', {
      'class': {
        'is-red': this.isRed
      }
    }, [
      h('p', 'Example Text')
    ])
  }
})

Answer 3

您必须为此使用插槽：

https://v2.vuejs.org/v2/guide/components-slots.html