Vue.js-method-vs-filters-vs-computed

JavaScript performance comparison

Test case created by swiecaJS

Preparation code

<script src="//cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

<section id="filters"></section>
<section id="computed"></section>
<section id="methods"></section>
      
<script>
Benchmark.prototype.setup = function() {
        const _trimAndCapitalize = (text, length) => {
          if (!text) return "";
          text = text.toString();
          return text.charAt(0).toUpperCase() + text.slice(1, length);
        };

};
</script>

Preparation code output

<section id="filters"></section> <section id="computed"></section> <section id="methods"></section>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
vue filter
const filtersVm = new Vue({
        el: "#filters",
        template: `
        <section>
          <h3>Filters</h3>
          <p>{{ text1 | trimAndCapitalizeFilter(2)}}</p>
          <p>{{ text2 | trimAndCapitalizeFilter(11)}}</p>
          <p>{{ text3 | trimAndCapitalizeFilter(3)}}</p>
          <p>{{ text4 | trimAndCapitalizeFilter(5)}}</p>
        </section>
        `,
        data() {
          return {
            text1: "ullam velit quis eum aliquam illum numquam ipsa.",
            text2: "amet consectetur, adipisicing elit.",
            text3: "res sit, cupiditate sapiente",
            text4: "adipisicing elit. Maiores sit, illum numquam ipsa."
          };
        },
        filters: {
          trimAndCapitalizeFilter(text, length) {
            return _trimAndCapitalize(text, length);
          }
        }
      });
pending…
vue methods
const methodsVm = new Vue({
        el: "#methods",
        template: `
        <section>
          <h3>Methods</h3>
          <p>{{ trimAndCapitalizeMethod(text1, 2) }}</p>
          <p>{{ trimAndCapitalizeMethod(text2, 11) }}</p>
          <p>{{ trimAndCapitalizeMethod(text3, 3) }}</p>
          <p>{{ trimAndCapitalizeMethod(text4, 5) }}</p>
        </section>
        `,
        data() {
          return {
            text1: "ullam velit quis eum aliquam illum numquam ipsa.",
            text2: "amet consectetur, adipisicing elit.",
            text3: "res sit, cupiditate sapiente",
            text4: "adipisicing elit. Maiores sit, illum numquam ipsa."
          };
        },
        methods: {
          trimAndCapitalizeMethod(text, length) {
            return _trimAndCapitalize(text, length);
          }
        }
      });
pending…
vue computed reference
const computedVm = new Vue({
        el: "#computed",
        template: `
        <section>
          <h3>Computed</h3>
          <p>{{ trimAndCapitalizeComputed(text1, 2) }}</p>
          <p>{{ trimAndCapitalizeComputed(text2, 11) }}</p>
          <p>{{ trimAndCapitalizeComputed(text3, 3) }}</p>
          <p>{{ trimAndCapitalizeComputed(text4, 12) }}</p>
        </section>
        `,
        data() {
          return {
            text1: "ullam velit quis eum aliquam illum numquam ipsa.",
            text2: "amet consectetur, adipisicing elit.",
            text3: "res sit, cupiditate sapiente",
            text4: "adipisicing elit. Maiores sit, illum numquam ipsa."
          };
        },
        computed: {
          trimAndCapitalizeComputed() {
            return _trimAndCapitalize;
          }
        }
      });
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL.

0 Comments