7、Vue实例的生命周期钩子（created、mounted、updated、destoryed）

<template>
  <div id="app">
    <div v-if="loading">
      <h1>异步加载数据正在进行中...</h1>
    </div>
    <div v-if="!loading">
      <h1>异步加载数据完成！</h1>
      <ul v-for="(value, index) of userList" :key="index">
        <li>{{ value }}</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  // 1、初始化数据
  created() {
    console.log("这是created函数的内容");
    this.getUserList();
    this.loading = false;
  },
  // 2、模板加载
  mounted() {
    console.log("这是mounted函数的内容");
  },
  data() {
    return {
      userList: [],
      loading: true,
    };
  },
  methods: {
    getUserList() {
      // 3、通过计时器，模拟一个ajax异步加载数据
      setTimeout(() => {
        this.userList = ["jasmine", "jamsine_qiqi", "qiqi"];
      }, 3000);
    },
  },
};
</script>
<style></style>