update lifecycle logs. add component name

src/modules/basic/view/app_list.vue

@@ -32,6 +32,7 @@ import { USER_SIGNIN } from "../../portal/store/user";
 import { CORE_API } from "@/constants/constants.js";
 
 export default {
+  name: "AppList",
   data() {
     return {
       appList: []

src/modules/basic/view/campus.vue

@@ -294,6 +294,7 @@ import { CORE_API } from "@/constants/constants.js";
 import { mapState } from "vuex";
 
 export default {
+  name: "Campus",
   data() {
     return {
       isSuperAdmin: false,

src/modules/basic/view/course.vue

@@ -440,6 +440,7 @@ import { ENABLE_TYPE, LEVEL_TYPE } from "../constants/constants.js";
 import { mapState } from "vuex";
 
 export default {
+  name: "Course",
   data() {
     return {
       specialtyLoading4Search: false,

src/modules/basic/view/exam_site.vue

@@ -197,6 +197,7 @@ import { CORE_API } from "@/constants/constants.js";
 import { mapState } from "vuex";
 
 export default {
+  name: "ExamSite",
   data() {
     return {
       orgId: null,

src/modules/basic/view/privilege_group_list.vue

@@ -42,6 +42,7 @@ import { mapState } from "vuex";
 import { CORE_API } from "@/constants/constants.js";
 
 export default {
+  name: "PrivilegeGroupList",
   data() {
     return {
       privilegeGroupList: []

src/modules/basic/view/privilege_tree.vue

@@ -274,6 +274,7 @@ let checkCode = (rule, value, callback) => {
 
 
 export default {
+  name: "PrivilegeTree",
     data() {
         return {
             privilegeGroupId: null,

src/modules/basic/view/role_privilege_settings.vue

@@ -104,6 +104,7 @@ import { mapState } from "vuex";
 import { CORE_API } from "@/constants/constants.js";
 
 export default {
+  name: "RolePrivilegeSettings",
   data() {
     return {
       completed: false,

src/modules/basic/view/school.vue

@@ -320,6 +320,7 @@ import { CORE_API } from "@/constants/constants.js";
 import { mapState } from "vuex";
 
 export default {
+  name: "School",
   data() {
     return {
       formSearch: {

src/modules/basic/view/specially.vue

@@ -356,6 +356,7 @@ import { CORE_API } from "@/constants/constants.js";
 import { mapState } from "vuex";
 
 export default {
+  name: "Specially",
   data() {
     return {
       courseLoading: false,

src/modules/basic/view/user.vue

@@ -455,6 +455,7 @@ import { CORE_API } from "@/constants/constants.js";
 import { mapState } from "vuex";
 
 export default {
+  name: "User",
   data() {
     var validateRootOrg = (rule, value, callback) => {
       if (0 != value && !value) {

src/plugins/vueLifecylceLogs.js

@@ -4,11 +4,6 @@ const ignoreComponents = [undefined, "transition", "router-link", "Bar"];
 
 const ignoreComponentsNameRegexArray = [/^El[A-Z].*/, /^fa-.*/];
 
-setInterval(
-  () => console.log("----------------------Vue lifecyle logs----------------"),
-  10 * 1000
-);
-
 function getParentNumber(that) {
   let parentNumber = 0;
   while (that) {
@@ -28,8 +23,6 @@ function componentNameMatch(name) {
   } else {
     let match = false;
     for (const regex of ignoreComponentsNameRegexArray) {
-      // console.log(regex);
-      // console.log(name);
       if (regex.test(name)) {
         match = true;
         break;
@@ -38,68 +31,79 @@ function componentNameMatch(name) {
     return match;
   }
 }
-Vue.mixin({
-  created() {
-    const parentNumber = getParentNumber(this);
-    if (!componentNameMatch(this.$options.name))
-      console.log(
-        "--".repeat(parentNumber) + `${this.$options.name} %c created`,
-        "color: green"
-      );
-  },
-  mounted() {
-    const parentNumber = getParentNumber(this);
-    if (!componentNameMatch(this.$options.name))
-      console.log(
-        "--".repeat(parentNumber) + `${this.$options.name} %c mounted`,
-        "color: green"
-      );
-  },
-  updated() {
+
+const injectMethods = [
+  { name: "beforeCreate", style: "color: green" },
+  { name: "created", style: "color: green" },
+  { name: "beforeMount", style: "color: green" },
+  { name: "mounted", style: "color: green" },
+  { name: "beforeUpdate", style: "color: #0000aa" },
+  { name: "updated", style: "color: #0000aa" },
+  { name: "beforeDestroy", style: "color: red; font-weight: bold" },
+  { name: "destroyed", style: "color: red; font-weight: bold" }
+];
+
+const injecRoutertMethods = [
+  { name: "beforeRouteEnter", style: ["background: #aaa", "color: #0000aa;"] },
+  { name: "beforeRouteUpdate", style: ["background: #aaa", "color: #0000aa;"] },
+  { name: "beforeRouteLeave", style: ["background: #aaa", "color: #0000aa;"] }
+];
+
+let lifeCycleMixins = {};
+
+let startLogging = false;
+let loggingTime = Date.now();
+const RENDER_DURATION = 1 * 1000;
+
+for (const m of injectMethods) {
+  lifeCycleMixins[m.name] = function() {
     const parentNumber = getParentNumber(this);
-    if (!componentNameMatch(this.$options.name))
+    if (!componentNameMatch(this.$options.name)) {
+      if (!startLogging) {
+        startLogging = true;
+        loggingTime = Date.now();
+      }
       console.log(
-        "--".repeat(parentNumber) + `${this.$options.name} %c updated`,
-        "color: #0000aa"
+        "--".repeat(parentNumber) + `${this.$options.name} %c ${m.name}`,
+        m.style
       );
-  },
-  beforeRouteEnter(to, from, next) {
-    console.log(
-      "%c " + from.fullPath + " --> " + to.fullPath + " %c beforeRouteEnter",
-      "background: #aaa",
-      "color: #0000aa"
-    );
+    }
+  };
+}
+
+for (const m of injecRoutertMethods) {
+  lifeCycleMixins[m.name] = function(to, from, next) {
+    if (!startLogging) {
+      startLogging = true;
+      console.group("Vue lifecyle logs");
+      loggingTime = Date.now();
+    }
 
-    next();
-  },
-  beforeRouteUpdate(to, from, next) {
-    const parentNumber = getParentNumber(this);
-    console.log(
-      "%c " +
-        "--".repeat(parentNumber) +
-        `${this.$options.name} %c beforeRouteUpdate`,
-      "background: #aaa",
-      "color: #0000aa"
-    );
-    next();
-  },
-  beforeRouteLeave(to, from, next) {
-    const parentNumber = getParentNumber(this);
     console.log(
       "%c " +
-        "--".repeat(parentNumber) +
-        `${this.$options.name} %c beforeRouteLeave`,
-      "background: #aaa",
-      "color: #0000aa"
+        from.fullPath +
+        " --> " +
+        to.fullPath +
+        (this ? ` (${this.$options.name}) ` : " ") +
+        `%c ${m.name}`,
+      ...m.style
     );
+
     next();
-  },
-  beforeDestroy() {
-    const parentNumber = getParentNumber(this);
-    if (!componentNameMatch(this.$options.name))
-      console.log(
-        "--".repeat(parentNumber) + `${this.$options.name} %c beforeDestroy`,
-        "color: red; font-weight: bold"
-      );
+  };
+}
+
+// setInterval(
+//   () => console.log("----------------------Vue lifecyle logs----------------"),
+//   10 * 1000
+// );
+setInterval(() => {
+  if (startLogging && Date.now() - loggingTime > RENDER_DURATION) {
+    console.groupEnd();
+    startLogging = false;
   }
+}, 1 * 100);
+
+Vue.mixin({
+  ...lifeCycleMixins
 });