时间戳

首页 > 解决方案 > 如何在不创建组件的情况下在 Vue.js 中呈现 createElement() 的结果

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

问题描述

我的目标是构建一个测试套件，以可视化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')

标签： javascriptvue.jspreactinfernojs

解决方案

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

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

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

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

推荐阅读