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

HTML 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 Preparation code:

      const _trimAndCapitalize = (text, length) => {
        if (!text) return "";
        text = text.toString();
        return text.charAt(0).toUpperCase() + text.slice(1, length);
      };

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
filter
methods
computed
filter repeated
methods repeated
computed repeated

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 7 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Browser/OS: Chrome 116 on Windows

View result in a separate tab

Test name	Executions per second
filter	17640.5 Ops/sec
methods	11921.9 Ops/sec
computed	12014.0 Ops/sec
filter repeated	13295.7 Ops/sec
methods repeated	13212.1 Ops/sec
computed repeated	13486.4 Ops/sec

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: 4 years ago by: Guest

Jump to the latest result

filter

methods

computed

filter repeated

methods repeated

computed repeated

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A