每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
其中created（创建）、mounted（挂载）、updated（更新）、destroyed（销毁）比较常用。同时还有activated（激活）、deactivated（停用）这两个勾子函数，它们需要配合<keep-alive></keep-alive>来进行使用。
组件的生命周期都要经过从创建到销毁的过程，这个过程是非常消耗性能的。而通过<keep-alive>我们就可以实现‘当我们不需要某个组件时就可以将其停用，当我们需要时再将其激活’，这个过程并不会频繁的创建、销毁，通过<keep-alive>，当我们停用是会将其缓存，当我们激活时会直接从缓存中获取，而且还能够记住组件当前的状态。
<style>
.active {
color: red;
}
</style>
<body>
<div id="app">
<App></App>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('Test', {
data() {
return {
msg: 'Tom',
isActive: false
}
},
methods: {
handleClick() {
this.msg = 'Jerry';
this.isActive = true;
}
},
template: `
<div>
<button @click='handleClick'>改变</button>
<h3 :class='{active:isActive}'>{{ msg }}</h3>
</div>
`,
beforeCreate() {
console.log('组件创建之前', this.$data);
},
created() {
//在此处发送ajax，请求后端数据
console.log('组件创建完成', this.$data);
},
beforeMount() {
//即将挂载
console.log('DOM挂载之前', document.getElementById('app'));
},
mounted() {
//此处也能够发送ajax，具体看需求
console.log('DOM挂载完成', document.getElementById('app'));
},
beforeUpdate() {
//获取更新之前的DOM
console.log('更新之前的DOM', document.getElementById('app').innerHTML);
},
updated() {
//获取更新之后的DOM
console.log('更新之前的DOM', document.getElementById('app').innerHTML);
},
beforeDestroy() {
console.log('销毁之前');
},
destroyed() {
console.log('销毁完成');
},
activated() {
console.log('组件被激活了');
},
deactivated() {
console.log('组件被停用了');
},
})
const App = {
data() {
return {
isShow: true
}
},
methods: {
clickHandle() {
this.isShow = !this.isShow;
}
},
template: `
<div>
<keep-alive>
<Test v-if='isShow'></Test>
</keep-alive>
<button @click='clickHandle'>改变生死</button>
</div>
`
}
new Vue({
el: '#app',
components: {
App
}
})
</script>
</body>
