vue的生命周期详解

直接上代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue生命周期</title>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<keep-alive>
<my-components :msg="'hello'" v-if="show"></my-components>
</keep-alive>
<button @click="changs()">点击改变数据</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
let child = {
template: '<div>from child: {{msg}}</div>',
props: ['msg'],
data () {
return {
childMsg: 'child'
}
},
deactivated () {
console.log('component deactivated!')
},
activated () {
console.log('component activated')
}
}
var app = new Vue({
el: '#app',
data () {
return {
message: 'father',
show: true
}
},
beforeCreate () {
console.log('beforeCreate 创建前的状态==========》')
let state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(state)
},
created () {
console.log('created 创建完毕状态===========》')
let state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(state)
},
beforeMount () {
console.log('beforeMount 挂载前的状态========》')
let state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state)
},
mounted () {
console.log('mounted 挂载结束状态=========》')
let state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el)
console.log(state)
// this.message = 'change';
},
beforeUpdate () {
console.log('beforeUpdate 更新前的状态===========》')
let state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el)
console.log(state)
console.log('beforeUpdate == ' + document.getElementsByTagName('p')[0].innerHTML);
// this.message = 'change2';
},
updated () {
console.log('updated 更新完成状态=========》')
let state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el)
console.log(state)
console.log('updated == ' + document.getElementsByTagName('p')[0].innerHTML);
// this.message = 'change3';
},
beforeDestroy () {
console.log('updated 销毁前状态=========》')
let state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el)
console.log(state)
},
destroyed () {
console.log('updated 销毁完成状态=========》')
let state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el)
console.log(state)
},
methods: {
changs () {
this.message = 'change'
}
},
components: {
'my-components': child
}
})
</script>
</body>

</html>

打开谷歌浏览器，按f12看下console就差不多明白了

比较常用的是：

beforecreate：可以在这里加一个loading事件

created：在这里结束loading，可以发起后端请求，拿回数据放入data

mounted：这里可以对dom的一些操作，比如说监听滚动条来到达吸顶的效果等等