Props Advanced

🎁 Vue.js Props: The Gift Box Story

The Magic of Unwrapping Gifts

Imagine you receive a gift box 🎁 from your friend. Inside the box, there’s a toy car, a puzzle, and some candy. In Vue.js, this gift box is called props – things a parent component gives to a child component.

Now, here’s the exciting part: How do you take things out of the box?

📦 What Are Props Destructuring Caveats?

The Story

Think of props like a magic gift box that keeps changing. If you take the toy out and put it on your shelf, your toy on the shelf won’t magically change when someone puts a NEW toy in the gift box!

<!-- ❌ The Problem: Breaking the Magic Connection -->
<script setup>
const { count } = defineProps(['count'])

// count is just a NUMBER now (like 5)
// It's NOT connected to the gift box anymore!
// If the box updates, your shelf doesn't know
</script>

What Happens Here?

1. You open the gift box (defineProps)
2. You take count out and put it on your shelf
3. The gift box gets a new count? Your shelf still has the old one!

🔮 The Magic Solution: Reactive Props Destructure

Vue 3.5+ Gave Us Magic Powers!

Starting from Vue 3.5, when you destructure props in <script setup>, the magic connection stays alive!

<!-- ✅ Vue 3.5+: The Magic Connection Stays! -->
<script setup>
const { count } = defineProps(['count'])

// Now count IS reactive!
// When gift box updates, your shelf updates too!
</script>

graph TD
    A["🎁 Parent Component"] -->|Sends Props| B["📦 defineProps"]
    B -->|Vue 3.5+ Magic| C["✨ Reactive count"]
    C -->|Auto Updates| D["🖥️ Your Template"]

    style A fill:#4CAF50,color:#fff
    style B fill:#2196F3,color:#fff
    style C fill:#FF9800,color:#fff
    style D fill:#9C27B0,color:#fff

⚠️ The Caveats (Watch Out!)

Caveat 1: Default Values Need Special Care

<script setup>
// ❌ This default won't be reactive
const { count = 0 } = defineProps(['count'])

// ✅ Use withDefaults for reactive defaults
const props = withDefaults(
  defineProps<{ count?: number }>(),
  { count: 0 }
)
</script>

Why? Default values are like putting a placeholder toy on your shelf. The placeholder isn’t connected to the gift box!

Caveat 2: Passing to Functions

<script setup>
const { count } = defineProps(['count'])

// ⚠️ Be careful when passing to functions!
watch(
  // ❌ This loses reactivity
  count,
  (newVal) => console.log(newVal)
)

watch(
  // ✅ Use a getter to keep reactivity
  () => count,
  (newVal) => console.log(newVal)
)
</script>

🎨 Real Examples

Example 1: A Counter Display

<!-- ParentComponent.vue -->
<template>
  <ChildDisplay :score="playerScore" />
</template>

<script setup>
import { ref } from 'vue'
const playerScore = ref(100)
</script>

<!-- ChildDisplay.vue -->
<script setup>
const { score } = defineProps(['score'])
// score updates when parent changes it! ✨
</script>

<template>
  <div class="score-box">
    🏆 Score: {{ score }}
  </div>
</template>

Example 2: User Profile Card

<!-- ProfileCard.vue -->
<script setup>
const {
  name,
  avatar,
  isOnline
} = defineProps(['name', 'avatar', 'isOnline'])
</script>

<template>
  <div class="card">
    <img :src="avatar" />
    <h3>{{ name }}</h3>
    <span :class="isOnline ? 'green' : 'gray'">
      {{ isOnline ? '🟢 Online' : '⚫ Offline' }}
    </span>
  </div>
</template>

📊 Quick Comparison Table

🧠 Remember This!

The Gift Box Rule 🎁

When you destructure props in Vue 3.5+, the magic connection stays alive. But always use getters in functions like watch() to keep the connection working!

Simple Mental Model

📦 Props = Gift Box (always changing)
📋 Destructured = Items on your shelf
🔮 Vue 3.5+ = Magic shelf that updates automatically!
⚠️ Functions = Need special getter wrapper

🎯 Key Takeaways

1. Props Destructuring = Taking items out of the gift box
2. Vue 3.5+ = The magic connection stays alive
3. Watch out for default values (use withDefaults)
4. In functions like watch(), wrap with a getter: () => propName
5. In templates, destructured props always work!

💡 Pro Tips

Tip 1: Always Use TypeScript for Clarity

<script setup lang="ts">
interface Props {
  count: number
  message?: string
}

const { count, message = 'Hello' } = defineProps<Props>()
</script>

Tip 2: Computed for Transformations

<script setup>
import { computed } from 'vue'
const { price } = defineProps(['price'])

// ✅ Perfect for derived values
const formattedPrice = computed(() => `${price.toFixed(2)}`)
</script>

You did it! 🎉 Now you understand how props destructuring works in Vue.js. Remember: the gift box is always connected to your shelf in Vue 3.5+, but be careful when passing values to functions!