Vue中父类、子类、mixins生命周期执行顺序

在一次改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");
  }
};

 

页面创建时结果如下：

 

 

页面销毁时结果如下：