vue的生命周期钩子与父子组件的生命周期详解

<template>
  <div>
    Lifecycle
    <button @click="changeValue">改变value</button>
    <br />
    <br />
    <br />
    <parent :value="value"></parent>
  </div>
</template>
<script>
import Parent from "./Parent.vue";
export default {
  name: "Lifecycle",
  components: { Parent },
  data() {
    return {
      value: 0,
    };
  },
  methods: {
    changeValue() {
      this.value++;
    },
  },
};
</script>

<template>
  <div>
    <p>Parent-{{ parentData }}</p>
    <p>Parent-value:{{ value }}</p>
 
    <button @click="changeParentData">父组件更新</button>
    <br />
    <br />
    <br />
    <Child :value="value"></Child>
  </div>
</template>
<script>
import Child from "./Child.vue";
export default {
  name: "Parent",
  props: ["value"],
  components: { Child },
  data() {
    return {
      parentData: 0,
    };
  },
  methods: {
    changeParentData() {
      this.parentData++;
    },
  },
  // 创建vue实例前
  beforeCreate() {
    console.log("parent beforeCreate 方法执行了");
  },
  // 创建vue实例后
  created() {
    console.log("parent created 方法执行了");
  },
  // 挂载前
  beforeMount() {
    console.log("parent beforeMount 方法执行了");
  },
  // 挂载后
  mounted() {
    console.log("parent mounted 方法执行了");
  },
  // 更新前
  beforeUpdate() {
    console.log("parent beforeUpdate 方法执行了");
  },
  // 更新后
  updated() {
    console.log("parent updated 方法执行了");
  },
  // 销毁前
  beforeDestroy() {
    console.log("parent beforeDestroy 方法执行了");
  },
  // 销毁后
  destroyed() {
    console.log("parent destroyed 方法执行了");
  },
};
</script>

<template>
  <div>
    <p>Child-{{ childData }}</p>
    <p>Child-value:{{ value }}</p>
    <button @click="changeChildData">子组件更新</button>
  </div>
</template>
<script>
export default {
  name: "Child",
  props: ["value"],
  data() {
    return {
      childData: 0,
    };
  },
  methods: {
    changeChildData() {
      this.childData++;
    },
  },
  // 创建vue实例前
  beforeCreate() {
    console.log("Child beforeCreate 方法执行了");
  },
  // 创建vue实例后
  created() {
    console.log("Child created 方法执行了");
  },
  // 挂载前
  beforeMount() {
    console.log("Child beforeMount 方法执行了");
  },
  // 挂载后
  mounted() {
    console.log("Child mounted 方法执行了");
  },
  // 更新前
  beforeUpdate() {
    console.log("Child beforeUpdate 方法执行了");
  },
  // 更新后
  updated() {
    console.log("Child updated 方法执行了");
  },
  // 销毁前
  beforeDestroy() {
    console.log("Child beforeDestroy 方法执行了");
  },
  // 销毁后
  destroyed() {
    console.log("Child destroyed 方法执行了");
  },
};
</script>