• VUE2生命周期

    原理

    组件挂载、组件更新和组件销毁时相应方法的执行时机。
    每个Vue实例在被创建之前都要经过一系列的初始化过程，这个过程就是vue的生命周期。
    在这里插入图片描述

    可以看到在vue整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出所有的钩子函数，然后我们再一一详解：

    • beforeCreate：创建实例之前执行的钩子事件
    • created：实例创建完成后执行的钩子
    • beforeMount
    • mounted
    • beforeUpdate
    • updated
    • beforeDestroy
    • destroyed
      vue1.0与2.0的生命周期
      在这里插入图片描述

    beforeCreate -> use setup()
    created -> use setup()
    beforeMount -> onBeforeMount
    mounted -> onMounted
    beforeUpdate -> onBeforeUpdate
    updated -> onUpdated
    beforeDestroy -> onBeforeUnmount
    destroyed -> onUnmounted
    errorCaptured -> onErrorCaptured

    示例：

    创建文件Life.vue，代码如下：

    <!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>生命周期</title>
    </head>
    <body>
        <div id="app">
            <h2>{{msg}}</h2>
            <button v-on:click="setMsg">改变msg</button>
        </div>
        <script src="js/vue.js"></script>
        <script>
            let vm = new Vue({
                el: "#app",
                data: {
                    msg: "生命周期"
                },
                methods: {
                    setMsg: function () {
                        this.msg = '改变后的数据';
                    }
                },
                beforeCreate() {
                    console.log("实例创建之前");
                },
                created() {
                    console.log("实例创建完成");
                },
                beforeMount() {
                    console.log("模板编译之前")
                },
                mounted() {
                    console.log("模板编译完成")
                },
                beforeUpdate() {
                    console.log("数据更新之前");
                },
                updated() {
                    console.log("数据更新完毕");
                },
                beforeDestroy() {
                    console.log("实例销毁之前");
                },
                destroyed() {
                    console.log("实例销毁完成");
                }
            });
        </script>
    </body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51

    运行后打开console可以看到打印出来内容如下:
    在这里插入图片描述

    点击按钮之前
    在这里插入图片描述

    点击按钮之后

  • 相关阅读:
    CAD二次开发（9）- CAD中对象的实时选择
    session与JWT认证
    mac电脑卸载LVSecurityAgent
    算法通关村第二关|白银|链表反转拓展【持续更新】
    网络个各种协议
    一文了解“期刊”、“JCR分区”、“中科院分区”
    Spring MVC 4.2.4 RELEASE 中文文档,力荐
    Python并发编程：多线程与多进程实战
    vue权限控制的想法
    百度ERNIE系列预训练语言模型浅析(2)-ERNIE2.0
  • 原文地址：https://blog.csdn.net/lianghecai52171314/article/details/125612273