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);
