Computed vs method performance in Vue - Quick Revision & Key Differences

Recall & Review

beginner

What is a computed property in Vue?

A computed property is a reactive value that Vue caches based on its dependencies. It only recalculates when its dependencies change, improving performance by avoiding unnecessary recalculations.

beginner

How does a method differ from a computed property in Vue?

A method runs every time it is called during rendering, without caching. This means it recalculates on each render, which can be less efficient than computed properties for expensive calculations.

intermediate

Why are computed properties generally better for performance than methods in Vue?

Computed properties cache their results and only update when dependencies change, reducing unnecessary recalculations. Methods run fresh every render, which can slow down the app if the calculation is heavy.

intermediate

When should you use a method instead of a computed property in Vue?

Use a method when you need to perform an action that should run fresh every time, like event handlers or when the result depends on arguments passed at call time.

advanced

What happens if a computed property has no reactive dependencies?

If a computed property has no reactive dependencies, it will compute once and cache that value indefinitely, behaving like a constant until the component is destroyed.

Which Vue feature caches its result until dependencies change?

A Method

B Computed property

C Watchers

D Directives

Computed properties cache their results and only update when their reactive dependencies change.

How often does a Vue method run during rendering?

A Every time it is called during render

B Only when manually triggered

C Once when the component mounts

D Only when dependencies change

Methods run fresh every time they are called during rendering, without caching.

When is it better to use a method instead of a computed property?

A For expensive calculations

B When caching is needed

C When the result depends on arguments passed at call time

D For reactive data binding

Methods are better when you need to pass arguments and get fresh results each call.

What is a downside of using methods for expensive calculations in Vue?

A They cannot access reactive data

B They do not run on every render

C They cache results unnecessarily

D They recalculate every render, which can hurt performance

Methods recalculate every render, so expensive calculations can slow down the app.

If a computed property has no reactive dependencies, what happens?

A It computes once and caches indefinitely

B It recalculates every render

C It never runs

D It throws an error

Without reactive dependencies, computed properties compute once and cache the value.

Explain the performance differences between computed properties and methods in Vue.

Think about when Vue recalculates values and how caching helps.

Describe when you should choose a method over a computed property in Vue and why.

Consider if the calculation depends on arguments or needs caching.