What are some examples of using the setup script in Vue 3?

What are some examples of using the setup script in Vue 3?

In Vue 3, the setup script is a new way to organize your component logic. Here are a few examples:

1. Basic Example: You can define reactive state using ref and return it from the setup function.

   <script setup>
   import { ref } from 'vue';
   const count = ref(0);
   </script>
   

2. Computed Properties: You can also create computed properties.

   <script setup>
   import { ref, computed } from 'vue';
   const count = ref(0);
   const doubleCount = computed(() => count.value * 2);
   </script>
   

3. Using Props: You can access props directly in the setup function.

   <script setup>
   defineProps(['msg']);
   </script>
   

These examples show how to leverage the setup script for better organization and reactivity.

Can you explain how to use props in the setup script?

Certainly! In the setup script, you can use the defineProps function to declare props. Here's a simple example:

<script setup>
const props = defineProps(['title', 'content']);
</script>

This allows you to access title and content directly within your setup function. You can then use these props in your template or in your script logic.

What about using emit in the setup script?

To use event emission in the setup script, you can use the defineEmits function. Here's how you can do it:

<script setup>
const emit = defineEmits();

function handleClick() {
    emit('customEvent', { message: 'Hello from setup!' });
}
</script>

In this example, when handleClick is called, it emits a customEvent with a payload.

Are there any best practices for using the setup script?

Yes, here are some best practices for using the setup script in Vue 3:

1. Keep it Simple: Try to keep your setup function concise and focused on a single responsibility.
2. Use Composition API: Leverage Vue's Composition API for better organization and reusability of logic.
3. Type Safety: If you're using TypeScript, define types for your props and emits for better type safety.
4. Avoid Side Effects: Try to avoid side effects in the setup function; use lifecycle hooks for that.