performance/computed

7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Computed stability in Vue 3.4+

In Vue 3.4 and above, a computed property will only trigger effects when its computed value has changed from the previous one. For example, a computed that returns a boolean only triggers effects if the returned value changes from true to false or vice-versa. This reduces unnecessary effect triggers.

Computed stability example with primitive values

The following example demonstrates computed stability: const count = ref(0); const isEven = computed(() => count.value % 2 === 0); watchEffect(() => console.log(isEven.value)); // true. When count.value is set to 2 or 4, no new logs are triggered because the computed value stays true.

Computed stability limitation with object creation

Computed stability doesn't work if the computed property creates a new object on each compute. Because a new object is created each time, the new value is technically always different from the old value, even if the properties remain the same. Deep comparison could be expensive and likely not worth it.

Optimizing computed properties that return objects

To optimize a computed that creates objects, manually compare the new value with the old value and conditionally return the old value if nothing has changed. You can access the old value as a parameter to the computed function. Always perform the full computation before comparing, so that the same dependencies can be collected on every run.

Optimizing computed objects example

The following example shows how to optimize a computed property that returns an object: const computedObj = computed((oldValue) => { const newValue = { isEven: count.value % 2 === 0 }; if (oldValue && oldValue.isEven === newValue.isEven) { return oldValue; } return newValue; }). This prevents creating a new object when the properties haven't changed.

Computed properties cache based on reactive dependencies

Computed properties are cached based on their reactive dependencies. A computed property will only re-evaluate when some of its reactive dependencies have changed. Multiple accesses to a computed property will immediately return the previously computed result without running the getter function again, as long as dependencies have not changed.

Computed property vs method performance difference

Unlike methods, computed properties are cached and only re-evaluate when dependencies change. Methods are always run whenever a re-render happens. When you have an expensive computed property that other computed properties depend on, the caching prevents unnecessary re-executions. If you do not want caching, use a method call instead.

Give your agent this brain