Vue.js (4) Learn lifecycle hooks

The test created code is as follows: see the rest of the diagram and the table below

<! DOCTYPEhtml>
<html>

<head>

    <meta name="viewport" content="Initial - scale = 1.0, the maximum - scale = 1, the user - scalable = no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="test1">
        <p>{{ message }}</p>
    </div>
</body>

</html>
<script>
    var test1 = new Vue({
        el: '#test1'.data: {
            message: 'value'
        },
        created: function () {
            this.message = "Assign after creation";
            console.log('Output:' + this.message)
        }
    })

</script>
Copy the code

Photo introduction: Source:Let me jump

(Text introduction is at the back of the picture)

The name of the introduce
beforeCreate Before creating
created After creation
beforeMount Before loading
mounted After loading (usually ajax)
beforeUpdate Pre-update state (triggered before rerendering)
updated After the update
beforeDestroy Before destruction
destroyed After the destruction of