开发者学堂课程【Vue.js 入门与实战：生命周期函数-组件创建期间的4个钩子函数】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8155
生命周期函数-组件创建期间的4个钩子函数
目录
一、Vue实例的生命周期
二、Vue实例
一、Vue 实例的生命周期
1.Vue 实例的生命周期
（http：//cn.vuejs.org/v2/guide/instance.html#生命周期实例）从 Vue 实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。
2.生命周期钩子：
（http：//cn.vuejs.org/v2/api# 选项-生命周期钩子）是生命周期事件的别名。
生命周期钩子=生命周期函数=生命周期事件
3.主要的生命周期函数分类：
创建期间的生命周期函数：
beforeCreatecreatedbeforeMount mounted.
运行期间的生命周期函数：
beforeUpdateupdated.
销毁期间的生命周期函数：
beforeDestroydestroyed.
二、Vue实例：
在上图中，
1.New vue() :
varvm=new vue({}) 表示开始创建一个 Vue 的实例对象
2. Init events&Lifecycle:
代表初始化了一个空的实例对象，这个对象身上，只有默认的一些生命周期函数和默认的事件，其他的东西都未创建。此时会进如beforecreate() 这个第一个生命周期函数。
代码实例：（生命周期函数演示）
Var vm = new Vue{{
el:’#app’
data:{
msg:’ok’
}
Methods:{
show(){
console.log(‘执行了 show 方法’)
}
}
Beforecreate(){
//这是遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它。
console.log(this.msg)
这样写在语法层面上，没有任何问题，但此时如果右键游览检查，会显示：undefined
在这个生命周期函数执行时，无法拿到 date 数据，这证明 date 的数据还没有初始化
//console.log(this.msg) this.show()
此时如果右键游览检查，会显示： this.show is not a fuction
此时证明 methods 的数据还没有初始化
所以我们可以得出结论，注意：在 befozeCreate 生命周期函数执行的时，data 和 methods 中的数据都还没有没初始化。
3. Initinjections & reactivity：
这步之后 methods 里的方法和 data里的数据已经被初始化。执行后会进入到created() 这个第二个生命周期函数
代码实例：（生命周期函数演示）
created()
console.log(this.msg)
this.show()
此时如果右键游览检查，会显示：ok，执行了 show 方法
Created(){//这是遇到的第二个生命周期函数在 created 中，data 和 methdas 都已经被初始化好。如果要调用 methods 中的方法，或者操作 data 中的数据，最早只能在 created 中操作。
4.分支流程判断
接下来进入分支判断流程（流程图中菱形代表分支流程，矩形代表相关操作）
判断有没有“el”这个属性，el代表：el:’#app’
目前没有，继续走 no 的流程，编译 el 的 outerHTML 当做模版，把 div 里面所有的内容，编译成模块进而执行操作。这里表示 Vue开始编辑模板。把 Vue 代码中的那些指令进行执行，最终在内存中生成一个编译好的最终模板字符串。然后，把这个模板字符串，渲染为内存中的 DOM 。此时，只是在内存中，渲染好了模板，并没有把模板挂载到真正的页面中去。
5.beforeMount ()第三个生命周期函数
beforeMount(){
//这是遇到的第三个生命周期函数，此函数执行时，表示模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中，此时页面还是旧的。
代码实例：（生命周期函数演示）
{{ msg }}
Console.log.(document. getElementById(‘h3’).innerText)
此时如果右键游览检查，会显示：{{ msg }}，并不是真实的 ok 内容。这说明：
//在 beforeMount 执行时，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符。
6. Create vm $el and replace “el”with it
这一步表示将内存中编译好的模板，真实的替换到浏览器的页面中去。
7. mounted()
mounted(){
//这是遇到的第四个生命周期函数，表示内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面。
代码实例：（生命周期函数演示）
mounted(){Console.log.(document. getElementById(‘h3’).innerText)
此时如果右键游览检查， ok 内容。
注意：mounted 是实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作，这个实例在内存中保持不变。
当执行到 mounted 表示组件已经创建完成。四个钩子函数中前两个是一组，是实例刚被初始化，后两个是一组，是模板将要被挂载和已经被挂载完成。
