vue/benchmarks/big-table/index.html

<script src="../../dist/vue.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="demo.css">

<div id="el">
  <h1>
    Rendering Large Datasets With Vue {{renderTime}}
  </h1>

  <form>
    <strong>Filter Data</strong>:
    <input type="text" v-model="filter">

    <!--
      If the user is filtering the data, we want to offer some insight into
      the breadth of the filtering.
    -->
    <span v-if="filter">
      &mdash;
      Filtering <strong>{{ filter }}</strong>
      over {{ dataPoints }} data points,
      {{ visibleCount() }} found.
    </span>

    <!-- Provide tooling to unmount and remount the grid. -->
    <!-- <a v-if="grid.length" v-on="click:unmountGrid">Unmount Grid</a> -->
    <a @click="remountGrid">Remount Grid</a>
  </form>

  <table width="100%" cellspacing="2" :class="{ filtered: filter }">
    <tr v-for="row in grid">
      <th>{{ row.id }}</th>
      <td v-for="item in row.items"
        class="item"
        :class="{ hidden: !matches(item) }">
        {{ item.value }}
      </td>
    </tr>
  </table>
</div>

<script>
function generateGrid( rowCount, columnCount ) {
  var valuePoints = [
    "Daenerys", "Jon", "Sansa", "Arya", "Stannis", "Gregor", "Tyrion",
    "Theon", "Joffrey", "Ramsay", "Cersei", "Bran", "Margaery",
    "Melisandre", "Daario", "Jamie", "Eddard", "Myrcella", "Robb",
    "Jorah", "Petyr", "Tommen", "Sandor", "Oberyn", "Drogo", "Ygritte"
  ];
  var valueIndex = 0;
  var grid = [];

  for ( var r = 0 ; r < rowCount ; r++ ) {
    var row = {
      id: r,
      items: []
    };
    for ( var c = 0 ; c < columnCount ; c++ ) {
      row.items.push({
        id: ( r + "-" + c ),
        value: valuePoints[ valueIndex ]
      });
      if ( ++valueIndex >= valuePoints.length ) {
        valueIndex = 0;
      }
    }
    grid.push( row );
  }

  return( grid );
}

var grid = generateGrid(1000, 10)
var s = window.performance.now()
console.profile('a')
var vm = new Vue({

  el: '#el',

  data: {
    renderTime: 0,
    grid: Object.freeze(grid),
    dataPoints: grid.length * grid[0].items.length,
    filter: ''
  },

  methods: {
    updateFilter (e) {
      this.filter = e.target.value.toLowerCase()
    },
    matches (item) {
      return item.value.toLowerCase().indexOf(this.filter) > -1
    },
    visibleCount () {
      var count = 0
      var grid = this.grid
      for (var i = 0, l = grid.length; i < l; i++) {
        var row = grid[i].items
        for (var j = 0, k = row.length; j < k; j++) {
          var item = row[j]
          var matched = !this.filter || this.matches(item)
          if (matched) {
            count++
          }
        }
      }
      return count
    },
    unmountGrid: function () {
      this.grid = []
    },
    remountGrid: function () {
      this.grid = generateGrid(1000, 10)
      console.profile('unmount')
      Vue.nextTick(function () {
        console.profileEnd('unmount')
      })
    }
  }
})
console.profileEnd('a')
setTimeout(function () {
  vm.renderTime = window.performance.now() - s
}, 0)
</script>