增加组件渲染日志

src/main.js

@@ -10,6 +10,13 @@ import "./styles/global.css";
 
 Vue.config.productionTip = process.env.NODE_ENV !== "production";
 
+if (
+  process.env.NODE_ENV === "development" &&
+  process.env.VUE_APP_ENABLE_VUE_RENDER_LOGS === "true"
+) {
+  require("./plugins/vueLifecylceLogs");
+}
+
 new Vue({
   router,
   store,

src/modules/basic/view/campus.vue

@@ -421,7 +421,6 @@ export default {
     searchForm() {
       this.loading = true;
       var param = new URLSearchParams(this.formSearch);
-      console.log("this.formSearch:", this.formSearch);
       var url =
         core_api +
         "/org/subOrgPage/" +
@@ -431,7 +430,6 @@ export default {
         "?" +
         param;
       this.$http.get(url).then(response => {
-        console.log(response);
         this.tableData = response.data.list;
         this.total = response.data.total;
         this.loading = false;

src/plugins/vueLifecylceLogs.js

@@ -0,0 +1,105 @@
+import Vue from "vue";
+
+const ignoreComponents = [undefined, "transition", "router-link"];
+
+const ignoreComponentsNameRegexArray = [/^El[A-Z].*/, /^fa-.*/];
+
+setInterval(
+  () => console.log("----------------------Vue lifecyle logs----------------"),
+  10 * 1000
+);
+
+function getParentNumber(that) {
+  let parentNumber = 0;
+  while (that) {
+    if (that.$parent) {
+      parentNumber++;
+      that = that.$parent;
+    } else {
+      break;
+    }
+  }
+  return parentNumber;
+}
+
+function componentNameMatch(name) {
+  if (ignoreComponents.includes(name)) {
+    return true;
+  } else {
+    let match = false;
+    for (const regex of ignoreComponentsNameRegexArray) {
+      // console.log(regex);
+      // console.log(name);
+      if (regex.test(name)) {
+        match = true;
+        break;
+      }
+    }
+    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 parentNumber = getParentNumber(this);
+    if (!componentNameMatch(this.$options.name))
+      console.log(
+        "--".repeat(parentNumber) + `${this.$options.name} %c updated`,
+        "color: #0000aa"
+      );
+  },
+  beforeRouteEnter(to, from, next) {
+    console.log(
+      "%c " + from.fullPath + " --> " + to.fullPath + " %c beforeRouteEnter",
+      "background: #aaa",
+      "color: #0000aa"
+    );
+
+    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"
+    );
+    next();
+  },
+  beforeDestroy() {
+    const parentNumber = getParentNumber(this);
+    if (!componentNameMatch.includes(this.$options.name))
+      console.log(
+        "--".repeat(parentNumber) + `${this.$options.name} %c beforeDestroy`,
+        "color: red; font-weight: bold"
+      );
+  }
+});