Nathan Klatt
Jul 27, 2017 · 1 min read

I’ve not used React so I was curious how it compared to Vue, which I do use. Vue also uses a Virtual DOM and the Vue site has a very detailed comparison between Vue and React, which includes much input from React dev Dan Abramov.

I created a JSBin with your examples plus implementations in Vue, using both templates and rendering, which I’d not used previously.

The rendering version looks very similar to React, with the only HTML being a div with an id:

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

And, the 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);

For this case, however, the more idiomatic Vue version would be to use templates, in which case the HTML would be:

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

And, the JS:

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade