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

1、Vue实例

• new Vue()创建一个Vue实例
• 所有的组件其实都是Vue实例

2、Vue实例的生命周期钩子

• 每个Vue实例在被创建时都要经过一系列的初始化过程

3、生命周期钩子的作用

• 页面加载的时候，主动执行某些程序，提前加载获取数据显示到页面

4、通过计时器，模拟一个ajax异步加载数据（created）

<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>