Vue 3 Succinctly®
CHAPTER 5
Vue 2 vs. Vue 3
Now that we know how to create the basics of a Vue 3 application, it’s time to review (succinctly) some of the critical differences between Vue 2 and 3 before adding more complexity by using a database. So, let’s explore these crucial differences between versions.
Composition API
Vue 2 relies on the Options API for defining components. On the other hand, Vue 3 introduced the Composition API, allowing for more flexibility and reusability in component logic. Let’s have a look at a code example of each.
Code Listing 4-a: Using the Options API in Vue 2
<template> <button @click="increment">{{ count }}</button> </template>
<script> export default { data() { return { count: 0, }; }, methods: { increment() { this.count++; }, }, }; </script> |
In the previous example, we can see that Vue 2 primarily uses the Options API, which separates a component’s logic into various options (e.g., data, methods, computed).
Contrary to that, in Vue 3, the Composition API was introduced, which allows you to organize logic based on functions and reuse code more efficiently.
The introduction of the script setup syntax is one of the most notable aspects of Vue 3. Here is an example:
Code Listing 4-b: Using the Composition API in Vue 3
<template> <div>{{ message }}</div> </template>
<script setup> let message = 'Hello, Vue 3!'; </script> |
Vue 3's Composition API with script setup simplifies the structure of your component, making it more concise and easier to understand.
Furthermore, the Composition API offers improved code organization and encourages a more modular approach to building components. It's especially beneficial for complex components where logic can be grouped logically, making code easier to understand and maintain.
Props declaration
Vue 2 uses the props option to declare props and their types, whereas Vue 3, within the script setup, uses the defineProps macro, as we saw in the previous chapter. So, let’s look at a code example to understand this better.
Code Listing 4-c: Using Props in Vue 2
<script> export default { props: { propA: String, propB: Number } }; </script> |
On the other hand, in Vue 3, prop declarations are more explicit, and you can use ES6 features like destructuring.
Code Listing 4-d: Using Props in Vue 3
<script setup> import { defineProps } from 'vue'; const props = defineProps({ propA: String, propB: Number }); </script> |
Using defineProps in Vue 3 offers better type checking and makes it easier to see which props a component accepts. It also allows for destructuring, making it more concise and clear.
Emits declaration
Vue 2 uses the emits option to declare custom events, whereas with Vue 3, we can use the defineEmits macro within the script setup. Let’s look at the following Vue 2 code example:
Code Listing 4-e: Using Emits in Vue 2
<script> export default { methods: { handleClick() { this.$emit('custom-event', data); } } }; </script> |
However, using the Composition API in Vue 3 allows us to separate concerns within the app, making it easier to see which props and events a component uses.
Code Listing 4-f: Using Emits in Vue 3
<script setup> import { defineEmits } from 'vue'; const emit = defineEmits(); </script> |
Defining custom events using defineEmits in Vue 3 provides improved visibility of which events a component can emit. It also simplifies event handling, making it cleaner and more organized.
Reactive data
Vue 2 uses data and computed properties for reactive data, whereas Vue 3, within the script setup, uses ref, reactive, and computed. Let’s have a look.
Code Listing 4-g: Reactive Data in Vue 2
<template> <div>{{ message }}</div> </template>
<script> export default { data() { return { message: 'Hello, Vue 2!' }; } }; </script> |
Vue 3's ref, reactive, and computed provide more explicit reactivity, making it easier to work with reactive data.
Code Listing 4-h: Reactive Data in Vue 3
<template> <div>{{ message }}</div> </template>
<script setup> import { ref } from 'vue';
const message = ref('Hello, Vue 3!'); </script> |
Lifecycle hooks
Vue 2 uses options like created and mounted for lifecycle hooks. On the other hand, Vue 3, in script setup mode, uses the onMounted and onUnmounted functions. Let’s have a look.
Code Listing 4-i: Lifecycle Hooks in Vue 2
<script> export default { created() { // Logic on component creation } }; </script> |
In Vue 3, the lifecycle hooks are more explicit and can be organized within the component, as they are defined within the script setup, improving code readability and maintainability.
Code Listing 4-j: Lifecycle Hooks in Vue 3
<script setup> import { onMounted } from 'vue'; onMounted(() => { // Logic on component creation }); </script> |
Directives
Although the directives, such as v-for and v-model, are the same between both versions, Vue 3 allows you to define reactive properties more explicitly, making your code more readable and maintainable. Let’s have a look.
Code Listing 4-k: Directives in Vue 2
<template> <div v-for="item in items">{{ item }}</div> <input v-model="message"> </template>
<script> export default { data() { return { items: [1, 2, 3], message: '' }; } }; </script> |
Code Listing 4-l: Directives in Vue 3
<template> <div v-for="item in items">{{ item }}</div> <input v-model="message"> </template>
<script setup> import { ref } from 'vue';
const items = ref([1, 2, 3]); const message = ref(''); </script> |
Custom event handling
Vue 2 uses $emit for custom event handling, whereas Vue 3 uses the emit function within the script setup. Let's have a look.
Code Listing 4-m: Custom Event Handling in Vue 2
<template> <button @click="handleClick">Click me</button> </template>
<script> export default { methods: { handleClick() { this.$emit('custom-event', data); } } }; </script> |
Using emit in Vue 3 is more straightforward and clarifies concerns between emitting custom events and handling them, improving code organization.
Code Listing 4-n: Custom Event Handling in Vue 3
<template> <button @click="handleClick">Click me</button> </template>
<script setup> import { defineEmits } from 'vue';
const emit = defineEmits();
function handleClick() { emit('custom-event', data); } </script> |
Scoped slots
Vue 2 uses slot-scope for scoped slots; however, Vue 3 uses the slot property within the script setup. Let’s have a look.
Code Listing 4-o: Scoped Slots in Vue 2
<template> <slot-scope="props"> <div>{{ props.data }}</div> </slot> </template> |
Vue 3's approach simplifies scoped slots and integrates them more naturally with the template.
Code Listing 4-p: Scoped Slots in Vue 3
<template> <slot :data="slotProps.data"></slot> </template>
<script setup> const slotProps = { data: 'Some data' }; </script> |
Vue 3 simplifies scoped slots, making them more intuitive and natural to use within the template. The slot property provides a cleaner and more concise way to work with slot content.
Provide and inject
Although both Vue 2 and 3 use provide and inject for component communication, their implementations differ. Let’s have a look.
Code Listing 4-q: Provide and Inject in Vue 2
<script> export default { provide: { user: 'John Diego' } }; </script> |
Vue 3's provide and inject functions offer a cleaner and more expressive way to share data between components. They improve the transparency of component dependencies and promote better code structure.
Code Listing 4-r: Provide and Inject in Vue 3
<script setup> provide('user', 'John Diego'); </script> |
Teleport
When developing an app, it might be possible that a part of a component's template belongs to it logically; however, from a UI (DOM) point of view, it should be displayed elsewhere.
For that purpose, Vue 3 introduced the teleport component that allows us to "teleport" (as in Star Trek) a part of a component's template into a DOM node outside that component's DOM hierarchy.
Code Listing 4-s: Simple Teleport Example in Vue 3
<template> <teleport to="body"> <div>Teleported content</div> </teleport> </template> |
In this example, the div contained within the teleport component is “teleported” into the body section of the DOM.
Introducing the teleport component in Vue 3 simplifies creating portal-like functionality, which was previously quite difficult to achieve in Vue 2. It allows you to render content outside of the component's parent element, offering greater flexibility in UI design.
Recap
Vue 3 with script setup offers several advantages over Vue 2, including improved code organization, reactivity, and component structure.
It encourages cleaner and more maintainable code, making it an excellent choice for both small and large-scale Vue applications.
The Composition API and script setup provide a modern and efficient development experience.
Using the Composition API with script setup is particularly beneficial when building large and complex applications, making your code more readable, maintainable, and efficient.
- 80+ high-performance, modular, and responsive Vue UI components.
- Popular components like Data Grid, Charts, and Diagram.
- Incredibly lightweight and user-friendly.