DEV Community

Discussion on: React vs Signals: 10 Years Later

View post
Collapse
 
lovetingyuan profile image
tingyuan •

vuejs version:

<template>
  <h1>{{ heading }}</h1>
</template>

<script setup lang="ts">
import { computed } from 'vue'
const props = defineProps<{
  videos: {}[]
  emptyHeading: string
}>()
const heading = computed(() => {
  const count = props.videos.length
  if (count > 0) {
    const noun = count > 1 ? 'Videos' : 'Video'
    return count + ' ' + noun
  }
  return props.emptyHeading
})
</script>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
lovetingyuan profile image
tingyuan •

The variable "heading" is derived (calculated) and logically should have been so from the beginning. This allows developers to have an intuitive understanding of the data source (all related logic is aggregated within one method). Compared to writing it directly in the outer layer, wrapping it in a function has its own advantages, and of course, the most important is its natural responsiveness without any additional cognitive burden.