Vue实例生命周期

作者: 小丘啦啦啦 | 来源:发表于2019-03-19 19:43 被阅读0次

Vue.js入门（二）：生命周期
vue学习第二课之vue的生命周期
vue生命周期
10、Vue_生命周期
Vue生命周期
Vue
一、vue基础知识点
前端之路-VUE面试题
VUE实例生命周期钩子
【Vue】基础（生命周期 & 常用指令）

一、概念
从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。
二、生命周期函数
生命周期钩子，即生命周期钩子函数，生命周期事件。

三、实际测试

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h3 id="h3">{{msg}}</h3>
            <input type="button" value="修改" @click="msg='no'"/>
        </div>

        <script>
            const vm = new Vue({
                el: "#app",
                data: {
                    msg: 'ok'
                },
                methods: {
                    show() {
                        console.log('执行了show方法');
                    }
                },
                beforeCreate() { //实例还未创建出来,data和methods都还没被初始化
                    //console.log(this.msg);   //undefined
                    //this.show();   //TypeError: this.show is not a function
                },
                created() { //实例已创建好,data和methods已初始化,可以开始调用
                    console.log(this.msg); //ok
                    this.show(); //执行了show方法
                },
                beforeMount() { //模板已在内存中编辑完成,但是尚未渲染到页面中去
                    console.log(document.getElementById('h3').innerText); //{{msg}}
                    //只在内存中,还未渲染页面,页面上内容还未被替换,还是html中原来的模板字符串
                },
                mounted() { //内存中的模板已经渲染到页面,可在页面上看到渲染好的页面了
                    console.log(document.getElementById('h3').innerText); //ok
                },
                //执行完mounted表示实例已完全创建好,无其他操作,实例就静静的在内存中

                beforeUpdate() { //数据跟新了,界面更新前,在虚拟dom渲染
                    console.log(this.msg); //no
                    console.log(document.getElementById('h3').innerText); //ok
                    //数据改变了但页面还没被跟新
                },
                updated() { //页面和data数据保持同步了
                    console.log(this.msg); //ok
                    console.log(document.getElementById('h3').innerText); //ok
                }
            });
        </script>
    </body>
</html>