Vue.js的核心学习笔记 - 第三章生命周期学习_vue.js第三章知识点汇总-CSDN博客

本文链接：https://blog.csdn.net/qq_33638188/article/details/123010446

Vue.js的核心学习笔记 - 第三章生命周期学习

前言
认识vue的生命周期
效果展示
- 代码实现
效果显示
结束语

前言

关于Vue的重要学习内容，生命周期钩子，我更愿意称为函数，在接下来我们来了解一下各种生命周期函数。

认识vue的生命周期

Vue的生命周期函数一共有：8 条生命周期函数，意味着在每一个状态下可以执行某样相关操作。
在这里插入图片描述

生命周期

beforeCreate (创建实例前)
created (创建实例)
beforeMount (载入前)
Mountd (载入)
beforeUpdate (属性修改前)
updated (修改)
beforeDestroy (实例销毁前)
destroyed (销毁)

效果展示

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue教程</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div class="weather">
            <table >
                <tr v-for="data in weather">
                    <td>{{data.city}}</td>
                    <td>{{data.centigrade}}</td>
                </tr>
            </table>
        </div>
        <div class="click_test">
            <div class="btn_test">
                <span>显示消息： {{msg}}</span>
                <button v-on:click="updateMsg()">点我改变上面显示消息。</button>
                <button v-on:click="destroyObject()">销毁实例。</button>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        commponents:{

        },
        data:{
            msg: "123",
            weather:[
                {city: "广州",centigrade: 30.0},
                {city: "深圳",centigrade: 30.0}
            ]
        },
        // 生命周期钩子
        created: function(){
            console.log("初始化完毕。");
        },
        beforeCreate: function(){
            console.log("在初始化前的提示消息，");
        },
        beforeMount: function(){
            console.log("在准备前插入。")
        },
        mounted: function(){
            console.log("准备工作提示消息。")
        },
        beforeUpdate: function(){
            console.log("在data数据修改前的消息。");
        },
        updated: function(){
            console.log("修改数据后提示的消息。")
        },
        beforeDestroy: function(){
            console.log("销毁前的消息。");
        },
        destroyed: function(){
            console.log("销毁。");
        },
        methods:{
            //定义方法改变msg
            updateMsg: function(){
                this.msg = "test";
            },
            //销毁
            destroyObject : function(){
                //销毁。
                this.$destroy();
            }
        }
    })
</script>
</html>