new Vue({
  el: "#app",
  data: {
    loading: true,
    courses: [],
  },
  created() {
    console.log("created: 实例已经创建");
  },
  mounted() {
    // 任务：
    // 1. 模拟异步请求
    // 2. 1 秒后给 courses 赋值
    // 3. loading 改成 false
    console.log("1");

    const thiz = this
    setTimeout(function () {
      thiz.courses = [
        { id: 1, title: 'HTML' },
        { id: 2, title: 'CSS' },
        { id: 3, title: 'JS' }
      ]
      thiz.loading = false
    }, 1000)
  },
  updated() {
    // 任务：在控制台输出 updated 日志
    console.log("更新");

  },
  beforeDestroy() {
    // 任务：在控制台输出 beforeDestroy 日志
    console.log("已销毁");

  },
  destroyed() {
    // 任务：在控制台输出 destroyed 日志
    console.log("销毁完成");

  },
  methods: {
    destroyInstance() {
      // 任务：调用 this.$destroy()
      this.$destroy()
    },
  },
});