3.8 KiB
3.8 KiB
title, impact, impactDescription, type, tags
| title | impact | impactDescription | type | tags | |||||
|---|---|---|---|---|---|---|---|---|---|
| Use Computed Properties for Cached Reactive Derivations | MEDIUM | Methods recalculate on every render while computed properties cache results | efficiency |
|
Use Computed Properties for Cached Reactive Derivations
Impact: MEDIUM - Computed properties are cached based on their reactive dependencies and only re-evaluate when dependencies change. Methods run on every component re-render, causing performance issues for expensive operations.
When you need to derive a value from reactive state, prefer computed properties over methods for automatic caching and optimized re-renders.
Task Checklist
- Use computed properties for values derived from reactive state
- Use methods only when you need to pass parameters or don't want caching
- Never use computed for non-reactive values like
Date.now() - Consider performance impact of expensive operations in methods vs computed
Incorrect:
<template>
<!-- BAD: Method runs on every re-render -->
<p>{{ getFilteredItems() }}</p>
<p>{{ calculateTotal() }}</p>
<p>{{ getCurrentTime() }}</p>
</template>
<script setup>
import { ref } from 'vue';
const items = ref([
/* large array */
]);
const prices = ref([100, 200, 300]);
// BAD: Expensive operation runs every render
function getFilteredItems() {
return items.value.filter((item) => item.active).sort((a, b) => a.name.localeCompare(b.name));
}
// BAD: Calculation runs every render even if prices unchanged
function calculateTotal() {
return prices.value.reduce((sum, price) => sum + price, 0);
}
// This looks like a computed use case, but Date.now() is non-reactive
function getCurrentTime() {
return Date.now(); // Will appear to work but won't update reactively
}
</script>
Correct:
<template>
<!-- GOOD: Computed only recalculates when items change -->
<p>{{ filteredItems }}</p>
<p>{{ total }}</p>
<!-- GOOD: Method for non-reactive current time -->
<p>{{ getCurrentTime() }}</p>
</template>
<script setup>
import { ref, computed } from 'vue';
const items = ref([
/* large array */
]);
const prices = ref([100, 200, 300]);
// GOOD: Cached - only recalculates when items.value changes
const filteredItems = computed(() => {
return items.value.filter((item) => item.active).sort((a, b) => a.name.localeCompare(b.name));
});
// GOOD: Cached - only recalculates when prices change
const total = computed(() => {
return prices.value.reduce((sum, price) => sum + price, 0);
});
// GOOD: Use method for non-reactive values
// (or use setInterval to update a ref)
function getCurrentTime() {
return Date.now();
}
</script>
When to Use Each
| Scenario | Use Computed | Use Method |
|---|---|---|
| Derived from reactive state | Yes | No |
| Expensive calculation | Yes | No |
| Need to pass parameters | No | Yes |
| Non-reactive value (Date.now()) | No | Yes |
| Don't want caching | No | Yes |
| Triggered by user action | No | Yes |
Non-Reactive Values Warning
Computed properties only track reactive dependencies. Non-reactive values like Date.now() will cause the computed to be evaluated once and never update:
// BAD: Date.now() is not reactive - computed will never update
const now = computed(() => Date.now());
// GOOD: Use a ref with setInterval for live time
const now = ref(Date.now());
setInterval(() => {
now.value = Date.now();
}, 1000);