|
什么是生命周期
????????生命周期函数就是vue实例在某一个时间点会自动执行的函数
有什么函数
- beforeCreate
- created
- beforeMount
- mounted
- beforeDestroy
- destroyed
- beforeUpdate
- updated
什么时候执行，看下面代码说明，或者参考官方文档
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue生命周期</title>
</head>
<script src="js/vue.js"></script>
<body>
<div id="app">{{name}}</div>
<script>
//生命周期函数就是vue实例在某一个时间点会自动执行的函数
var app = new Vue({
el:'#app',
data:{
name:'xiaoming'
},
//事件初始化第一个执行的函数（beforeCreate）
beforeCreate:function(){
console.log('beforeCreate')
},
//事件绑定初始化，第二个执行的函数（created）
created:function(){
console.log('created')
},
//执行完created后会判断el有没有绑定值，如果没有就停止下面的函数执行
/*然后判断有没有template模板，如果有，就将模板编译为render函数
如果没有，就编译绑定el值的html模板*/
//然后才执行第三个函数（beforeMount）
//执行完beforeMount时，页面还没渲染完成，在页面渲染完之前最后一刻执行beforeMount
beforeMount:function(){
console.log('beforeMount')
},
//页面渲染完的时候执行mounted
mounted:function(){
console.log('mounted')
},
//当实例被摧毁前一刻执行此函数beforeDestroy
//可以用实例名.￥destroy()来尝试摧毁实例
beforeDestroy:function(){
console.log('beforeDestroy')
},
//当实例摧毁完全的时候执行此函数destroyed
destroyed:function(){
console.log('destroyed')
},
//当data数据发生改变时会执行下面函数
//data数据改变时执行beforeUpdate
beforeUpdate:function(){
console.log('beforeUpdate')
},
//当数据完成时执行updated
updated:function(){
console.log('updated')
}
})
</script>
</body>
</html>
|