LifeCycle生命周期1 _12-25

详见视频:P31D2_16

created初始化好的时候

image.png
image.png
image.png

beforeCreate还没有被初始化的时候

image.png
image.png

created and beforeCreate附录代码:

    var vm = new Vue({
            el: '#app',
            data: {
                msg: "this a null for beforeCreated"
            },
            methods: {
                show() {
                    console.log("执行了show方法");
                }
            },
            beforeCreate() { //这是我们遇到的第一个生命周期函数,表示实例完全被创建出来之前,会执行它
                // console.log(this.msg);
                // ==>undefined

                // this.show()
                // 在beforeCreate生命周期函数执行的时候,methods和data数据和方法都还没被初始化
            },
            created() {
                console.log(this.msg);
                this.show()
            }

        });

模板编译但并没有渲染到html里面去等待beforeMount

image.png
image.png

18:00分==>在beforeMount执行的时候页面中的元素并未被替换,只是之前写的字符串,

image.png
Mounted用户可以看到渲染好的页面
image.png
image.png

最后

image.png

代码

    var vm = new Vue({
            el: '#app',
            data: {
                msg: "this a null for beforeCreated"
            },
            methods: {
                show() {
                    console.log("执行了show方法");
                }
            },
            beforeCreate() { //这是我们遇到的第一个生命周期函数,表示实例完全被创建出来之前,会执行它
                // console.log(this.msg);
                // ==>undefined

                // this.show()
                // 在beforeCreate生命周期函数执行的时候,methods和data数据和方法都还没被初始化
            },
            created() {
                // console.log(this.msg);
                // this.show()
            },
            beforeMount() {
                //第三个生命周期函数,表示模板在内存编辑完毕,但未渲染到页面中去
                var neirong = document.getElementById("h3").innerText
                    // console.log(neirong);
                    //在beforeMount执行的时候页面中的元素并未被替换,只是之前写的字符串,
            },
            mounted() {
                var neirong = document.getElementById("h3").innerText
                console.log(neirong);
                //最后一个生命周期函数 两两一组,实例完全被创建好了
            }

        });