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

Question

我的目标是构建一个测试套件，以可视化 React 内部超脚本方法 createElement()(也称为 h())的实现差异， 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每个库的创建和渲染过程。

我在 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 对象即可。

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