Shulou(Shulou.com)06/01 Report--

This article is about what Vue.js components are. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The essence of Vue.js component and its corresponding rendering implementation

Introduction

If you are using Vue.js, then I think you must be familiar with Vue single file component (SFC), which is a file format provided by Vue.js framework. In most application scenarios, it is the project organization form officially recommended by Vue.js. In this article, let's use the single file component as the source to review the nature of the component.

What are components?

In Vue.js, a single-file component can be thought of as a further encapsulation of a Vue.js component, which combines the characteristics of HTML, JavaScript, and CSS, and integrates the views, logic, and styles associated with a component into a basic special file unit. the following is an example of a single-file component:

You may not know that, in fact, within Vue.js, the above single-file components will be compiled into standard JavaScript and CSS via @ vue/compiler-sfc. The compiled JavaScript file may be as follows (personal guess, if wrong, please correct):

Is the return value of this function familiar? This is a virtual DOM object, and here you can call this function a component! (if you are not familiar with virtual DOM, please refer to my note-why virtual DOM is used in Vue.js)

Yes, this is the component. The essence of a component is the encapsulation of a set of DOM elements. Now, let's define a component to familiarize ourselves with:

To sum up, we can define a function to represent the component, and the return value of the function represents what the component wants to render.

Rendering of component

As you can see above, the return value of the component is the virtual DOM object, which represents what the component wants to render. So how do components render in Vue.js? (if you don't know much about the rendering principle of virtual DOM in Vue.js, you can refer to my note-analyzing the runtime compilation of Vue.js.)

To describe it more intuitively, let's first use the tag tag in a virtual DOM object to store the component function:

You may not be familiar with this description, because previous virtual DOM may use tag attribute values to describe HTML tags. In fact, tag: MyComponent is completely syntactic as long as it is supported by the renderer. At this point, the renderer code responsible for rendering the virtual DOM to the real DOM is as follows:

Expansion of components

Remember what the essence of a component is? The essence of a component is the encapsulation of a set of DOM elements! So the question is, in the above, we have always used a function to define the component, but can the component only be represented as a function? No, of course not. You can use a JavaScript object to customize the components, as follows:

In this MyComponent object, the return value of the property render function is a virtual DOM object that represents the rendered content of this component. Accordingly, in order to render DOM normally using object components, you need to modify the renderer in the above example as follows:

In the above code, vnode.tag is the object that represents the component. In fact, there are also components expressed in Vue.js using object structures, that is, stateful components.

Thank you for reading! This is the end of this article on "what are Vue.js components?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.