Как я могу отобразить результат createElement () в Vue.js без создания компонента

Question

Моя цель - создать набор тестов для визуализации различий в реализации метода внутреннего гиперсценария createElement() (также известного как h()) в React, 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-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')

Answer 1

Быстрый способ - получить доступ к методу рендеринга.

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 2

Это то, что обычно не делается в мире Vue, и поскольку способ, которым Vue «слушает» переменные, по умолчанию поставляется с экземпляром, который фактически выполняет прослушивание.

ЭтоОсновное различие между Vue и другими средами, где в других средах вам нужно вызывать функцию рендеринга вручную, Vue изменяет исходные объекты и наблюдает за ними.

Если вас интересует только окончательная структура DOM, просто уничтожьтеобъект Vue, как только вы закончите.

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

Answer 3

Для этого вы должны использовать слоты:

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