This is the fourth day of my participation in the August Challenge. For details, see:August is more challenging

preface

Look at the catalogue may be familiar to you, but if there is anything you don’t know, read on and there will be the answer 👇👇👇

This article only updates the knowledge of life cycle functions, communication between components, there are more vUE knowledge that you do not know, welcome to continue to pay attention to, progress together!!

The body of the

Life cycle function

When it comes to vue’s lifecycle hook functions, this is what comes to mind:

To get the full picture of the lifecycle hook functions in Vue, go to 👇👇👇

• First question: Do you really know the execution time of these hook functions?

• beforeCreate

When the beforeCreate hook function is called, the data in props or data is not yet available. This data is initialized in initState

.

• created

When the created hook function is called, the data is already accessible, but the component is not yet mounted, so it is not visible. This means that the initialization of the instance data and props occurs between beforeCreate and created.

• beforeMount

When the beforeMount hook function is executed, the template parsing function has been executed, but the $EL element has not been mounted to the page, and the page view has not been updated. This means that the Render template parsing function is executed between created and beforeMount, which means that the template compilation of the component starts before beforeMount is triggered.

• mounted

When the mounted hook function is fired, the template has been compiled and the view has already been loaded. The $EL element is mounted to the page and the view is updated. This means that after beforeMount and before Mounted, the template is compiled and mounted on the view

• BeforeUpdate and updated

When data changes trigger view updates. BeforeUpdate the hook function fires before the status update, when the state of the data has been updated, but the data displayed on the interface has not been updated. The updated hook function is triggered when the status of the instance is updated. At this time, the status in the data and the data displayed on the interface are the latest.

• beforeDestroy

When the beforeDestroy hook function is executed, the instance is ready to be destroyed, but the instance properties and methods have not been destroyed, which means that the instance properties and methods are still available when the hook function is executed.

• destroy

Before the hook function executes, the instance is destroyed, so all of the instance’s properties and methods are unusable when the hook fires.

• Second question: Vue’s documentation clearly states that there are 10 hook functions, but there are only 8 in the diagram. What are the other two? Do you understand?

The two hook functions that are unique to keep-alive are activated and deactivated.

In Vue, components wrapped with keep-alive are not destroyed when switched. Instead, they are cached in memory and perform deactivated hooks, and actived hooks when cached render is hit.

• The third issue: the execution sequence of the parent-child component lifecycle

  To answer this question, consider: at what stage does a parent component detect the presence of a child component? The obvious answer is the template compilation phase. When the parent component’s template is compiled from top to bottom, the life cycle of the child component begins when it is compiled to it. So the child component’s life cycle starts after the parent component’s beforeMount is executed. In this case, the root component is mounted recursively. When all the child components are mounted, the root component is mounted. Then, the root component is mounted

  Life cycle execution sequence is as follows:

Parent beforeCreate -> parent created -> parent beforeMount -> child beforeCreate -> child created -> child beforeMount -> Child Mounted -> parent

Communication between components

Communication between parent and child components

• props 和 emit

Parent -> child: The parent component passes data to the child component when using the child component, and the child component receives data through the props.

Child -> parent: The child sends data to the parent through emit events, and the parent receives parameters through binding events.

This is a typical one-way flow of data from the parent. The child receives the data from the parent through props, but cannot modify the data directly. Instead, the child must notify the parent to change the data by sending the time.

• $parentor$children

Parent -> child: the parent component has access to all methods and data in the parent instance through the $parent object

• refs

On the parent component, instances of the child component can be accessed directly through refs

Communication between sibling components

• Event Bus

It is essentially a simple version of VUex by manually creating an instance of Vue and then accessing that instance on all the sibling components that you want to communicate with. Bus. $on(event name, callback function) and bus.$emit(event name, data to pass) apis are used to communicate between components

Communication across hierarchical components

• provide 和 inject

Provided by a high-level component and acquired by a low-level component. If provide is written to the root component, the data written to any component can be obtained through inject, which is a top-down process. It is easy to see that when the root component is used provide, then inject is used by the child component. This actually implements a one-way VUEX. Of course, this VUEX only allows top-down access.

conclusion

This article only introduces part of the knowledge, more relevant knowledge will continue to update, welcome to continue to pay attention!!

The author is in the process of summarizing and reconstructing what he learned in the past and constructing his own knowledge system. If it helps you, please like it. Of course, if you have any questions, you can also discuss them with me in the comments section…