先上 Vue 官网的生命周期图片：
- beforeCreate: 元素 DOM 和数据都还没有初始化
- created：数据 data 已经初始化完成，方法也已经可以调用，但是 DOM 未渲染。
- beforeMount：数据 data 初始化完成，但还没有发生渲染。
- mounted：data 数据初始化完成，已经渲染。
- beforeUpdate：只要是页面数据改变了都会触发，数据更新之前，页面数据还是原来的数据。
- updated：数据更新完毕。
- beforeDestroy：组件销毁之前。
- Destroyed：组件销毁之后。
写了一个小 demo，来实际了解一下 Vue 生命周期，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue生命周期</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = 'app'>
</div>
<script >
var Test={
template:`
<div>我是Test组件{{ msg }}
<button @click="msg+='1'">msg+1</button>
</div>
`,
data(){
return{
msg:'HELLO VUE'
}
},
//组件创建前
beforeCreate(){
console.log('组件创建前')
console.log(this.msg)
},
//组件创建后
created(){
console.log('组件创建后')
console.log(this.msg)
},
//Dom挂载前
beforeMount(){
console.log('Dom挂载前')
console.log(document.body.innerHTML)
},
//Dom挂载后
mounted(){
console.log('Dom挂载后')
console.log(document.body.innerHTML)
},
//基于数据更新前
beforeUpdate(){
console.log('数据更新前')
console.log(document.body.innerHTML)
},
//基于数据更新后
updated(){
console.log('数据更新后')
console.log(document.body.innerHTML)
},
//销毁前
beforeDestroy(){
console.log('销毁前')
},
//销毁后
destroyed(){
console.log('销毁后')
},
//组件停用
deactivated(){
console.log('组件停用')
},
//组件激活
activated (){
console.log('组件激活')
}
}
new Vue({
el:'#app',
components:{
Test
},
template:`
<div>
<keep-alive><test v-if='testshow'></test></keep-alive></br>
<button @click='clickbut'>销毁组件</button>
</div>
`,
data(){
return {
testshow:true
}
},
methods:{
clickbut(){
this.testshow=!this.testshow
}
}
})
</script>
</body>
</html>
输出结果如下：
由图可知，组件创建前，数据没有初始化，无法获取到数据，组件初始化后，可以获取到数据。
点击 msg+1 会调用 beforeUpdate，updated 钩子函数，点击销毁组件会调用组件停用钩子函数。
至此，对 Vue 生命周期有了一个初步的认识，在以后的学习中再继续深入了解。
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于