1

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

在 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')
4

3 回答 3

1

这是在 Vue 世界中通常不会做的事情，并且由于 Vue “监听”变量的方式发生了变化，它默认带有一个实际进行监听的实例。

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

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

new Vue({
    render: h => h('div', { className: 'preview' }, ['Hello World'])
}).$mount('#vue-preview').$destroy()
于 2019-02-01T13:02:49.370 回答
0

您必须为此使用插槽：

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

于 2019-02-01T12:02:32.763 回答
0

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

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')
    ])
  }
})
于 2019-02-01T12:13:31.317 回答