(四)VUE生命周期

最新推荐文章于 2022-08-19 16:24:09 发布

lyj_010

最新推荐文章于 2022-08-19 16:24:09 发布

阅读量537

点赞数 2

分类专栏： Vue.js学习文章标签： VUE生命周期

本文链接：https://blog.csdn.net/lyj_010/article/details/103076226

版权

Vue.js学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

　　Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，即 Vue 实例从创建到销毁的过程。同时，在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
Vue生命周期

创建阶段：
- beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化 data 和 methods 等属性。
- created：实例已经在内存中初始化完成，此时，data 和 methods 等属性已经初始化完成，但还没有开始编译模板。
- beforeMount：此时，已经完成了模板的编译，但是还没有挂载到页面中。
- mounted：此时，已经将编译好的模板挂载到了页面中指定的容器中。
运行阶段：
- beforeUpdate：页面状态更新之前执行，此时，Vue实例属性中的状态值是最新的，但是界面上显示的数据还是旧值，因为此时还没有开始重新渲染DOM结点。
- updated：页面更新完毕之后调用，此时Vue实例的属性的状态值与页面上显示的数据完成同步，界面重新渲染完成。
销毁阶段：
- beforeDestroy：Vue实例销毁前调用，此时，实例仍然完全可用。
- destroyed：Vue实例销毁后调用，此时，Vue实例指示的所有东西都会解除绑定，所有的事件监听器都会被移除，所有的子实例也会被销毁。

　　示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../vue.min.js"></script>
</head>
<body>
    <div id="app">
        <p id="app_p">{{ msg }}</p>

        <!-- 更新msg -->
        <input type="button" value="Change msg" @click="msg = 'no'">
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "ok"
            },
            beforeCreate: function(){
                // undefined
                console.log("beforeCreate()--msg:" + this.msg)  
            },
            created: function(){
                // ok
                console.log("created()--msg:" + this.msg)   
            },
            beforeMount: function(){
                // {{ msg }}
                console.log("beforeMount()--" + document.getElementById("app_p").innerText)
            },
            mounted: function(){
                // ok
                console.log("mounted()--" + document.getElementById("app_p").innerText)
            },
            beforeUpdate: function(){
                // ok
                console.log("beforeUpdate()--" + document.getElementById("app_p").innerText)
            },
            updated: function(){
                // no
                console.log("updated()--" + document.getElementById("app_p").innerText)
            }
        })
    </script>
</body>
</html>