Question

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

在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每个库的创建和渲染过程。

我在this post中找到了一种方法，但是它仍然会创建一个新的Vue实例。

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

Answer 1

这是Vue世界中通常不做的事情，并且因为Vue“侦听”变量更改的方式，所以默认情况下，它附带一个实际进行侦听的实例。

这是Vue与其他框架之间的主要区别，在其他框架中，您需要手动调用render函数，Vue会修改原始对象并对其进行监视。

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

<div>
  {users.map(user) => (
    <div>{users.name}</div>
  )}
</div>

Answer 2

您必须为此使用插槽：

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

Answer 3

快速方法是访问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')
    ])
  }
})

我如何在不创建组件的情况下在Vue.js中渲染createElement（）的结果

3 个答案: