在一次改bug過程中遇到了此類問題，特此記錄一下。

1.父類程式碼

<template>
  <div id="app">
    <Children />
  </div>
</template>
<script>
import lifeTest from "../mixins/lifeTest.js";
import Children from "./Children.vue";
export default {
  components: { Children },
  mixins: [lifeTest],
  data() {
    
 
return {};
  },
  methods: {},
  beforeCreate() {
    console.log("app  beforeCreate");
  },
  created() {
    console.log("app  created");
  },
  mounted() {
    console.log("app  mounted");
  },
  beforeDestroy() {
    console.log("app  beforeDestroy");
  },
  destroyed() {
    console.log("app  destroyed");
  }
};
 
</script>
<style scoped></style>

2.子類程式碼

<template>
  <div></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
  beforeCreate() {
    console.log("children  beforeCreate");
  },
  created() {
    console.log(
 
"children  created");
  },
  mounted() {
    console.log("children  mounted");
  },
  beforeDestroy() {
    console.log("children  beforeDestroy");
  },
  destroyed() {
    console.log("children  destroyed");
  }
};
</script>

<style></style>

3.mixins程式碼

export default {
  data() {
    return {};
  },
  methods: {},
  beforeCreate() {
    console.log("mixins  beforeCreate");
  },
  created() {
    console.log("mixins  created");
  },
  mounted() {
    console.log("mixins  mounted");
  },
  beforeDestroy() {
    console.log("mixins  beforeDestroy");
  },
  destroyed() {
    console.log("mixins  destroyed");
  }
};

頁面建立時結果如下：

頁面銷燬時結果如下：