（课程笔记，非原创）

图例

代码例

<div id="app">
    <input type="button" value="修改msg" @click="msg='No'">
    <h3 id="h3">{{ msg }}</h3>
</div>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
            el: '#app',
            data: {
                msg: 'ok'
            },
            methods: {
                show() {
                    console.log('执行了show方法')
                }
            },

beforeCreated
第一个生命周期函数
表示实例完全被创建出来之前，会执行它
此时data 和 methods 中的 数据都还没有没初始化

beforeCreate() {
    console.log(this.msg) //获取不到
    this.show() //获取不到
}

created
第二个生命周期函数
data 和 methods 都已经被初始化好了
如果要调用 methods 中的方法，或者操作 data 中的数据，最早只能在 created 中操作

created() { 
    console.log(this.msg) // ok
    this.show() //执行了show方法
},

beforeMount
第三个生命周期函数
表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中
如果要调用 methods 中的方法，或者操作 data 中的数据，最早只能在 created 中操作
执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串

beforeMount() { 
    console.log(document.getElementById('h3').innerText) // {{msg}}
},

mounted
第四个生命周期函数
表示内存中的模板已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动

mounted() { 
    console.log(document.getElementById('h3').innerText) // ok
},

beforeUpdate
界面没被更新，但是数据已更新

 beforeUpdate() { 
    console.log(document.getElementById('h3').innerText) // ok
    console.log('data 中的 msg 数据是：' + this.msg) //No
},

updated
界面没被更新，但是数据已更新
事件执行的时候，页面和 data 数据已经保持同步了，都是最新的

updated() { 
    console.log(document.getElementById('h3').innerText) // No
    console.log('data 中的 msg 数据是：' + this.msg) //No
},