Render function

  Front end, javascript, vue.js

Render function

The biggest difference between Vue2 and Vue1 is that Vue2 uses virtual DOM to update DOM nodes and improve rendering performance.

Virtual DOM

React and Vue2 both use the virtual DOM technology. The virtual DOM is not a real DOM, but a lightweight JavaScript object. When the state changes, the virtual DOM performs a Different operation to update the DOM that only needs to be replaced, instead of redrawing it all.

Compared with DOM operations, virtual DOM is calculated based on JavaScript, so the overhead is much smaller.

In Vue2, virtual DOM is expressed by a VNode class, and each DOM element or component pair corresponds to a VNode object.

VNodeDataNode resolution:

  • childrenChild nodes, arrays, are also VNode types.
  • textThe text of the current node, general text node or comment node will have this attribute.
  • elmThe real DOM node corresponding to the current virtual node.
  • nsNode’snamespace
  • contentCompile scope
  • functionalContextScope of Functional Components
  • keyNode’skeyProperty, used as the node’s identifier, is conducive topatchOptimization of
  • componentOptionsOption information used when creating component instances.
  • childThe component instance corresponding to the current node.
  • parentThe placeholder node for the component.
  • rawOriginalhtml
  • isStaticIdentification of static node
  • isRootInsetWhether to insert as root node, be<transition>The node of the package, the value of which isfalse.
  • isConmentWhether the current node is an annotation node.
  • isClonedWhether the current node is a clone node.
  • isOnceDoes the current node havev-onceInstructions.

VNode can be divided into the following categories:

  • TextVNodeText node.
  • ElementVNodeCommon element node.
  • ComponentVNodeComponent node.
  • EmptyVNodeComment node with no content.
  • CloneVNodeCloned nodes can be any of the above types of nodes, with the only difference thatisClonedThe property istrue.

The Render function passescreateElementParameter to create a virtual DOM with a compact structure. Among them,AccessslotThe use of the, using the scene focused on the Render function.

< pdata-height = “265” data-theme-id = “0” data-slug-hash = “wxozpg” data-default-tab = “html, result” data-user = “whjin” data-embedded-version = “2” data-pen-title = “vue-render function” class=”codepen”>See the PenVue-render functionby whjin (@whjin) onCodePen.</p>
<script async src=”https://static.codepen.io/ass …; ></script>

createElementusage

Basic parameter

createElementThe template that forms Vue virtual DOM includes3Parameters:

createElement(
    //{String | Object | Function}
    //一个HTML标签,组件选项,或一个函数
    //必须return上面其中一个
    'div',
    //{Object}
    //一个对应属性的数据对象,可选
    //可以在template中使用
    //{String | Array}
    //子节点(VNode),可选
    [
        createElement('h1','hello world'),
        createElement(MyComponent,{
            props:{
                someProp:'foo'
            }
        }),
        'bar'
    ]
);

The first parameter must be selected. It can be an HTML tag or a component or function. The second is optional parameters, data objects, intemplateTo be used in. The third is the child node, which is also an optional parameter. Its usage has always been.

BeforetemplateBoth are used on the label of the component.v-bind:classv-bind:stylev-on:clickSuch instructions are written into data objects in the Render function.

Constraint

In all component trees, if VNode is a component or contains a componentslot, nameVNode must be unique.

Create one in the Render functioncloneVNodeThe factory function of, through recursionslotAll child nodes have cloned one copy, and the key attributes of VNode have also been copied.

Use JavaScript instead of template functionality

In the Render function, Vue built-in instructions are no longer needed, such asv-ifv-for. No matter what functionality you want to implement, you can use native JavaScript.

<p data-height=”265″ data-theme-id=”0″ data-slug-hash=”eKgVgQ” data-default-tab=”html,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=”render–v-for” class=”codepen”>See the Penrender–v-forby whjin (@whjin) onCodePen.</p>
<script async src=”https://static.codepen.io/ass …; ></script>

map()Method to quickly change the array structure and return a new array.mapRegular peacefiltersortSuch methods are used together, they all return new arrays.

The Render function does not have av-modelThe corresponding API needs to implement its own logic.

<p data-height=”265″ data-theme-id=”0″ data-slug-hash=”BVpYdd” data-default-tab=”html,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=”Vue-render-API” class=”codepen”>See the PenVue-render-APIby whjin (@whjin) onCodePen.</p>
<script async src=”https://static.codepen.io/ass …; ></script>

v-modelexactlyprop:valueAndevent:inputA grammar sugar used in combination, although complicated to write in Render, can be freely controlled to go deeper.

For event modifiers and key modifiers, you basically need to implement them yourself:

Modifier Corresponding handle
.stop event.stopPropagation()
.prevent event.preventDefault()
.self if(event.target! ==event.currentTarget) return
.ente.13 if(event.keyCode! ==13) returnreplace13KeyCode required for bit
.ctrl.alt.shift.meta if(! event.ctrlKey) returnReplace as neededctrlKeypositionaltKeyshiftKeyOrmetaKey

For event modifiers.captureAnd.onceVue provides a special prefix that can be written directly inonThe configuration of the.

Modifier Prefix
.capture !
.once ~
.capture.onceOr.once.capture ~!

Write it as follows:

on: {
    '!click': this.doThisInCapturingMode,
        '~keyup': this.doThisOnce,
        '~!mouseover': this.doThisOnceInCapturingMode
}

Simply simulate the scene of chatting and sending content:

< pdata-height = “265” data-theme-id = “0” data-slug-hash = “zrlrpn” data-default-tab = “html, result” data-user = “whjin” data-embedded-version = “2” data-pen-title = “vue-analog chat transmission” class=”codepen”>See the PenVue- analog chat send contentby whjin (@whjin) onCodePen.</p>
<script async src=”https://static.codepen.io/ass …; ></script>

It is widely used in Render functions.slot, in no useslotA default content will be displayed when the system is in use. This part needs to be implemented by itself.

this.$slots.defaultequal toundefinedThat means there is no definition in the parent assemblyslot, which is the content that can be customized for display.