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>
运行结果为:

13997532-15ecb162c60dbc73.png

13997532-8b45841f8208f897.png

13997532-24995585550711b0.png

13997532-52c3506d7a21896a.png

13997532-a9e737fe90695921.png
网友评论