Detailed explanation of mounted life cycle function in Vue

Detailed explanation of the mounted life cycle function in Vue

In Vue, the life cycle function of the component is one of the very important parts. One of the important life cycle functions is mounted. This life cycle function will be called after the Vue instance is created, that is, after the component is mounted on the page. Let's discuss the use and role of the mounted life cycle function in detail.

The role of the mounted life cycle function
The mounted life cycle function is called after the component is mounted on the page. It indicates that the component has been initialized and the template has been rendered into a real DOM. Therefore, the real DOM can be accessed and manipulated in the mounted life cycle function, and some initialization operations can be performed.

Specific application scenarios

1. Initialize data that requires asynchronous requests
   In the mounted life cycle function, we can perform some data initialization operations that require asynchronous requests. For example, get data from the backend interface and update the component's data. For example:

mounted() {
  axios.get('/api/data')
    .then(response => {
      this.data = response.data;
    })
    .catch(error => {
      console.error(error);
    });
}

In the above example, we send an asynchronous request through the axios library, and then update the data returned by the backend to the data attribute of the component. In this way, we can ensure that the data has been obtained when the component is initialized.

2. Listening to DOM events
   In the mounted life cycle function, we can also monitor and operate DOM events. For example, we can add a click event to a button or a keyboard event to an input box. For example:

mounted() {
  const button = document.querySelector('.my-button');
  button.addEventListener('click', this.handleClick);
},
methods: {
  handleClick() {
    console.log('按钮被点击！');
  }
}

In the above example, we selected a button element with class 'my-button' through querySelector in the mounted life cycle function, and added a click event listener for it . When the button is clicked, the handleClick method defined in the component will be called, and finally the console output 'Button was clicked! '.

3. Initialize third-party plug-ins or components
   In the mounted life cycle function, we can also initialize some operations that require the introduction of third-party plug-ins or components. For example, we can use jQuery to initialize an element within the life cycle function, or use some other UI libraries to initialize a component. For example:

mounted() {
  $('.slider').slider();
  // 或者
  const myComponent = new MyComponent();
  myComponent.init();
}

In the above example, we use jQuery's .slider() method to initialize the element with class 'slider' into a slider, or we use the init method of the custom component MyComponent Perform initialization operations.

Summary
The mounted life cycle function plays a very important role in the Vue component. It marks that the component has been initialized and can perform some operations related to DOM, asynchronous requests, third-party libraries, etc. By flexibly using the mounted lifecycle function, we can better control the initialization process of the component and provide users with a better interactive experience.

I hope this article can be helpful to the use of the mounted life cycle function in Vue, allowing you to operate and control your Vue components more flexibly.

The above is the detailed content of Detailed explanation of mounted life cycle function in Vue. For more information, please follow other related articles on the PHP Chinese website!