Vue -生命周期

从Vue实例创建、运行、销毁期间，总是伴随着各种各样的事件，这些事件统称为生命周期

生命周期钩子就是生命周期事件的别名而已，生命周期钩子=生命周期函数=生命周期事件

主要的生命周期分类：

❶ 创建期间的生命周期函数

　　beforeCreate：实例刚在内存中被创建出来，此时还没有初始化好data和methods属性

　　created：实例已经在内存中创建，data和methods也已创建，但此时还没开始编译模板（el指定的区域）

　　beforeMount：此时在内存中完成了模板的编译，但还没挂载到页面中

　　mounted：实例已初始化完毕，已将编译好的模板挂载到页面指定的容器中显示

 

❷ 运行期间的生命周期函数

　　beforeUpdate：状态更新之前执行此函数，此时data中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没开始重新渲染DOM节点

　　updated：实例更新完毕之后调用此函数，此时data中的状态值和界面上显示的数据都已完成了更新，界面已重新渲染好了。这两个事件会根据data的变化触发0到多次

 

❸ 销毁期间的生命周期函数

　　beforeDestroy：实例销毁前调用，在这一步，实例仍然可用

　　destroyed：实例销毁后调用，调用后实例指示的所有东西都会解绑，所有事件监听器会被移除，所有的子实例也会被销毁

//创建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就表示，实例已经被完全创建好了，
　　　　//此时如果没有其它操作的话，这个实例，就静静躺在内存中，一动不动
　　},


　　//接下来的是运行中的两个事件
　　beforeUpdate() { //这时候表示我们的界面还没有被更(数据被更新了吗?数据肯定被更新了)
　　　　console.log('data中的msg数据是：' + this.msg) */
　　　　//得出结论：当执行beforeUpdate的时候，页面中的显示的数据，还是旧的
　　　　//此时data数据是最新的，页面尚未和最新的数据保持同步
　　},
　　updated() {
　　　　console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
　　　　console.log('data 中的 msg 数据是：' + this.msg)
　　　　//updated事件执行的时候，页面和data数据已经保持同步了，都是最新的
　　}
});