Run results for: Vue.js-method-vs-filters-vs-computed

Test name	Executions per second
filter	8244.4 Ops/sec
methods	8274.2 Ops/sec
computed	8101.8 Ops/sec
filter repeated	8390.2 Ops/sec
methods repeated	8212.4 Ops/sec
computed repeated	8006.8 Ops/sec

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