new Vue({
  el: "#app",
  data: {
    loading: true,
    courses: [],
  },
  created() {
    console.log("created: 实例已经创建");
  },
  mounted() {
    console.log("mounted: 页面已经挂载");

    setTimeout(() => {
      this.courses = [
        { id: 1, title: "生命周期基础" },
        { id: 2, title: "异步数据渲染" },
        { id: 3, title: "组件更新时机" },
      ];
      this.loading = false;
    }, 1000);
  },
  updated() {
    console.log("updated: 页面数据已经更新");
  },
  beforeDestroy() {
    console.log("beforeDestroy: 实例即将销毁");
  },
  destroyed() {
    console.log("destroyed: 实例已经销毁");
  },
  methods: {
    destroyInstance() {
      this.$destroy();
    },
  },
});