Content:
2. Mastering Vue 3 - Part 2 [Benefits of using Vue 3 for web development]
3. Mastering Vue 3 - Part 3 [Template syntax in Vue 3]
4. Mastering Vue 3 - Part 4 [Reactivity Fundamentals]
5. Mastering Vue 3 - Part 5 [Class and Style Bindings]
6. Mastering Vue 3 - Part 6 [Lifecycle Hooks]
7. Mastering Vue 3 - Part 7 [Understanding components in Vue 3]
8. Mastering Vue 3 - Part 8 [Installing Vue project and file structure]
9. Mastering Vue 3 - Part 9 [Vue Router in Vue 3]
10. Mastering Vue 3 - Part 10 [Animation in Vue 3]
11. Mastering Vue 3 - Part 11 [State Management with Pinia]
12. Mastering Vue 3 - Part 12 [Teleport in Vue 3]
13. Mastering Vue 3 - Part 13 [Working with API Calls ]
14. Mastering Vue 3 - Part 14 [Forms and Form Validation ]
Lifecycle Hooks
In Vue 3, the concept of lifecycle hooks has been replaced with the Composition API, which provides a more flexible and intuitive way to manage component logic. Instead of using specific lifecycle hooks, you can use composition functions to encapsulate and reuse code.
The Composition API introduces a set of functions that can be used inside the setup function of a component to define reactive data, computed properties, methods, and more. These functions are not tied to specific lifecycle stages, but rather allow you to organize your component logic in a more granular and composable way.
Here are some important composition functions available in Vue 3:
1. **setup function:**
The setup
function is the entry point of a component and is called before the component is created. It is where you define reactive data, computed properties, methods, and component setup logic.
<script>
import { reactive, computed } from 'vue';
export default {
setup() {
const state = reactive({
message: 'Hello, Vue 3!',
count: 0
});
const doubleCount = computed(() => state.count * 2);
function increment() {
state.count++;
}
return {
state,
doubleCount,
increment
};
}
};
</script>
In this example, the setup
function defines reactive data (state
), a computed property (doubleCount
), and a method (increment
).
2. **onMounted:**
The onMounted
function is used to perform actions when the component is mounted to the DOM. It is similar to the mounted
lifecycle hook in Vue 2.
<script>
import { onMounted } from 'vue';
export default {
setup() {
onMounted(() => {
console.log('Component mounted');
});
}
};
</script>
In this example, the onMounted
function is used to log a message when the component is mounted.
3. **onUpdated:**
The onUpdated
function is used to perform actions when the component is updated and re-rendered. It is similar to the updated
lifecycle hook in Vue 2.
<script>
import { onUpdated } from 'vue';
export default {
setup() {
onUpdated(() => {
console.log('Component updated');
});
}
};
</script>
In this example, the onUpdated
function is used to log a message when the component is updated.
4. **onUnmounted:**
The onUnmounted
function is used to perform cleanup actions when the component is unmounted from the DOM. It is similar to the beforeUnmount
lifecycle hook in Vue 2.
<script>
import { onUnmounted } from 'vue';
export default {
setup() {
onUnmounted(() => {
console.log('Component unmounted');
});
}
};
</script>
In this example, the onUnmounted
function is used to log a message when the component is unmounted.
These are just a few examples of the composition functions available in the Composition API. By using these functions, you can organize your component logic in a more modular and reusable way, without being tied to specific lifecycle hooks.
__
Top comments (0)