I have been using Vue for two and a half years. If I want to look back and see what I have gained, I will come out with this series. Just review the old and learn the new ~😊😊😊

👀P.S.

tempalte

Vue uses the template template, Enables us to declaratively render data to the DOM using straightforward template syntax.

Connect these data with DOM internally, and interact with DOM with direvtive (V-if, V-show, V-for to change DOM structure; V-bind, V-model bind responsive data to DOM; V-on does the listening for the event and triggers the corresponding handler), and you will find that when writing code, you do not need to update the DOM operation, you just need to worry about how to write JS

Component system

An important part of Vue is the component system, which lets you create individual, single-function widgets and then splice them together to form a complete application. The programDimension in the componentDecoupled, for example, a child component is decoupled from its parent through the props interface. The parent component does not care what the child does, and what the child does does not affect the parent component.

In Vue, a component is essentially an instance with predefined options. Since it is an instance, it needs a defined procedure like const instance = new Object({data: {a:1}}), as in {data: Like {a:1}}, there needs to be a process for generating instances, just like creating instance with new.

Define the process:

Creation process:

P.S. new Vue(), vue.extend (), Vue.component(), $mount(), To be honest, I am Lazy, 🥳🥳🥳

Root component instance and child component instance

When it comes to components, vUE can be divided into two classes based on location: the whole VUE project level, called root Component (which is used as the starting point for rendering when we mount the application), and the sub-component level, generally called Component. Just like in a binary tree, the root node at the beginning and the child node below.

The two types of generated instances are called differently: Application Instance (generated by createApp in Vue3, new Vue() in Vue2) and Component Instance.

Each component in the diagram will have an instance, and all component instances in the application will share the same root component instance, where you can always pull up to root via the parent property

Lifecycle hook

A component instance can be created through a series of initialization processes including responsive processing of data, compilation of templates, rendering the instance to the DOM, updating the DOM as the data changes, etc. During this process, Vue provides opportunities for developers to execute custom code. These are called Lifecycle hooks.

Usually development, need to pay attention to the following two points:

  • You can’t use arrow functions because this in its lifecycle refers to the current component instance. During initialization, Vue binds this to the component instance. Arrow functions don’t have this. Uncaught TypeError: Cannot read property of undefined, Uncaught TypeError: this.myMethod is not a function

    The following figure is Vue source code, callcallHook(vm, 'beforeCreate')You can see that call is used to bind the current VM

  • Synchronous execution does not wait for asynchrony to end. Very often in marshalling you will see async/await used in lifecycle and it will not prevent the current component from continuing to initialize, unlike the asynchronous parsing of routes.

Lifecycle illustration from the official website is pasted here and it is really straightforward and the key points of every step are there

P.S. The value of activated and deactivated can also be activated when keep-alive is used

Reference:v3.vuejs.org/guide/insta…