Я не использовал React, поэтому мне было любопытно, как он сравнивается с Vue, который я использую.

Я не использовал React, поэтому мне было любопытно, как он сравнивается с Vue, который я использую. Vue также использует Virtual DOM, и на сайте Vue есть очень подробное сравнение между Vue и React, которое включает в себя много вклада от разработчика React Дэна Абрамова.

Я создал JSBin с вашими примерами плюс реализации на Vue, используя как шаблоны, так и рендеринг, которые раньше не использовал.

Версия для рендеринга очень похожа на React, с единственным HTML-кодом, представляющим собой div с идентификатором:

<div id=”vue-render”></div>

И JS:

var vData = {
  date: null,
};
var vmRender = new Vue({
  el: '#vue-render',
  data: vData,
  render: function(createElement) {
    return createElement(
      'div',
      { class: 'demo' },
      [
        'Hello Vue ',
        createElement('input'),
        createElement(
          'p',
          null,
          this.date,
        ),
      ]
    )
  },
});
const render = () => {
  vData.date = new Date().toString();
};
setInterval(render, 1000);

Однако в этом случае более идиоматической версией Vue будет использование шаблонов, и в этом случае HTML будет таким:

<div id="vue-template">
  <div class="demo">
    Hello Vue
    <input>
    <p>{{ date }}</p>
  </div>
</div>

И JS:

var vData = {
  date: null,
};
var vmTemplate = new Vue({
  el: '#vue-template',
  data: vData,
});
const render = () => {
  vData.date = new Date().toString();
};
setInterval(render, 1000);