JSFiddle - React, Tailwind, and code Playground

by thierrymichel

HTML

<script src="http://vuejs.org/js/vue.min.js"></script>
<!doctype html>
  <body>
    <div id="slow">
      <div>
        <a href="#" v-on="click: slowPopulate()">vue.js</a>
        <span v-repeat="d: slowData">
        {{d}}
        </span>
      </div>
      <div>
        <a href="#" v-on="click: fastPopulate()">raw JS</a>
        <div v-html="fastDiv"></div>
      </div>
    </div>
  </body>

JavaScript

function populate() {
    var n = [];
    for (var i = 0; i < 1000; i++) {
        n.push(i);
    }
    return n;
}

var slow = new Vue({
    el: '#slow',

    data: {
        slowData: [],
        fastDiv: ''
    },

    methods: {
        slowPopulate: function() {
            var nowMS = new Date().getTime();
            this.slowData = populate();
            var deltaMS = new Date().getTime() - nowMS;
            console.log("populate time: " + deltaMS + ' ms');
            this.perfEvent("vue populate");
        },

        fastPopulate: function() {
            var nowMS = new Date().getTime();
            var n = populate();
            var divs = n.map(function(a) {
                return '<span onclick="javascript: alert(' + a + ')">' + a + '</span>';
            });
            this.fastDiv = divs.join('\n');
            var deltaMS = new Date().getTime() - nowMS;
            console.log("fast populate: %d ms", deltaMS);
            this.perfEvent("js populate");
        },

        perfEvent: function(eventName) {
            var nowMS = new Date().getTime();
            var self = this;
            Vue.nextTick(function() {
                var deltaMS = new Date().getTime() - nowMS;
                console.log("perf [" + eventName + "]: " + deltaMS + " ms");
            });
        }
    }
});