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

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

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

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

Comparing performance of: filter vs methods vs computed vs filter repeated vs methods repeated vs computed repeated

Created: 6 years ago by: Guest

Jump to the latest result

filter

methods

computed

filter repeated

methods repeated

computed repeated

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):