The vUE lifecycle is something we are all familiar with. Let’s review it now:

Created: Data and method are injected, and the methods of data and method can be obtained. Mounted: The DOM is mounted. You can perform DOM operations in this stage. BeforeUpdate: Data is about to change and dom change has not been performed. Data is changed. beforeDestroy: data is about to be destroyed and no DOM change phase is conducted

Life cycle of parent and child components

How about the parent component lifecycle relationship in a component? Print the corresponding text in the parent and child component lifecycle respectively: parent:

  created() {
    console.log('Parent component create')},mounted() {
    console.log(Parent component mounted)},beforeCreate() {
    console.log('Parent component beforeCreate')},beforeMount() {
    console.log('Parent component beforeMount')},beforeUpdate() {
    console.log('Parent component beforeUpdate')},beforeDestroy() {
    console.log('Parent component beforeDestroy')},destroyed() {
    console.log('Parent component destroyed')},updated() {
    console.log('Parent component updated')},methods: {
    destroy() {
      this.$destroy()
    },
  },
Copy the code

Child components:

 created() {
    console.log('Child component create')},mounted() {
    console.log('Subcomponent mounted')},beforeCreate() {
    console.log('Subcomponent beforeCreate')},beforeMount() {
    console.log('Child component beforeMount')},beforeUpdate() {
    console.log('Child component beforeUpdate')},beforeDestroy() {
    console.log('Child component beforeDestroy')},destroyed() {
    console.log('Subcomponent destroyed')},updated() {
    console.log('Updated -->')},Copy the code

Create a stage

According to the output results, the loading sequence of the creation phase is as follows: Parent beforeCreate–> parent created–> parent component beforeMount–> child component create–> child component beforeMount–> child component Mounted –> Parent component Mounted running stage

The loading order when data changes is: Parent beforeUpdate–> child beforeUpdate–> Child updated–> Parent updated

Destruction of phase

The loading order when data changes is: parent beforeDestroy–> child beforeDestroy–> child destroyed–> Parent destroyed