开发者学堂课程【React 入门与实战：拓展-Vue 中实例的生命周期1（2）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/585/detail/8120
拓展-Vue 中实例的生命周期1（2）
二、Vue 中实例的生命周期的各过程任务详解
生命周期： vue 实例从创建到销毁的过程。
生命周期钩子： 生命周期事件的别名
主要的生命周期函数分类：
1.创建期间的生命周期函数：
（1）beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好data 和 methods 属性
（2）created：实例已经完成了模板的编译，但是还没有挂载到页面中
（3）beforeMount：此时已经完成了模板的翻译，但是还有完全挂载到页面中
（4）mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
2.运行期间的生命周期函数：
（1）beforeUpdate：状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染 DOM 节点
（2）updated：实例更新完毕之后调用次函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了
3.销毁期间的生命周期函数：
（1）beforeDestroy：实例销毁之前调用，在这一步，实例仍然完全可用
当执行 beforeDestroy 钩子函数的时候，Vue 实例就已经从运行阶段进入到了销毁阶段；当执行 beforeDestroy 的时候，实例身上所有的 data 和所有的 methods， 以及 过滤器、指令、都处于可用状态，此时，还没有真正执行销毁的过程
（2）destroyed：
Vue 实例销毁后调用。调用后，vue 实例 指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也会被销毁。
1、new Vue（）：
1）这是 new 了一个 Vue 的实例对象;
2）此时，就会进入组件的创建过程;
2、Lnit Events &Lifecycle：
1）初始化组件的事件和生命周期函数;
2）当执行完这一步之后，组件的生命周期函数，就已经全部初始化好了，等待着依次去调用;
3）表示，刚初始化了一个 Vue 空的实例对象，这个对象只有默认的一些生命周期函数和默认的事件，其他东西都未创建
注意：在 beforeCreate 生命周期函数执行时，data 和 methods 中的数据都还没有初始化
3、beforeCreat:
1）这是组件创建阶段的，遇到的第一个生命周期函数;
2）此时，组件的 data 和 methods 以及页面 DOM 结构，都还没有初始化;
3）所以此阶段，什么操作都无法完成;
//第一个生命周期函数;
beforeCreate() {
console.log(this.list)
this.add()
Console.log(this.$el)
}
4、Lnit injections & reactivity：
1）这个阶段中，正在出初始化,data 和 methods 中的数据以及方法；
//在 created 中，data 和 methods 都已经被初始化好了
//如果要调用 methods 中的方法，或者操作data中的数据，最早，只能在 created 中操作
created() {
console.log(this.list)
this.add()
console.log(this.$el)
}
5、created:
注意:这个组件创建阶段第二个生命周期函数，此时，组件的 data 和 methods 已经可用了;但是页面还没有渲染出来;在这个生命周期函数中，经常会发起 Ajax 请求;
1)整个过程表示 Vue 开始编辑模板，
2)把 Vue 代码中的那些指令进行执行，最终，在内存中生成一个编译好的最终模板字符串
3)然后，把这个模板字符串，渲染为内存中的 DOM 此时，只是在内存中，渲染好了模板，并没有把模板挂载到真正的页面中去;
4)得到 data 上的数据,并且解析执行模板结构中的指令;当所有搭令被解析完毕，那么模板页面就被渲染到内存中了;
5）当模板编译完成，模板页面还没有挂载到页面上，只是存在于内存中;用户看不到页面;
6、beforeMount:
1）当模板在内存中编译完成，会立即执行实例创建阶段的第三个生命周期函数;
2）这个函数叫做 beforeMount ，此时内存中的模板结构，还没有真正渲染到页面上;此时，页面上看不到真实的数据;
此时，用户看到的只是一个模板页面;
7、Create vm.$eland replace"el" with it:
正在把内存中渲染好的模板结构，替换到页面上;
8、motunted:
1）这个 mounted 是组件创建阶段最后的一个生命周期函数;此时，页面已经真正的渲染好了，用户已经可以看到真实的页面数据了;
2）当这个生命周期函数执行完，组件，就离开了创建阶段。进入到了运行中的阶段;
3）如果使用了第三方的 U 插件，而且这个插件还需要被初始化，那么，必须在 mounted 中来初始化插件;
三、示例及详细解释：
<template>
<div id="app">
<input type="button" value="修改msg" @click="msg='No'">
<h3 id="h3">
{{msg}}
</h3>
</div>
</template>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: 'ok'
},
methods: {
show(){
console.log("执行了show方法")
}
},
beforeCreate(){
//这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
console.log(this.msg)
this.show()
// 注意：在 beforeCreate 生命周期函数执行的时候，data 和 methods 中 数据都还没有初始化
},
created(){
// 这是遇到的第二个生命周期函数
console.log(this.msg)
this.show()
// 在 created 中， data 和 methods 都已经初始化好了
// 如果要调用 methods 中的方法， 或者操作 data 中的数库， 最早，只能在 created
},
beforeMount(){
// 这是遇到的第3这是遇到的第
console.log(document.getElementById('h3').innerText)
// 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
},
mounted(){
// 这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面
console.log(document.getElementById('h3').innerText)
// 注意：mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其他操作的话，这个实例，就静静的躺在内存中，一动不动（组件已经脱离了创建阶段，进入到运行阶段）
// 如果要通过某些插件操作页面上的 DOM 节点，最早要在 mounted 中进行
},
// 接下来是运行中的两个事件
beforeUpdate(){
// 这时候，表示 我们的界面还没有被更新（数据更新了）
console.log('界面上元素的内容：' + document.getElementById('h3').innerText) // ok
console.log('data 中的 msg 数据是：' + this.msg) // No
// 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和最新的数据保持同步
}
})
</script>
