Vue生命周期个人理解图解
SunSeekerX / 2018-10-23 / Coding / 阅读量 619

lifecycle.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/vue-2.5.17.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="button" value="修改msg" @click="msg='no'"/>
            <h3 id="h3">{{msg}}</h3>
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    msg: "ok"
                },
                methods: {
                    show(){
                        console.log("执行了show方法")
                    }
                },
                beforeCreate(){
                    //表示实例完全被创建出来执行,data和methods中的属性和方法都还未被初始化
                    //console.log(this.msg);
                },
                created(){
                    //在created中,data和methods中的属性和方法初始化好了
                    //console.log(this.msg);
                    //this.show();
                },
                beforeMount(){
                    //表示模板已经编译完成,并未挂载到页面中去,拿到的只是之前写的一些模板字符串
                    //console.log(document.getElementById("h3").innerText);
                },
                mounted(){
                    //表示模板已经挂载完成,用户可以查看挂载的数据,当执行完mounted表示实例已经完全创建好了,如果没有其他的操作,实例就会停留在内存中
                    //console.log(document.getElementById("h3").innerText);
                },
                beforeUpdate(){
                    //表示数据更新了,界面还没有更新的时候触发
                    //console.log("界面上元素的内容:"+document.getElementById("h3").innerText);
                    //console.log("data的内容:"+this.msg);
                },
                updated(){
                    //页面和数据同步了
                    console.log("界面上元素的内容:"+document.getElementById("h3").innerText);
                    console.log("data的内容:"+this.msg);
                }
            });
        </script>
    </body>
</html>