首先看下官方概念解释:
1.beforeCreate
在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
2.created
在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el
属性目前不可见。
在挂载开始之前被调用:相关的 render
函数首次被调用。
4.mounted
vm.$el已挂载在文档内,对已有dom节点的操作可以在这期间进行。
数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
6.updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
实例销毁之前调用。在这一步,实例仍然完全可用。
8.destroyed
Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
自己写了一段测试代码,测试内容如下:
1.什么时候可以最先获取到data里的值;
2.什么时候可以最先获取到页面dom;
<template>
<div>
<div id="demo">666888</div>
</div>
</template>
<script>
export default {
data () {
return {
num: '初始data值第一次被获取到'
}
},
// 生命周期-1:beforeCreate
beforeCreate () {
// 测试 能否获取data里的数据
if (this.num === undefined) {
console.log('beforeCreate :该阶段获取不到data数据')
} else {
console.log('beforeCreate :该阶段获取到data数据,数据为:' + this.num)
}
},
// 生命周期-2:created
created () {
// 测试1 能否获取data里的数据
if (this.num === undefined) {
console.log('created :该阶段获取不到data数据')
} else {
console.log('created :该阶段可以获取到data数据,数据为:>>>>>>>>>>>>>>>>>' + this.num + '>>>>>>>>>>>>>>>>>')
}
// 测试2 能否修改data里的数据
this.num = '说明: created 阶段最先可以修改data数据'
// 测试3 能否获取dom 元素
var aaa = document.getElementById('demo')
if (aaa) {
console.log('说明 created 阶段,!!!!!!!!!!!!页面dom开始被获取到了!!!!!!!!!!!!')
} else {
console.log('说明 created 阶段,页面dom还获取不到')
}
},
// 生命周期-3:beforeMount
beforeMount () {
// 测试1 能否获取data里的数据
if (this.num === undefined) {
console.log('beforeMount :该阶段获取不到data数据')
} else {
console.log('beforeMount :该阶段获取到了 “created阶段” 修改后的data数据:《《《《《《《《' + this.num + '《《《《《《《《')
}
// 测试2 能否获取dom 元素
var aaa = document.getElementById('demo')
if (aaa) {
console.log('说明 beforeMount 阶段,!!!!!!!!!!!!页面dom开始被获取到了!!!!!!!!!!!!')
} else {
console.log('说明 beforeMount 阶段,页面dom还获取不到')
}
},
// 生命周期-4:mounted
mounted () {
// 测试1 能否获取dom 元素
var aaa = document.getElementById('demo')
if (aaa) {
console.log('说明 mounted 阶段,!!!!!!!!!!!!页面dom开始被获取到了!!!!!!!!!!!!')
} else {
console.log('说明 mounted 阶段,页面dom还获取不到')
}
},
// 生命周期-5:beforeUpdate
beforeUpdate () {
console.log('beforeUpdate:获取到data数据' + this.num)
},
// 生命周期-6:updated
updated () {
console.log('updated:获取到data数据' + this.num)
},
// 生命周期-7:beforeDestroy
beforeDestroy () {
console.log('beforeDestroy:获取到data数据' + this.num)
},
// 生命周期-8:destroyed
destroyed () {
console.log('destroyed:获取到data数据' + this.num)
}
}
</script>
来看下页面加载好后控制台打印的结果:
可以看到 :
created 阶段:第一次可以稳定获取到data里的值,并能修改data里的值;
mounted 阶段:第一次稳定获取到dom元素(为什么说是 “稳定获取”,因为测试时偶尔会发现在created和beforeMount两个阶段也会偶尔出现获取到dom的情况);
mounted 阶段后面的阶段在初始加载时都未被执行。