开发环境: 添加Vue lifecycle logs

src/features/OnlineExam/OnlineExamOverview.vue

@@ -43,6 +43,7 @@ const TOTAL_READ_TIME = 120;
 const FORCE_READ_TIME = process.env.NODE_ENV === "production" ? 10 : 1;
 
 export default {
+  name: "OnlineExamOverview",
   data() {
     return {
       beforeExamRemark: null,

src/main.js

@@ -91,6 +91,10 @@ Vue.mixin({
   }
 });
 
+if (process.env.NODE_ENV === "development") {
+  require("./plugins/vueLifecylceLogs");
+}
+
 new Vue({
   router,
   store,

src/plugins/vueLifecylceLogs.js

@@ -0,0 +1,166 @@
+import Vue from "vue";
+
+const ignoreComponents = [
+  undefined,
+  "transition",
+  "RemainTime",
+  "router-link",
+  "Affix",
+  "Alert",
+  "Anchor",
+  "AnchorLink",
+  "AutoComplete",
+  "Avatar",
+  "BackTop",
+  "Badge",
+  "Breadcrumb",
+  "BreadcrumbItem",
+  "Button",
+  "ButtonGroup",
+  "Card",
+  "Carousel",
+  "CarouselItem",
+  "Cascader",
+  "Cell",
+  "CellGroup",
+  "Checkbox",
+  "CheckboxGroup",
+  "i-circle",
+  "Col",
+  "Collapse",
+  "ColorPicker",
+  "Content",
+  "Divider",
+  "DatePicker",
+  "Drawer",
+  "Dropdown",
+  "DropdownItem",
+  "DropdownMenu",
+  "Footer",
+  "Form",
+  "iForm",
+  "FormItem",
+  "Header",
+  "Icon",
+  "Input",
+  "InputNumber",
+  "Layout",
+  "Menu",
+  "MenuGroup",
+  "MenuItem",
+  "Sider",
+  "Submenu",
+  "Modal",
+  "Option",
+  "OptionGroup",
+  "Page",
+  "Panel",
+  "Poptip",
+  "Progress",
+  "Radio",
+  "RadioGroup",
+  "Rate",
+  "Row",
+  "Select",
+  "Slider",
+  "Spin",
+  "Split",
+  "Step",
+  "Steps",
+  "i-switch",
+  "Table",
+  "Tabs",
+  "TabPane",
+  "Tag",
+  "Time",
+  "Timeline",
+  "TimelineItem",
+  "TimePicker",
+  "Tooltip",
+  "Transfer",
+  "Tree",
+  "Upload"
+];
+
+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;
+}
+Vue.mixin({
+  created() {
+    const parentNumber = getParentNumber(this);
+    if (!ignoreComponents.includes(this.$options.name))
+      console.log(
+        "--".repeat(parentNumber) + `${this.$options.name} %c created`,
+        "color: green"
+      );
+  },
+  mounted() {
+    const parentNumber = getParentNumber(this);
+    if (!ignoreComponents.includes(this.$options.name))
+      console.log(
+        "--".repeat(parentNumber) + `${this.$options.name} %c mounted`,
+        "color: green"
+      );
+  },
+  updated() {
+    const parentNumber = getParentNumber(this);
+    if (!ignoreComponents.includes(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 (!ignoreComponents.includes(this.$options.name))
+      console.log(
+        "--".repeat(parentNumber) + `${this.$options.name} %c beforeDestroy`,
+        "color: red; font-weight: bold"
+      );
+  }
+});