Simple Computed Properties

Checks if any computed properties are bigger than 5 lines.   
👉 https://vuejs.org/style-guide/rules-strongly-recommended.html#simple-computed-properties

❓ Why it's good to follow this rule?

• Simple Responsibility: Shorter computed properties have a single responsibility and can be really focused.
• Readability: Shorter computed properties are easier to read and understand.
• Maintainability: Shorter computed properties are easier to maintain and refactor.
• Performance: Shorter computed properties are faster to compute.
• Consistency: Shorter computed properties are consistent with the naming of files and folders.
• Debugging: Shorter computed properties are easier to debug.
• Testing: Shorter computed properties are easier to test.

😱 Examples of code for which this rule will throw a warning

WARNING

The following code contains computed properties that are too large, making them harder to read and maintain.

<!-- Incorrect: Computed property exceeds 5 lines -->
<script setup>
const total = computed(() => {
  let total = 0
  for (let i = 0; i < items.value.length; i++) {
    total += items.value[i].price
  }
  for (let i = 0; i < items.value.length; i++) {
    total += items.value[i].price
  }
  for (let i = 0; i < items.value.length; i++) {
    total += items.value[i].price
  }
  return total
})
</script>

🤩 How to fix it?

TIP

Refactor large computed properties into smaller, more manageable ones. This improves readability and maintainability.

<!-- Correct: Computed properties are simplified and concise -->
<script setup>
const total = computed(() => {
  return items.value.reduce((sum, item) => sum + item.price, 0)
})

const isWeekend = computed(() => today.getDay() === 0 || today.getDay() === 6)
</script>