The last article talked about project construction and structure, this talk about vue render function, compare the core concept. I wrote a bit about React last year, so I know that the render function is used to create a virtual DOM, and it was fun to write JSX back then. List a few questions for the structure of this essay:

  • What does the render function do?
  • When is the render function executed in the component?
  • When do YOU need to write JSX in a component?

This question is often encountered:

[Vue warn]: Failed to mount component: template or render function not defined

The problem is that the currently written component is not registered as a Vue component, or there is no Template /render in the component definition, so the component cannot be attached to the specific element and cannot be rendered.

The role of the render

The render function is the underlying template method that creates a DOM node by calling createElement(h), which is responsible for component view rendering! CreateElement is the core method of Render. Vue compiles the template to the corresponding render method, so we can not write template with render method!

See instances:

<template>
  <div class="right-panel">
     <div class="right-panel-header">{title}</div>
     <div class="right-panel-content">
        {content}
     </div>
  </div>
</template>
Copy the code

If template is not written, the corresponding render is

render(h) {
  return (
      <div class="right-panel">
        <div class="right-panel-header">{this.title}</div>
        <div class="right-panel-content">
          {this.content}
        </div>
      </div>
    );
}
Copy the code

From the life cycle, render executes the timing

Still have to move the component’s life cycle, created a hook function is component injection and reactivity properties after the initialization, such as props, initialization data, behind the key: If there is a template, compile the view as a Render function. If there is no template, call the Render method of override directly to create a virtual DOM node, and replace the component’s corresponding htmlElement with the component’s DOM structure and data. Finally triggers a mounted hook.

BeforeMount — render(h, data) — mounted

When do I need to define render

In the example above, the panel content can be an external piece of content (this.$props. Content). What if the content is complex? At this point, you need to accept an external function to render a section of dom. In this way, panel is just a container, rendering the content to the external module, in fact, is the idea of component separation and modularization, so that panel components can be better reuse.

Let’s change the render function of the panel to accept external functions:

render(h) {
    let contentNode = (<div>default content</div>);
    if(this.contentRender && this.contentRender instanceof Function) { contentNode = this.contentRender(h, this.data); } console.warn(' rendering... rendering... `);return (
      <div class="right-panel">
        <div class="right-panel-header">Panel Header</div>
        <div class="right-panel-content"> {contentNode} // insert dom structure </div> </div>); }Copy the code

ContenRender can be defined as follows:

contentRender (h, data) { 
   return (<div>Current Data: {data['app']}</div>); 
},
Copy the code

conclusion

Render is really interesting, it is actually creating a DOM in jquery era, the process of building a DOM tree is actually generating VNode virtual DOM nodes, VNode can be mapped to a real DOM tree by vue.js. With Render in hand, you’re free to build reusable component containers. It is recommended to read the official documentation in detail, which is very useful.

Some thoughts:

To develop a front-end project, not only view and component logic, but also data services, modern front-end is almost always data-driven. Because an app is bound to data and view during component initialization, listening to the view is actually driven by changing data as the app runs.

Based on MVC architecture or MVVM architecture, in the process of constantly writing components, we constantly reflect on how to write a component, how to integrate multiple components into a complex component, whether the logical part of the component should be reasonably split into several other common modules/classes.

For example, THE API Service handles the API-related network request separately. The network request inside the API Service can be separately out of the Network layer. In order to conveniently replace the NET request library, there are many general data format conversion layers, which can be separately into the concept of classes or services.

Reference article:

Official documentation: Rendering functions & JSX

Talk about vNodes

Transform-vue-jsx plugin that supports JSX syntax

Misunderstood MVC and deified MVVM, Rethinking – MVC-MVVM