从案例中分析VUE的生命周期

案例的页面其实很简单：
有个按钮 点击会改变msg的值 目的是触发部分生命周期
然后有个显示msg的h3标签

<div id="app">
	<input type="button" value="Click me" @click="msg='Hi'">
	<h3 id="h3">{{msg}}</h3>
</div>

<script>
    var vm=new Vue({
       el:'#app',
       data:{
           msg:"Hello"
       },
       methods:{
           say()
           {
               console.log("Hello World");
           }
       },
       // 第一个被执行的生命周期函数
       // 在实例被完全创建出来之前会执行它
       beforeCreate()
       {
           console.log(this.msg); // undefined
           this.say(); // 报错 未找到该方法

           // 在beforeCreate生命周期函数执行的时候 data和methods中的数据都还未被初始化
       },

       // 第二个被执行的生命周期函数
       created()
       {
           console.log(this.msg); // Hello
           this.say(); // Hello World

           // 在created生命周期函数执行的时候 data和methods中的数据都已经被初始化好了
           // 若要操作data中的数据或是调用methods中的方法 最早只能在created中操作
       },

       // 第三个被执行的生命周期函数
       // 此时 模板已经编译完成了 但只是存在于内存中 尚未将模板渲染到页面中
       beforeMount()
       {
           console.log(document.getElementById("h3").innerText); // {{msg}}

           // 在beforeMount生命周期函数执行的时候 内存中编译好的元素尚未被挂载到页面上
           // 因此 在页面上所显示的只是预先写好的模板字符串
       },

       // 第四个被执行的生命周期函数
       // 此时 内存中的模板已经真实挂载到了页面上
       // 用户可以看到渲染好的页面
       mounted()
       {
           console.log(document.getElementById("h3").innerText); // Hello

           // mounted是实例【创建】期间的最后一个生命周期函数
           // 当mounted被执行完 即代表该实例被完全创建好了 此时 若没有再进行其它操作 则该实例会一直存在于内存中
       },

       // ======开始运行中事件======
       // 在beforeUpdate生命周期函数执行的时候 此时 界面还没有被更新 但数据已经改变了
       beforeUpdate()
       {
           console.log(document.getElementById("h3").innerText); // Hello
           console.log(this.msg); // Hi

           // 当beforeUpdate的时候 页面的数据还是旧的 data的数据是新的
           // 此时页面的数据尚未和最新的数据保持同步
       },

       // 在updated生命周期执行的时候 页面和data的数据已经保持同步了 都是最新的数据
       updated()
       {
           console.log(document.getElementById("h3").innerText); // Hi
           console.log(this.msg); // Hi
       }
       // ======结束运行中事件======
    });
</script>