LifeCycle生命周期2

重要提醒:mounted和created

一个是created在before内存编辑完后转到页面挂载,
一个是最早操作DOM要到mounted到操作
只要脱离了mounted就表示组件创建完毕,后续是运行阶段

运行阶段

可以监听其运行.png
0到无数次,when data changes
image.png
image.png
image.png
this is why?为啥没被执行,组件被创建完之后,你这个组件一直没改变当然不执行 ==>参看:7分14s _P32D2_17
image.png
image.png
注意
得出结论当执行beforeUpdate()的时候页面中的数据是旧的,data中的数据是新的,并未保持同步
改变前:
image.png
改变后:
image.png

       beforeUpdate() {
                var neirong = document.getElementById("h3").innerText
                console.log("界面上元素的内容是:" + neirong); //看看这俩同步不同步?
                console.log("改变后的内容是:" + this.msg);
                //得出结论当执行beforeUpdate()的时候页面中的数据是旧的,data中的数据是新的,并未保持同步
            }

当更改了data中的数据,我们首先会进入内存中dom树,然后再更新页面中去

image.png
image.png
image.png

 <div id="app">
        <input type="button" value="点击改变" @click="msg='no'">
        <h3 id="h3"> {{msg}}</h3>
    </div>

    <script>
        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);
                    //最后一个生命周期函数 两两一组,实例完全被创建好了
            },
            beforeUpdate() {
                var neirong = document.getElementById("h3").innerText
                    // console.log("界面上元素的内容是:" + neirong); //看看这俩同步不同步?
                    // console.log("改变后的内容是:" + this.msg);
                    //得出结论当执行beforeUpdate()的时候页面中的数据是旧的,data中的数据是新的,并未保持同步
            },
            updated() {
                var neirong = document.getElementById("h3").innerText
                console.log("界面上元素的内容是:" + neirong); //看看这俩还同步不同步?
                console.log("改变后的内容是:" + this.msg);
                // 这时候页面和data中的数据已经同步了
            }

        });
    </script>

销毁阶段=>还是可用阶段=>不可用阶段

image.png