vue框架vue实例生命周期

代码块

 <div id="app">
        <h3 id="h3">{{msg}}</h3>
        <!-- 直接赋值，字符串用''号，可能是因为干扰 -->
        <input type="button" value="修改msg" @click="msg='我们不好'">
    </div>

var vm = new Vue({ //创建一个vue实例
            el: "#app ", //控制页面区域
            data: { //存放要显示的数据 mvvm里的model。
                msg: "大家好 "
            },
            methods: {
                show() {
                    alert("akk ")
                }
            },
            // 1、组件创建阶段的生命周期函数，一共4个
            beforeCreate() { //第一个生命周期函数，表示实例完全被创建出来之前会执行的内容。
                // console.log(this.msg);
                // this.show();
                // 在beforeCreate函数中，data和methods的数据未被初始化
            },
            created() { //第二个生命周期函数，data和methods数据已经被初始化，可以使用，最早使用数据
                // console.log(this.msg);
                // this.show();
            },
            beforeMount() { //第三个生命周期函数，表示vue实例已经编译好了，在内存中，但是还未挂载到页面中，也就是页面什么都没有
                // console.log(document.getElementById("h3 ").innerText);
                //可以看见控制台中显示的是{{msg}},而页面显示的是大家好，表示beforeMount拿到的是挂载之前的内容
            },
            mounted() { //第四个生命周期函数，表示内存中编译好的实例已经挂载到页面上。 mounted是实例创建期间的最后一个生命周期函数。最早操作dom元素
                // console.log(document.getElementById("h3 ").innerText);
            },
            // 2、组件运行阶段的生命周期函数，一共两个。
            beforeUpdate() { //表示页面还没有被更新，但是内存中的数据被更新了,页面还没有放置
                // console.log('界面上的元素是它' + document.getElementById("h3").innerText);//大家好
                // console.log('data中的数据是' + this.msg)//我们不好
                // 内存中的数据已经更新，但是在页面中还没有同步，虽然操作时页面显示的是我们不好，但那时执行完后的。
            },
            updated() { //页面被更新，数据也被更新，dom元素可以被操作
                // console.log('界面上的元素是它' + document.getElementById("h3").innerText); //我们不好
                // console.log('data中的数据是' + this.msg) //我们不好
            },
            // 3、vue实例销毁阶段
            beforeDestroy() { //销毁准备阶段，但是还没有销毁，还可以使用

            },
            destroyed() { //销毁完成后，全部不可使用

            }
        })

总结
1、至少要到created()这个生命周期函数，data和methods中的数据才可以被使用。
2、至少要到mounted()这个生命周期函数，才可以获得挂载在页面中的数据。
3、beforeUpdate()中更新数据尚在内存中，要到updated()后,才可以获得挂载在页面中的更新数据。