如何在不创建组件的情况下在 Vue.js 中呈现 createElement() 的结果

Question

我的目标是构建一个测试套件来可视化内部超标方法 createElement()（也称为 h()）在 React、preact、Inferno、Snabb[=30 中的实现差异=], 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 中执行此操作：我不想处理组件实例创建的额外成本，我只想可视化和比较原始组件virtual dom 每个库的创建和渲染过程。

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

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

Answer 1

你必须为此使用插槽：

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

Answer 2

快速方法是访问渲染方法。

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

这是 Vue 世界中通常不会做的事情，因为 Vue "listens" 变量的方式发生了变化，它默认带有一个实际进行监听的实例。

这是Vue和其他框架的最大区别，其他框架需要手动调用render函数，Vue会修改原始对象并监听它们。

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

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

如何在不创建组件的情况下在 Vue.js 中呈现 createElement() 的结果

How can i render the result of createElement() in Vue.js without creating a component

javascript

vue.js

preact

infernojs