vue生命周期钩子函数附图解
2017-08-12 本文已影响91人
xiaoaiai
之前我发过vue生命周期图 没有代码让大家测试，今天附上代码 大家可以更清楚
-
先上生命周期图
1.png
- 这里附上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--vue2.3-->
<div id="app">
<button @click="update">更新组件</button>
<button @click="destroy">销毁组件</button>
<p>{{msg}}</p>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
msg:'hello Vue'
},
methods:{
update(){
this.msg = 'update vue'
},
destroy(){
this.$destroy()
}
},
beforeCreate(){
console.log('实例刚刚被创建,属性都没有')
},
created(){
console.log('实例刚刚被创建，属性已经绑定')
},
beforeMount(){
console.log('模板编译之前')
},
mounted(){
console.log('模板编译之后')
},
beforeUpdate(){
console.log('组件更新之前')
},
updated(){
console.log('组件更新之后')
},
beforeDestroy(){
console.log('组件销毁前')
},
destroyed(){
console.log('组件销毁后')
}
})
</script>
</body>
</html>
