首先先看一下官网的生命周期图：
根据demo来理解Vue的生命周期中的每个步骤：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<ul>
<li v-for="(item, i) in userlist">
{{i+1}}-{{item.nickname}}
</li>
</ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.config.devtools = false;
Vue.config.productionTip = false;
var app = new Vue({
el: '#app',
// 初始化事件和的生命周期，然后执行beforeCreate()
beforeCreate() {
console.log("beforeCreate", this.$data, this.$el);
},
// 注入数据&校验数据，然后执行created()
created() {
// data初始化完成
// ajax请求数据
console.log("created", this.$data, this.$el);
this.getList();
},
// 判断是否指定了容器el，*若没指定el，则当调用app.$mount(el)函数时执行下面的操作
// 判断是否指定了模板template，
// 若指定了template，则将template编译到render函数（渲染template）
// 若没指定template，则将el外部的HTML（outerHTML）作为template编译
beforeMount() {
// el挂载完成
console.log("beforeMount", this.$data, this.$el);
},
// 创建app.$el，替换页面中的el（将Vue容器渲染进页面）
mounted() {
// 初始化DOM插件
console.log("mounted", this.$data, this.$el);
},
// Vue挂载完毕
// 此时，当data被修改时，会触发beforeUpate()和updated()
beforeUpdate() {
console.log("beforeUpdate");
},
// 更新数据：重新渲染虚拟DOM并应用更新
updated() {
console.log("updated");
},
// 当调用app.$destroy()时才会执行销毁操作
beforeDestroy() {
console.log("beforeDestroy");
},
// 解除绑定，销毁子组件以及事件监听器
destroyed() {
console.log("destroyed");
},
data() {
return {
userlist: [],
msg: "123"
}
},
methods: {
async getList() {
let { data } = await axios.get("http://47.92.50.43:8888/sys/jslist");
this.userlist = data;
}
},
});
setTimeout(() => {
app.$destroy();
}, 3000);
</script>
</body>
</html>
运行结构如下：
