The use of mounted life cycle function in Vue documentation

Vue is a popular JavaScript framework that is widely used to build single-page applications and dynamic web pages. The Vue framework provides many life cycle functions, one of which is a very important function is the mounted function. In this article, we will explore the use of mounted lifecycle functions in Vue documentation.

The mounted life cycle function is the execution function of the Vue instance after the mounting is completed. In mounted, we have access to the rendered DOM elements and can perform any necessary operations on them. Specifically, the mounted lifecycle function will be called immediately after the Vue instance is initialized, which means that the instance is ready, that is, the DOM element has been rendered. This function will only be called once.

The mounted life cycle function is usually used in the following scenarios:

1. Get element objects, node objects or initialize some plug-ins in third-party libraries

In In the mounted function, you can obtain the element object or node object and perform any necessary operations on it. For example, obtain a reference to a specific element through the querySelector method, and request data asynchronously through ajax.

<template>
  <div id="app">
  </div>
</template>

<script>
export default {
  mounted(){
    const app = document.querySelector("#app");  // 获取带有id="app"的DOM元素
    console.log(app);  
  }
}
</script>

You can also initialize third-party libraries or plug-ins in mounted. For example, initialize plug-ins Vue-Router, Vue-i18n, etc. in the life cycle function.

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter); // VueRouter插件初始化

new Vue({
  router: new VueRouter({ .... }),
  ...
  mounted(){ /* 插件初始化 */ } 
})

2. Send an Ajax request to the server, obtain the data and update the data in Vue

In the mounted life cycle function, we can send an Ajax request to the server by using an instance of Vue Send an Ajax request and update our data attribute.

import axios from 'axios';

export default {
    data(){
        return{
            posts: []
        }
    },
    mounted(){
        axios.get('https://jsonplaceholder.typicode.com/todos').then(response => {
            this.posts = response.data;  // 获取远程JSON数据并更新组件的Data
        });    
    }
}

The above example requests todo-list data from the remote server and updates the data object in Vue. In this way, the data-related content in the component will be displayed smoothly.

3. Operation on DOM

The mounted life cycle function can also be used to perform necessary operations on the DOM after the page is loaded. For example, after the page is loaded, scroll to a certain position of the element; after the button is clicked, focus on a certain text box.

export default {
    mounted(){
        const targetDiv = document.getElementById('scroll-to-this-div');
        window.scrollTo(0, targetDiv.offsetTop);  // 点击'滚动到此'按键后，将窗口滚动到'div'元素的顶部
    }
}

The mounted life cycle function allows developers to make necessary modifications or operations to the DOM that has been presented to the user under Vue’s life cycle control, thus effectively enhancing the user experience and interface interactivity.

Conclusion

This article mainly introduces the use of the mounted life cycle function in the Vue document. Just like having found an open sea, developers can freely manipulate and modify the DOM in the mounted function. Of course, we cannot forget the philosophy of the Vue framework: it is important to solve problems in Vue documents with as little cost as possible, and to constrain the use of life cycles and other hook functions. Although other life cycle functions in Vue are not executed behind mounted, they allow developers to perfectly control the life cycle of the entire page just like they control Time-Machine.

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