[Vue] Combined with the source code to understand the life cycle of Vue

foreword

What is a life cycle?

Each Vue instance goes through a series of initialization processes when it is created - for example, it needs to set up data monitoring, compile templates, mount the instance to the DOM and update the DOM when the data changes, etc. It has gone through a series of processes from creating, initializing data, compiling templates, mounting Dom, rendering→update→rendering, unloading, etc. At the same time, some functions called life cycle hooks will be run during this process

 Next, we use the life cycle flow chart and the Vue source code to analyze what happened in this process, borrowing the life cycle flow chart from the official website

1.new Vue()

var vm = new Vue({}), means to initialize an empty Vue instance object, there are no other methods and life cycle in it

2. Init Events &Lifecycle

Indicates that an empty Vue instance object has just been initialized, and then some default life cycle functions and events have been initialized. From the source code we can see that the event is initialized before beforeCreated

 3.beforeCreate

Note: In the beforeCreate cycle, neither data nor methods are initialized! It cannot be called and operated at this time

export default {
  name: '',
  data() {
   return {
    message: 'init'
   }
  },

  methods: {
    handleLog() {
      console.log('执行了handleLog方法')
    }
  },
 
  beforeCreate() {
    // 注意：在beforeCreate周期中，data和methods都没有被初始化！！
    console.log('beforeCreate')
    console.log(`this.message: ${this.message}`)
    this.handleLog()
  },
}

Execution we can see in the console, unable to call methods and output data

 4.Init Injections & reactivity

It can be seen from the source code that in this process, we initialized data and methods, etc.

 5.created

This is the second life cycle function. In created, data and methods have been initialized. If you want to call the method in methods, or operate the data in data, you can only operate in created at the earliest.

export default {
  name: '',
  data() {
   return {
    message: 'init'
   }
  },

  methods: {
    handleLog() {
      console.log('执行了handleLog方法')
    }
  },
 
   created() {
    // 在created中，data和methods都已经被初始化好了！
    // 如果要调用methods中的方法，或者操作data中的数据最早只能在created里面操作！
    console.log('created')
    console.log(this.message) // 输出： init
    this.handleLog() //  输出：执行了handleLog方法
  },
}

6. Determine el and template attributes

Here we will judge whether there is an el attribute. If so, we will judge whether there is a template attribute. If there is a template template, it will be converted into a render function. If there is no template attribute, we will compile the element corresponding to el as a template;

If there is no el attribute, we execute the vm.$mount(el) method

Note: This means that Vue still edits the template, executes the instructions in the Vue code, generates a compiled final template string in memory, and then renders the template string as DOM in memory. At this point, the template is only rendered in memory, and the template is not mounted to the page

7.beforeMount

The third lifecycle function indicates that the template is compiled in memory but not rendered on the page, and the page is still old at this time

How to understand the sentence "The page is still old?" See the example below

<div id="app">
    <div id="h3">{
   
   {message}}</div>
</div>


 beforeMount() {
    console.log('beforeMount')
    // 此时获取的html节点为null，原因是模板未渲染
    let a = document.querySelector('#h3').innerText
    console.log(a)
 },

When the beforeMount life cycle is executed, the elements of the page have not been actually replaced, just some template strings written before

8.mounted

This is the fourth life cycle. In this step, the template compiled in memory is actually replaced into the browser page, and the user can also see the rendered page. el is replaced by the newly created vm.$el, and mounted success

<div id="app">
    <div id="h3">{
   
   {message}}</div>
</div>


 mounted() {
    console.log('mounted')
    let a = document.querySelector('#h3').innerText
    console.log(a) // 正确输出：init
 },

Note: mounted is the last lifecycle function during instance creation