In the world of web development, especially when working with technologies like Vue.js and C# .NET, data flow and lifecycle management between components are crucial. You sometimes try to send data from one place to another, but things don’t go as planned, and questions arise in your mind… That’s exactly where Vue.js’s lifecycle hooks come into play. Particularly, the created and mounted hooks allow us to perform certain actions before and after the component is attached to the DOM. Incidentally, during some research for this topic, I remembered a problem I faced in one of my projects. Anyway, let’s get back to the subject.
First, let’s talk briefly about what these lifecycle hooks are. In Vue.js, these are special methods triggered when a component is created, updated, or destroyed. Among the most frequently used ones are created and mounted. The created hook runs when the component is loaded into memory but before it is added to the DOM. That means at this stage, you can fetch data, initialize variables, but trying to perform DOM-related operations might get complicated because the DOM isn’t ready yet. Okay, this is a good starting point.
Then comes the mounted hook, which fires when your component is fully attached to the DOM and ready for interaction. This is an ideal place to perform DOM manipulations, initialize third-party libraries, or run scripts that depend on the DOM being available. So, in summary, created is perfect for data preparation, and mounted is for DOM-related tasks. Isn’t that great?
So, how do we use these in the scenario of sending data to a C# .NET REST API? Suppose you have a form on the Vue.js side, and you want to send this data to a backend built with C#. You might also want to fetch some data from the backend to populate dropdowns or other UI elements. This is where created can help us by fetching the necessary data and assigning it to the component’s data. Later, when the user submits the form, you can send this data to the backend either in the mounted hook or through a separate method.
There is also a update hook called updated, triggered when a component is updated. Imagine you want to see the effect of a data update reflected in the DOM. You can use this hook to monitor DOM changes. However, since updated runs on every small change, caution is needed to avoid performance issues. I think being cautious here is wise.
Now, let’s get practical. Imagine you have a user list you want to display in Vue.js. Initially, you need to fetch this list from the backend. The created hook comes into play here. Inside this hook, you make an API call to fetch users and assign the response data to a users array. Then, you loop through this array in your template to display the users. Typically, we use libraries like Axios for such requests, as they are simple and powerful.
Here’s a simple code example. Suppose our Vue component UserList.vue uses Axios in its created hook to fetch data from an API built with C# .NET Core.
Vue.js Side: Data Fetching
Let’s use the created hook in our Vue component to retrieve user data from the backend. If you haven’t installed Axios yet, you can do so via the command line with npm install axios. Most Vue projects include it by default, but it’s good to check.
Here’s a sample code:
<template> <div> <h2>User List</h2> <ul v-if="users.length"> <li v-for="user in users" :key="user.id"> {{ user.name }} - {{ user.email }} </li> </ul> <p v-else>Loading users...</p> </div> </template><script> import axios from ‘axios’; // Import Axios library
export default { data() { return { users: [] // Empty array to hold users }; }, created() { // Fetch data from API when component is created axios.get(‘https://localhost:7001/api/users’) // Use your backend API address .then(response => { this.users = response.data; // Assign response data to users array }) .catch(error => { console.error(‘Error fetching users:’, error); // You can show a message to the user here }); } }; </script>
In this code, the created hook sends a GET request to https://localhost:7001/api/users. The response’s data part, which contains user information, is assigned to this.users. Consequently, our template’s v-for directly uses this data. Pretty simple, right?
Now, let’s look at a basic C# .NET Core backend API example that provides this data. It’s a simple controller that returns a list of users, which you will typically fetch from a database in real applications.
C# .NET Core API: Providing Data
In the backend, create a UsersController with an action method called GetUsers. This method will return a few user objects. Remember, in a real project, these would be retrieved from a database like PostgreSQL, SQL Server, etc.
using Microsoft.AspNetCore.Mvc; using System.Collections.Generic;[ApiController] [Route("api/[controller]")] public class UsersController : ControllerBase { [HttpGet] public ActionResult<IEnumerable<User>> GetUsers() { // In real applications, data comes from a database var users = new List<User> { new User { Id = 1, Name = "Ali Veli", Email = "aliveli@example.com" }, new User { Id = 2, Name = "Ayşe Fatma", Email = "aysefatma@example.com" }, new User { Id = 3, Name = "Mehmet Topal", Email = "mehmet@example.com" } }; return Ok(users); // Return list as JSON } }
// Basic User model public class User { public int Id { get; set; } public string Name { get; set; } public string Email { get; set; } }
This is as simple as it gets. When the created hook on the Vue side sends a request to this address, the C# method executes, returning the users list in JSON format. Vue then processes this JSON data. The created hook is perfect to fetch data during initial component setup. Sometimes, you can also choose to fetch data in mounted, especially if DOM interactions are involved, but generally, created is more efficient because it runs before DOM manipulation. I think this is the best approach.
So, when do we use the mounted hook? If you’re using a chart library that draws on a DOM element, or if you’re setting focus on a modal right after it opens, this is where mounted is useful. It ensures the DOM elements are available for your scripts. I remember a mistake I made in a project once: I fetched data in created but tried to manipulate the DOM before it was ready. Naturally, it didn’t work, because the DOM wasn’t available yet. Luckily, we fixed it quickly, but it was a good lesson. That day, I learned my lesson the hard way 🙂
In conclusion, Vue.js’s created and mounted lifecycle hooks are vital for understanding the component lifecycle and executing appropriate actions at the right time. Use created for data fetching and preparation, and mounted for DOM-related tasks. Properly leveraging these hooks allows you to write cleaner, more performant code. The rest is up to your creativity. If you want to learn more about this, check out Vue.js’s official documentation on Vue.js Lifecycle Hooks. You’ll find numerous examples there.