Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Vue.js Basics Sweeping Vues: Loops, Methods, Directives Computed Properties

Hai Huang
Hai Huang
12,675 Points

Can I just use a property in the data object instead of creating a computed property?

Consider these two code blocks.

i. data: { firstName: 'a', lastName: 'b', fullName: ${firstName} ${lastName} }

ii. computed: { getFullName: function() { return ${firstName} ${lastName}; } }

If using {{fullName}} and {{getFullName}} in the HTML will get the same rendered result, why bother using a computed properties? I understand that computed properties may be preferred when the computation is not that simple, but if the situation is simple as the example above, are those two ways the same? Is there any possible difference in web performance?

Thank you.

1 Answer

Steven Parker
Steven Parker
231,271 Points

You can expect course examples to often be simple because the focus is on conveying the concept more than a specific application for it.

But still, an advantage of the full name computed property is that while it may be displayed in several different places, it provides a single point to change should another format be desired (such as "lastname, firstname"). Another advantage of computed properties is they allow you to implement the "best practice" of not storing the same data in more than one place.

Hai Huang
Hai Huang
12,675 Points

Clearly explained and very helpful. Thank you again for helping me!