图片中文字过小，请用放大镜查看
vue实例
![]()
vue生命周期函数
| 函数名称 |
阶段 |
说明 |
| beforeCreate |
创建阶段：创建之前 |
在beforeCreate执行的时候 data和methods中的数据尚未被初始化 |
| created |
创建阶段：创建 |
在created执行的时候 data和methods已经被初始化好了。如果要调用methods中的方法，或者操作data中的数据 最早只能在created中操作 |
| beforeMount |
创建阶段：挂载之前 |
beforeMount执行的时候 模板已经在内存中编译好了但是尚未挂载到页面中去 此时页面还是旧的 |
| mounted |
创建阶段：挂载 |
mounted时实例创建期间最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了，此时，如果没有其他草错的话，这个实例就静静的躺在内存中，一动不动 |
| beforeUpdate |
运行阶段：数据更新之前 |
当执行beforUpdate的时候 页面中显示的数据还是旧的 此时data中的数据是最新的 此时页面尚未和最新的数据同步 |
| updated |
运行阶段：数据更新之后 |
当update执行的时候 页面和data中的数据已经同步，都是最新的数据 |
| beforeDestroy |
销毁阶段：销毁之前 |
当执行beforeDestroy的时候，vue实例身上的数据尚未被销毁 |
| destroyed |
销毁阶段：销毁之后 |
当执行destroyed的视乎，vue实例身上的数据被完全销毁 |
测试
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<input type="button" value="修改msg" @click="msg='no'">
<h3 id="h3">{{msg}}</h3>
</div>
<script src="js/vue.js"></script>
<script>
const vm = new Vue({
el : '#app',
data : {
msg : 'ok'
},
methods : {
show () {
console.log('执行了show方法！！')
}
},
beforeCreate () { //第一个生命周期函数 表示实例被完全创建出来之前会执行它
//console.log(this.msg) //返回undefined 找不到msg 表示 data没有被加载
//console.log(this.show()) //找不到此方法 表示methods 尚未加载
// 结论： 在beforeCreate执行的时候 data和methods中的数据尚未被初始化
},
created () { // 第二个生命周期函数
//console.log(this.msg);//返回ok 表示可以data中的数据已经被加载
//this.show(); //返回 执行了show方法！！ 表示methods中的数据已经被加载
// 结论： 在created执行的时候 data和methods已经被初始化好了
//如果要调用methods中的方法，或者操作data中的数据 最早只能在created中操作
},
beforeMount (){ // 第三个生命周期行数 表示模板已经在内存中完成了 但是并没有渲染到真正的页面中去
//console.log(document.getElementById('h3').innerText);//返回{{msg}} 表示尚未渲染到页面上去
//beforeMount执行的时候 模板已经在内存中编译好了但是尚未挂载到页面中去 此时页面还是旧的
},
mounted () { //第四个生命周期函数 表示内存中的模板，已经真是的挂载到了页面中 用户已经可以看到渲染好的页面了
//console.log(document.getElementById('h3').innerText); 返回ok 表示可以得到页面中的内容
//结论： mounted时实例创建期间最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了，此时，如果没有其他草错的话，这个实例就静静的躺在内存中，一动不动
},
//运行中的两个事件
beforeUpdate () { //表示页面中的数据还没有被更行 数据被更新了
//console.log("页面中的数据是："+document.getElementById('h3').innerText); 返回ok
//console.log("data中msg的数据是："+this.msg); 返回no
//结论： 当执行beforUpdate的时候 页面中显示的数据还是旧的 此时data中的数据是最新的 此时页面尚未和最新的数据同步
},
updated (){ //表示页面中的数据和data中的数据保持同步
//console.log("页面中的数据是："+document.getElementById('h3').innerText); 返回no
//console.log("data中msg的数据是："+this.msg); 返回no
//结论：当update执行的时候 页面和data中的数据已经同步，都是最新的数据
}
})
</script>
</body>
</html>
