Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
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:
6 years ago
by:
Guest
Jump to the latest result
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 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); } } });
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (8)
Previous results
Fork
Test case name
Result
filter
methods
computed with function
filter repeated
methods repeated
computed repeated
computed with variables
computed with variables repeated
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
It seems like you're asking me to analyze the latest benchmark results and identify any trends or patterns. Based on the provided data, here are some observations: 1. **ExecutionsPerSecond** is relatively low for most tests, suggesting that there might be performance bottlenecks in these scenarios. 2. The "computed with variables repeated" test consistently has one of the lowest execution rates (5034.73779296875), which could indicate a performance issue or optimization opportunity. 3. The other tests have more variability in their execution rates, but overall, they seem to be performing reasonably well. To answer your question directly: **No specific trends or patterns are immediately apparent from the provided benchmark results**. However, if you'd like me to help identify potential areas for improvement or suggest possible optimizations based on these results, I'm here to assist!
Related benchmarks:
slice vs filter in js2
charAt() vs slice()
slice vs substring from end
Javascript slice vs substring
Last char remove V1.0
Comments
Confirm delete:
Do you really want to delete benchmark?