background

Often use Vue for daily requirements development, but dare not say very proficient in Vue, every time I feel familiar enough with Vue, but often quickly by the reality hard to slap 😭.

The Vue life cycle question is a classic Vue interview question, which is almost always asked when interviewing for Vue related development positions. About the life cycle of Vue instance itself, Vue official website has a relatively clear introduction, refer to the link, convenient to see the life cycle pictures posted here

The lifecycle of a single Vue component follows the flow shown above, but what does the lifecycle hook function between parent and child components look like?

The problem

Due to the logical relationship between parent and child components, there should be a certain logical relationship in the running sequence of the lifecycle hook functions. In this paper, we analyze beforeCreate, Created, beforeMount and Mounted lifecycle hook functions in detail. Understand the logic of the lifecycle hook execution sequence between parent and child components at the source level.

First, take a look at some sample code:

<! DOCTYPEhtml>
<html lang="en">
  <head> <meta charset="utf-8"> <title>Component event flow testing</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head>
  <body>
    <div id="el">Here is the parent component {{name}}<child></child></div>
    <div id="event" style="margin-top: 15px;"><div>Here is the order of events:</div>
      <div v-for="(item, index) in events">{{ item }}</div>
    </div>
    <script>
    const events = new Vue({
      el: '#event'.data: { events: []}});const createHooks = (name) = > ({
      beforeCreate() { events.events.push(`${name} beforeCreate`); },
      created() { events.events.push(`${name} created`); },
      beforeMount() { events.events.push(`${name} beforeMount`); },
      mounted() { events.events.push(`${name} mounted`); }}); Vue.component('child', { ...createHooks('child'), template: '
       

         here is the child 
        
       
' });
    Vue.component('child2', { ...createHooks('child2'), template: '
       

         here is the child sub-component 
       
' });
    var vm = new Vue({
      el: '#el'. createHooks('parent'), data() { return { name: 'parent'}; }});</script>
  </body>
</html>
Copy the code

The above code is very simple, but it speaks volumes. Can you be smart enough to tell the order of events displayed on a web page right away?

Sample run results

You can open the HTML page in Chrome and see that the result should look something like this:

parent beforeCreate
parent created
parent beforeMount
child beforeCreate
child created
child beforeMount
child2 beforeCreate
child2 created
child2 beforeMount
child2 mounted
child mounted
parent mounted
Copy the code

Do you understand this result on a fundamental level?

There are no secrets in front of source code

To get to the bottom of this, I chose to start with the source code. Memorizing the logical relationship between the parent and child component hook functions is not enough to understand the overall structure of the Vue.

Analyzing Vue, of course, starts from the entry of Vue initialization, so I drew the following flow chart to help clarify and understand the logic of the hook functions and why the parent component hook functions run in the same order.

Component initialization process

After a great effort to draw the flow chart of Vue component initialization, the figure omitted some details, if there is anything wrong, please advise.

When a child component is mounted, the parent component’s initialization event (mounted) is triggered. After the child component is mounted, you can use the following flowchart to simplify the process.

Hook running order

From a purely parent-child component lifecycle perspective, we can simplify the above flowchart by focusing on the order in which the parent-child component lifecycle functions are executed.

flowchart TB subgraph parent beforeCreate-->created-->beforeMount end subgraph child childBeforeCreate[child beforeCreate]-->childCreated[child created]-->childBeforeMount[child beforeMount] end parent --> child --> ChildMounted [childMounted]--> childMounted

subsequent

BeforeUpdate, updated, beforeUnmount, and unmounted hook functions in Vue can also be sorted out by referring to a flowchart. Through the method of source code analysis to comb the hook function execution logic, is there a further understanding of the above code execution logic?