从Vue的生命周期入手是尝试快速理解Vue应用的一条捷径，那么Vue在生命周期中都做了哪些操作呢？话不多说，直接上代码，感兴趣的小伙伴可以跟着敲一敲，希望直接看结论的请自行滑动至末尾。
VUE文件
<template>
<div class="life-cycle" @click="changeMessage">
{{message}}
</div>
</template>
<script src="./life.js">
</script>
<style lang="less">
.life-cycle {
position: absolute;
top: 50%;
left: 50%;
}
</style>
JS文件
export default {
data () {
return {
loads: this.loadData(),
message: 'xuxiao is boy'
}
},
props: {
pro: ['string', 'number']
},
methods: {
loadData () {
console.log('%c%s', 'color:red', 'methods : 准备完毕,加载Data依赖')
return 1
},
changeMessage () {
this.message = 'changed message'
}
},
beforeCreate: function () {
console.log('beforeCreate 创建前状态开始===============》')
console.table([
['el', `${this.$el}`],
['props', `${this.$props}`],
['data', `${this.$data}`],
['attrs', `${this.$attrs}`],
['listeners', `${this.$listeners}`],
['message', `${this.message}`]])
console.log('beforeCreate 创建前状态结束===============》')
/* console.group('beforeCreate 创建前状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el) // undefined
console.log('%c%s', 'color:red', 'props : ' + this.$props) // undefined
console.log('%c%s', 'color:red', 'data : ' + this.$data) // undefined
console.log('%c%s', 'color:red', 'attrs : ' + this.$attrs) // 已被初始化
console.log('%c%s', 'color:red', 'listeners : ' + this.$listeners) // 已被初始化
console.log('%c%s', 'color:red', 'emit : ' + this.$emit) // 已被初始化
console.log('%c%s', 'color:red', 'on : ' + this.$on) // 已被初始化
console.log('%c%s', 'color:red', 'message: ' + this.message) */
},
created: function () {
console.log('created 创建完毕状态开始===============》')
console.table([
['el', `${this.$el}`],
['props', `${this.$props}`],
['data', `${this.$data}`],
['attrs', `${this.$attrs}`],
['listeners', `${this.$listeners}`],
['message', `${this.message}`]])
console.log('created 创建完毕状态结束===============》')
/* console.group('created 创建完毕状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el) // undefined
console.log('%c%s', 'color:red', 'props : ' + this.$props) // 已被初始化
console.log('%c%s', 'color:red', 'data : ' + this.$data) // 已被初始化
console.log('%c%s', 'color:red', 'attrs : ' + this.$attrs) // 已被初始化
console.log('%c%s', 'color:red', 'listeners : ' + this.$listeners) // 已被初始化
console.log('%c%s', 'color:red', 'message: ' + this.message) // 已被初始化 */
},
beforeMount: function () {
console.log('beforeMount 挂载前状态开始===============》')
console.table([
['el', `${this.$el}`],
['props', `${this.$props}`],
['data', `${this.$data}`],
['attrs', `${this.$attrs}`],
['listeners', `${this.$listeners}`],
['message', `${this.message}`]])
console.log('beforeMount 挂载前状态结束===============》')
/* console.group('beforeMount 挂载前状态===============》')
console.log('%c%s', 'color:red', 'el : ' + (this.$el)) // 已被初始化
console.log('%c%s', 'color:red', 'props : ' + this.$props) // 已被初始化
console.log(this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data) // 已被初始化
console.log('%c%s', 'color:red', 'attrs : ' + this.$attrs) // 已被初始化
console.log('%c%s', 'color:red', 'listeners : ' + this.$listeners) // 已被初始化
console.log('%c%s', 'color:red', 'message: ' + this.message) // 已被初始化 */
},
mounted: function () {
console.log('mounted 挂载结束状态开始===============》')
console.table([
['el', `${this.$el}`],
['props', `${this.$props}`],
['data', `${this.$data}`],
['attrs', `${this.$attrs}`],
['listeners', `${this.$listeners}`],
['message', `${this.message}`]])
console.log('mounted 挂载结束状态结束===============》')
/* console.group('mounted 挂载结束状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el) // 已被初始化
console.log('%c%s', 'color:red', 'props : ' + this.$props) // 已被初始化
console.log(this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data) // 已被初始化
console.log('%c%s', 'color:red', 'attrs : ' + this.$attrs) // 已被初始化
console.log('%c%s', 'color:red', 'listeners : ' + this.$listeners) // 已被初始化
console.log('%c%s', 'color:red', 'message: ' + this.message) // 已被初始化 */
},
beforeUpdate: function () {
console.log('beforeUpdate 更新前状态开始===============》')
console.table([
['el', `${this.$el.innerHTML}`],
['props', `${this.$props}`],
['data', `${JSON.stringify(this.$data)}`],
['attrs', `${this.$attrs}`],
['listeners', `${this.$listeners}`],
['message', `${this.message}`]])
console.log('beforeUpdate 更新前状态结束===============》')
/* console.group('beforeUpdate 更新前状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el.innerHTML)
console.log(this.$el)
console.log('%c%s', 'color:red', 'data : ' + JSON.stringify(this.$data))
console.log('%c%s', 'color:red', 'message: ' + this.message)
console.groupEnd() */
},
updated: function () {
console.log('updated 更新完成状态开始===============》')
console.table([
['el', `${this.$el.innerHTML}`],
['props', `${this.$props}`],
['data', `${JSON.stringify(this.$data)}`],
['attrs', `${this.$attrs}`],
['listeners', `${this.$listeners}`],
['message', `${this.message}`]])
console.log('updated 更新完成状态结束===============》')
/* console.group('updated 更新完成状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el.innerHTML)
console.log(this.$el)
console.log('%c%s', 'color:red', 'data : ' + JSON.stringify(this.$data))
console.log('%c%s', 'color:red', 'message: ' + this.message)
console.groupEnd() */
},
beforeDestroy: function () {
console.log('beforeDestroy 销毁前状态开始===============》')
console.table([
['el', `${this.$el}`],
['props', `${this.$props}`],
['data', `${this.$data}`],
['attrs', `${this.$attrs}`],
['listeners', `${this.$listeners}`],
['message', `${this.message}`]])
console.log('beforeDestroy 销毁前状态结束===============》')
/* console.group('beforeDestroy 销毁前状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.log(this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.message) */
},
destroyed: function () {
console.log('destroyed 销毁完成状态开始===============》')
console.table([
['el', `${this.$el}`],
['props', `${this.$props}`],
['data', `${this.$data}`],
['attrs', `${this.$attrs}`],
['listeners', `${this.$listeners}`],
['message', `${this.message}`]])
console.log('destroyed 销毁完成状态结束===============》')
/* console.group('destroyed 销毁完成状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.log(this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.message) */
}
}
说明，JS文件中有两种查看方式，个人感觉table更加直观，喜欢用group的小伙伴请自行切换
console结果
结论：
1、
a
t
t
r
s
、
attrs、
attrs、listeners会在beforeCreate中准备好
2、methods中的函数会在beforeCreate之后created之前准备好
3、data和props会在created中准备好
4、在mounted中$el才会定义
5、在beforeUpdate中data已经更新但是$el还没有
