Call order of life cycles between vue2 parent and child components

The guide language

Never before have I not noticed the sequence of calls in the VUE lifecycle in the case of parent-child components. Today to actually have a look, incidentally record, deepen their impression.

Code demo

Again using the previous Todolist code:

BeforeCreate and Created and Mounted phases

Parent component code:

<template>
    <div>
        <Input @add="addHandler"/>
        <List :list="list" @delete="deleteHandler"/>
    </div>
</template>

<script>
import Input from './Input'
import List from './List'

export default {
    components: {
        Input,
        List
    },
    data() {
        return {
            list: [{id: 'id-1'.title: 'heading 1'
                },
                {
                    id: 'id-2'.title: 'title 2'}}},methods: {
        addHandler(title) {
            this.list.push({
                id: `id-The ${Date.now()}`,
                title
            })
        },
        deleteHandler(id) {
            this.list = this.list.filter(item= >item.id ! == id) } },beforeCreate() {
      console.log("The father - beforeCreate")},created() {
      console.log("The father - Create")},mounted() {
        console.log('father - mounted')}},</script>
Copy the code

Sub-component code:

<template>
    <div>
        <input type="text" v-model="title"/>
        <button @click="addTitle">add</button>
    </div>
</template>

<script>
import event from './event'

export default {
    data() {
        return {
            title: ' '}},beforeCreate() {
      console.log("Sub - beforeCreate")},created() {
      console.log("Sub - created")},mounted() {
      console.log("Sub - mounted")},methods: {
          addTitle() {
              // Call the event of the parent component
              this.$emit('add'.this.title)

              // Call custom events
              event.$emit('onAddTitle'.this.title)

              this.title = ' '}}}</script>
Copy the code

Output result:

It can be concluded that: In beforecreate, created, mounted stage, first to the execution of the parent component beforecreate created hook function, then to the execution of subcomponents beforecreate created, mounted hook function, Last, execute the mounted function of the parent component.

BeforeUpdate and updated

Parent component code:

<template>
    <div>
        <Input @add="addHandler"/>
        <List :list="list" @delete="deleteHandler"/>
    </div>
</template>

<script>
import Input from './Input'
import List from './List'

export default {
    components: {
        Input,
        List
    },
    data() {
        return {
            list: [{id: 'id-1'.title: 'heading 1'
                },
                {
                    id: 'id-2'.title: 'title 2'}}},methods: {
        addHandler(title) {
            this.list.push({
                id: `id-The ${Date.now()}`,
                title
            })
        },
        deleteHandler(id) {
            this.list = this.list.filter(item= >item.id ! == id) } },// beforeCreate() {
    / / the console. The log (" parent - beforeCreate ")
    // },
    // created() {
    / / the console. The log (" parent - Create ")
    // },
    // mounted() {
    // console.log(' mounted')
    // },
    beforeUpdate() {
      console.log('father - beforeUpdate');
    },
    updated() {
      console.log('father - updated'); }},</script>
Copy the code

Sub-component code:

<template>
    <div>
        <input type="text" v-model="title"/>
        <button @click="addTitle">add</button>
    </div>
</template>

<script>
import event from './event'

export default {
    data() {
        return {
            title: ' '}},// beforeCreate() {
    / / the console. The log (" sub - beforeCreate ")
    // },
    // created() {
    / / the console. The log (" sub - created ")
    // },
    // mounted() {
    / / the console. The log (" sub - mounted ")
    // },
    beforeUpdate() {
      console.log('the child - beforeUpdate');
    },
    updated() {
      console.log('son - updated');
    },
  methods: {
          addTitle() {
              // Call the event of the parent component
              this.$emit('add'.this.title)

              // Call custom events
              event.$emit('onAddTitle'.this.title)

              this.title = ' '}}}</script>
Copy the code

After adding Todolist:

Why does this happen? The reason is that when you add the todolist option, you first pass the title value to the parent component and then change the title value.

BeforeDestroy and destroyed

Parent component code:

<template>
    <div>
        <Input @add="addHandler"/>
        <List :list="list" @delete="deleteHandler"/>
    </div>
</template>

<script>
import Input from './Input'
import List from './List'

export default {
    components: {
        Input,
        List
    },
    data() {
        return {
            list: [{id: 'id-1'.title: 'heading 1'
                },
                {
                    id: 'id-2'.title: 'title'}}},methods: {
        addHandler(title) {
            this.list.push({
                id: `id-The ${Date.now()}`,
                title
            })
        },
        deleteHandler(id) {
            this.list = this.list.filter(item= >item.id ! == id) } },// beforeCreate() {
    / / the console. The log (" parent - beforeCreate ")
    // },
    // created() {
    / / the console. The log (" parent - Create ")
    // },
    // mounted() {
    // console.log(' mounted')
    // },
    // beforeUpdate() {
    / / the console log (' father - beforeUpdate ');
    // },
    // updated() {
    / / the console log (' father - updated ');
    // },
    beforeDestroy() {
      console.log('father - beforeDestroy');
    },
    destroyed() {
      console.log('father - destroyed'); }},</script>
Copy the code

Sub-component code:

<template>
    <div>
        <input type="text" v-model="title"/>
        <button @click="addTitle">add</button>
    </div>
</template>

<script>
import event from './event'

export default {
    data() {
        return {
            title: ' '}},// beforeCreate() {
    / / the console. The log (" sub - beforeCreate ")
    // },
    // created() {
    / / the console. The log (" sub - created ")
    // },
    // mounted() {
    / / the console. The log (" sub - mounted ")
    // },
    // beforeUpdate() {
    / / the console log (' sub - beforeUpdate ');
    // },
    // updated() {
    / / the console log (' sub - updated ');
    // },
    beforeDestroy() {
      console.log('the child - beforeDestroy');
    },
    destroyed() {
      console.log('the child - destroyed');
    },
  methods: {
          addTitle() {
              // Call the event of the parent component
              this.$emit('add'.this.title)

              // Call custom events
              event.$emit('onAddTitle'.this.title)

              this.title = ' '}}}</script>
Copy the code

Results:

The parent component can only be destroyed if the child component is destroyed

conclusion

Through the above demo exercise, I believe you have a clear understanding of the parent-child component lifecycle call. So see you next time, good good study, day day up!