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

Question

My goal is to build a test suite to visualize the differences of implementation of the inner hyperscript method createElement() (otherwise known as h()) within React, preact, Inferno, Snabbdom, Vue..

In React, i can invoke it like that (without building a component) :

ReactDOM.render(
  React.createElement('div', { className: 'preview' }, ['Hello World']),
  document.getElementById('react-preview')
)

In Preact, we simply do :

preact.render(
  preact.h('div', { className: 'preview' }, ['Hello World']),
  document.getElementById('preact-preview')
)

With Inferno.. i must import inferno and inferno-hyperscript :

Inferno.render(
  Inferno.h('div', { className: 'preview' }, ['Hello World']),
  document.getElementById('inferno-preview')
)

Now, i'm still trying to figure how to do this in Vue without creating a component : i don't want to deal with the additional cost of components instances creation, i just want to visualize and compare the raw virtual dom creation and rendering process of each library.

I have found a way to do it in this post, but it still create a new Vue instance..

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

I think that maybe what i am trying to do is not clear enough : I don't want to create a new Vue component. I want to use the `createElement()` method that is internally exposed to the `render()` method of a component, use it and render its result in the DOM. — zipang, Feb 01 '19 at 12:17

score 1 · Accepted Answer · answered Feb 01 '19 at 13:02

This is something that is not usually done in the Vue world, and because the way Vue "listens" to variable changes, it by default comes with an instance that actually does the listening.

This is the major difference between Vue and other frameworks, where in other frameworks you need to call the render function manually, Vue modifies the original objects and watches on them.

If you are only interested in the final DOM structure, just destroy the Vue object once you are done.

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

Thanks a lot for this answer ! Yeah, that's it : i will have to destroy the instance to be able to rerender to the same node in my test suite without Vue complaining ! — zipang, Feb 01 '19 at 13:09

score 0 · Answer 2 · edited Jul 15 '22 at 00:29

0

You have to use slots for this:

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

edited Jul 15 '22 at 00:29

tony19

125,647
18
229
307

answered Feb 01 '19 at 12:02

Gaurav Neema

146
1
1
12

FirstIndex · Answer 3 · 2019-02-01T12:47:37.777

0

Quick way is to access the render method.

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')
    ])
  }
})

edited Feb 01 '19 at 12:47

answered Feb 01 '19 at 12:13

FirstIndex

159
7

This is not exactly what i wanted to do, i have reformulated my question. – zipang Feb 01 '19 at 12:41
I have updated the answer, you can use the render method to create quick elements.. – FirstIndex Feb 01 '19 at 12:48
Yes, that's more like it : i want to render the result of the h() method, but if possible, without the additional cost of creating a new Vue instance. – zipang Feb 01 '19 at 12:50
You would need to bind the render method to an existing element in the DOM. You are not creating a component, but there is a need to initialize a new Vue Instance. – FirstIndex Feb 01 '19 at 12:55
Could you come up with some working code sample ? :) – zipang Feb 01 '19 at 12:56
1

Am not saying there is a better way, am saying you cannot escape not initializing a new instance. – FirstIndex Feb 01 '19 at 12:58
Yes.. it seems difficult. I'll post an update if i find a way...! – zipang Feb 01 '19 at 13:04

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

3 Answers3