[TOC]

Introduction to Vue life cycle

The meaning of the lifecycle: There are always various events between Vue instance creation, running, and destruction, which are collectively referred to as the lifecycle

Life cycle hooks == life cycle functions == life cycle events

1.1 Classification of life cycle

The Vue life cycle will be studied from these three phases in turn

1.2 Creation Phase

  • BeforeCreate: The instance is just created in memory. Data and methods are not initialized yet, and only some built-in life cycle functions are included
  • Created: Instances are created in memory, data and methods are created
  • BeforeMount: The template is compiled at this point, but not yet rendered into the interface
  • Mounted: The template is displayed in the browser. The template is ready to run

Create phase life cycle Demo:

  • We can do this by adding it to our codedebuggerKeyword to achieve breakpoint debugging functionality for eachdebuggerIt’s a break point
  • After adding breakpoint debugging, we can view data changes for each lifecycle phase and view browser rendering times
  • You can debug the call stack through breakpoint call process, to learn Vue source code

      
<html>

<head>
    <meta charset="utf-8">
    <title>vue-Demo</title>
    <script src="https://unpkg.com/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <p>{{message}}</p>
    </div>
    <script type="text/javascript">
        var v = new Vue( {
            el: "#app".data: {
                message: "hello world!"
            },
            // If there is no template, the element in el is treated as template, and if there is template, the DOM in EL is overwritten
            template: "<div id='app'><h1>{{ message }}</h1></div>".// The Vue instance has just been initialized; data and methods have no values yet
            beforeCreate() {
                console.log( '1. beforeCreate=====' + this.message )
                debugger
            },
            // Vue instance created, data and methods can be used
            created() {
                console.log( '2. created=====' + this.message )
                debugger
            },
            // The Dom in memory has been rendered and is not yet displayed in the browser
            beforeMount() {
                console.log( '3. beforeMount=====' + this.message )
                debugger
            },
            // The template has been rendered to the browser, and the creation phase is complete
            mounted() {
                debugger
                console.log( '4. mounted=====' + this.message )
            }
        } )
    </script>
</body>

</html>
Copy the code

Running results:

1.3 Operation Phase

  • BeforeUpdate: The data in the interface is old, but the data has been updated. The page has not been synchronized with the data
  • Intermediate processing process (non-life cycle, easy to learn abstract intermediate processing process) : first according to the data in the data, render a new DOM in memory, when the new DOM tree is updated, will re-render to the real interface, so as to achieve the conversion from the data layer (Model) – “view layer (view)
  • Updated: The page is rerendered and the data in the page is consistent with data

Running stage Demo:

  • Note: code copy can be used directly, pay attention to the two breakpoints stay where message changes, as well as page data changes

      
<html>

<head>
    <meta charset="utf-8">
    <title>vue-Demo</title>
    <script src="https://unpkg.com/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <p>{{message}}</p>
    </div>
    <script type="text/javascript">
        var vm = new Vue( {
            el: "#app".data: {
                message: "hello world!"
            },
            // If there is no template, the element in el is treated as template, and if there is template, the DOM in EL is overwritten
            template: "<div id='app'><h1>{{ message }}</h1></div>",
            beforeCreate() {
                console.log( '1. beforeCreate=====' + this.message )
            },
            created() {
                console.log( '2. created=====' + this.message )
            },
            beforeMount() {
                console.log( '3. beforeMount=====' + this.message )
            },
            mounted() {
                console.log( '4. mounted=====' + this.message )
            },
            beforeUpdate () {
                console.log("Message has been updated at this point, but the data on the browser page has not changed.".this.message)
                // After modifying data, add breakpoint, data on page is inconsistent with current message
                debugger
            },
            updated () {
                console.log("Update completed, page data has been updated")}})// Add a breakpoint before modifying the data
        debugger
        vm.message = 'Hello, running phase of the Vue life cycle'
    </script>
</body>

</html>
Copy the code

Running results:

1.4 Destruction Stage

  • BeforeDestroy: When this method is executed, the Vue life cycle is already in the destruction phase, but various data on the instance is still available
  • Destroyed: Components are destroyed, Vue instance is destroyed, and any data in Vue is not available

Life cycle analysis diagram