1、什么是生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程,这个过程就叫做生命周期。
生命周期图示:
13987241-a9969bea45b5a089.png
2、模拟实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>{{msg}}</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#app',
data:{
msg:'hello vue'
},
beforeCreate:function(){
alert('beforeCreated');
},
created:function(){
alert('created')
},
beforeMount:function(){
alert('beforMount')
},
mounted:function(){
alert('mounted')
}
})
</script>
</body>
</html>
运行结果为:
![](https://img.haomeiwen.com/i13997819/6654b08129d9b3d1.png)
13997532-15ecb162c60dbc73.png
![](https://img.haomeiwen.com/i13997819/f962f5e22a54ed80.png)
13997532-8b45841f8208f897.png
![](https://img.haomeiwen.com/i13997819/76e860b34771dbc8.png)
13997532-24995585550711b0.png
![](https://img.haomeiwen.com/i13997819/ff9aafc3d2bbaeab.png)
13997532-52c3506d7a21896a.png
![](https://img.haomeiwen.com/i13997819/868efa57f43435c7.png)
13997532-a9e737fe90695921.png
网友评论