Benchmark: Vue.js-method-vs-filters-vs-computedVariables

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

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

computed with function

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

filter repeated

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

methods repeated

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

computed repeated

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

computed with variables

const computedVm = new Vue({
        el: "#computed",
        template: `
        <section>
          <h3>Computed</h3>
          <p>{{ trimAndCapitalizeComputed1 }}</p>
          <p>{{ trimAndCapitalizeComputed2 }}</p>
          <p>{{ trimAndCapitalizeComputed3 }}</p>
          <p>{{ trimAndCapitalizeComputed4 }}</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: {
          trimAndCapitalizeComputed1() {
            return _trimAndCapitalize(text1, 2);
          },
          trimAndCapitalizeComputed2() {
            return _trimAndCapitalize(text2, 11);
          },
          trimAndCapitalizeComputed3() {
            return _trimAndCapitalize(text3, 3);
          },
          trimAndCapitalizeComputed4() {
            return _trimAndCapitalize(text4, 12);
          }
        }
      });

computed with variables repeated

const computedVm = new Vue({
        el: "#computed",
        template: `
        <section>
          <h3>Computed</h3>
          <p>{{ trimAndCapitalizeComputed1 }}</p>
          <p>{{ trimAndCapitalizeComputed2 }}</p>
          <p>{{ trimAndCapitalizeComputed3 }}</p>
          <p>{{ trimAndCapitalizeComputed4 }}</p>
<p>{{ trimAndCapitalizeComputed1 }}</p>
          <p>{{ trimAndCapitalizeComputed2 }}</p>
          <p>{{ trimAndCapitalizeComputed3 }}</p>
          <p>{{ trimAndCapitalizeComputed4 }}</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: {
          trimAndCapitalizeComputed1() {
            return _trimAndCapitalize(text1, 2);
          },
          trimAndCapitalizeComputed2() {
            return _trimAndCapitalize(text2, 11);
          },
          trimAndCapitalizeComputed3() {
            return _trimAndCapitalize(text3, 3);
          },
          trimAndCapitalizeComputed4() {
            return _trimAndCapitalize(text4, 12);
          }
        }
      });

Test name	Executions per second
filter	5146.9 Ops/sec
methods	5157.7 Ops/sec
computed with function	5098.4 Ops/sec
filter repeated	5339.0 Ops/sec
methods repeated	5339.9 Ops/sec
computed repeated	5177.7 Ops/sec
computed with variables	5051.1 Ops/sec
computed with variables repeated	5034.7 Ops/sec

Vue.js-method-vs-filters-vs-computedVariables (version: 0)

Comparing performance of: filter vs methods vs computed with function vs filter repeated vs methods repeated vs computed repeated vs computed with variables vs computed with variables repeated

Created: 4 years ago by: Guest

Jump to the latest result

filter

methods

computed with function

filter repeated

methods repeated

computed repeated

computed with variables

computed with variables repeated

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A