Vue实例的生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。
生命周期钩子：就是生命周期事件的别名而已。
生命周期钩子 = 生命周期函数 = 生命周期事件。
根据上面这张图，我们把生命周期函数主要分为三类。
1、创建期间的生命周期函数
beforeCreate：实例刚在内存中被创建出来，还没有初始化好data和methods属性
created：实例已经在内存中创建ok了，此时data和methods属性都创建ok了，此时还没有开始编译模版。我们可以在这里进行ajax的请求
beforeMount：此时已经编译好模版了，但是还没有挂载在页面中
Mounted：此时，已经将编译好的模版挂载在页面指定的容器中显示。（mounted之后表示真实dom渲染完成，可以操作dom了）
举个栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<link rel="stylesheet" type="text/css" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--这个div区域就是MVVM中的view -->
<div id="app">
</div>
<script src="index.js"></script>
</body>
</html>new Vue({
el:'#app',
data:{
msg:'hello,vue!'
},
//这是第一个生命周期函数，表示实例完全创建出来之前，会执行它
beforeCreate:function () {
console.log('01 beforeCreate',this.msg);
//注意：在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有初始化
},
//这是第二个生命周期函数
created:function(){
console.log('02 created',this.msg);
//注意：如果要调用methods中的方法，或者操作data中的数据，最早只能在created中操作
},
//这是第三个生命周期函数，表示模版已经在内存中编辑完成了，但是尚未把模版渲染到页面中
beforeMount:function(){
console.log('03 beforeMount',this.msg);
//注意：在beforeMount执行的时候，页面中的元素，还没有真正替换过来，只是之前写的一些模版字符串
},
//这是第四个生命周期函数，表示内存中的模版已经挂载到了页面中，用户可以看到渲染好的页面了
mounted:function(){
console.log('04 mounted',this.msg);
//注意：mounted是实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了
//此时，如果没有其它操作的话，这个实例，就静静的躺在我们的内存中一动不动
}
})结果：
运行期间的生命周期函数
beforeUpdate：状态更新之前，执行此函数，此时data中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
updated：实例更新完毕之后调用此函数，此时，data中的状态值和数据都是更新之后的，界面已经被重新渲染好了
备注：数据发生变化时，会触发这两个方法
举个栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<link rel="stylesheet" type="text/css" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--这个div区域就是MVVM中的view -->
<div id="app">
<input type="button" value="修改flag" @click="myMethod">
<h3 id="h3">{{flag}}</h3>
</div>
<script src="index.js"></script>
</body>
</html>new Vue({
el:'#app',
data:{
msg:'hello,vue!',
flag:false
},
methods:{
myMethod:function () {
this.flag = true;
}
},
//接下来是运行的两个事件
//这时候，界面还没有被更新（但是数据更新了）
beforeUpdate(){
console.log('05 beforeUpdate',this.msg);
//结论：当执行beforeUpdated的时候，页面中的显示的数据还是旧的，此时data的数据是新的，页面尚未和最新的数据保持同步
console.log('界面上DOM元素显示的内容：'+ document.getElementById('h3').innerText)
console.log('data中的msg数据：' + this.flag)
},
updated(){
console.log('06 updated',this.msg);
//结论：updated事件执行的时候，页面和data数据已经保持同步，都是最新的
console.log('界面上DOM元素显示的内容：'+ document.getElementById('h3').innerText)
console.log('data中的msg数据：' + this.flag)
}
})
结果：
可以看出，
在执行beforeUpdate的时候，页面中的数据还是旧的，但此时data的数据是新的。
在执行updated的时候，页面中的数据和data的数据保持了同步，都是新的。
销毁期间的生命周期函数
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
备注：可以在beforeDestory里清除定时器、或清除事件绑定。
1345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
