“This is my 27th day of the November Gwen Challenge.The final text challenge in 2021”

In parent-child components, knowing the parent component’s lifecycle hook loading order allows the developer to do the right thing at the right time

Lifecycle hook detailed
beforeCreate After instance initialization, data Observer and Event/Watcher events are called before configuration.
created Called after the instance has been created. In this step, the instance completes the configuration of data Observer, property and method operations, and Watch/Event event callbacks. However, the mount phase has not yet started and the $EL attribute is not currently visible.
beforeMount Called before the mount begins: The associated render function is called for the first time.
mounted El Specifies the newly created VM.
e l Replace and mount the hook to the instance. if r o o t The instance mounts a document element when m o u n t e d Is called v m . El replaces and is called after being mounted to the instance. If the root instance mounts an element within a document, the VM is called when Mounted. El is also in the document.
beforeUpdate Called when data is updated, before the virtual DOM is re-rendered and patched. You can further change the state in this hook without triggering additional rerendering.
updated This hook is called after the virtual DOM is re-rendered and patched due to data changes. When this hook is called, the component DOM has been updated, so you can now perform DOM-dependent operations.
activated Called when the keep-alive component is activated.
deactivated Called when the keep-alive component is disabled.
beforeDestroy Called before instance destruction. At this step, the instance is still fully available.
destroyed Called after the Vue instance is destroyed. When called, everything indicated by the Vue instance is unbound, all event listeners are removed, and all subinstances are removed

Called after instance destruction. When called, everything indicated by the Vue instance is unbound, all event listeners are removed, and all subinstances are removed

The parent component

<template>
  <div>
    <h3>home</h3>
    <list @hook:mounted="listMounted" />
  </div>
</template>

<script>
import List from './list'

export default {
  name: "home".components: {
    List
  },
  methods: {
    listMounted(){
      console.log('------------ listMounted'); }},beforeCreate() {
    console.log("home beforeCreate");
  },
  created() {
    console.log("home created");
  },
  beforeMount() {
    console.log("home beforeMount");
  },
  mounted() {
    console.log("home mounted");
  },
  beforeDestroy() {
    console.log("home beforeDestroy");
  },
  destroyed() {
    console.log("home destroyed"); }}</script>
Copy the code

Child components

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

<script>
export default {
  naem: "list".beforeCreate() {
    console.log("list beforeCreate");
  },
  created() {
    console.log("list created");
  },
  beforeMount() {
    console.log("list beforeMount");
  },
  mounted() {
    console.log("list mounted");
  },
  beforeDestroy() {
    console.log("list beforeDestroy");
  },
  destroyed() {
    console.log("list destroyed"); }}</script>
Copy the code

The code loads the loading order of the parent components of the rendering process

home beforeCreate --> home created --> home beforeMount--> list beforeCreate --> list created --> list beforeMount --> list mounted --> home mounted

The order in which parent and child components are destroyed when code is destroyed

home beforeDestroy --> list beforeDestroy --> list destroyed --> home destroyed

Child component update process

Parent beforeUpdate-> Child beforeUpdate-> Child updated-> Parent updated

Parent component update process

Father father beforeUpdate - > updated