Detailed Render function

 

Render function

 

　　In Vue2 in order to improve rendering performance, the use of virtual DOM to update the DOM node, when vue objects get when template template should be translated into a function VNode, but with building render function DOM, vue on eliminating the translation process . When using render virtual function description when DOM, VUE provides a function that is to build a virtual tool DOM needed . Official website gave him a name createElement . There convention shorthand called h, vm, there is a method _c, is an alias for this function.

Virtual dom

 

　　DOMIs the Document Object Model ( Document Object Model) is short, the browser we can operate by JS DOM, but such a poor operating performance, so virtualDom emerged. Virtual Domis, js simulated DOMobject tree to optimize DOMa technology or idea operations . React and Vue2 use virtual DOM technology, virtual DOM DOM is not in the true sense, as a lightweight JavaScript objects in the status change will be Diff operation to update the DOM changes that are not DOM node changes, not operating because not all redrawn, greatly improving rendering performance update.

 

 

 

　　In Vue2 the virtual DOM is achieved by a class VNode expression, each DOM element or component corresponding to one VNode object.

VNode node analysis:

• children  child nodes array, also VNode type.
• text  text of the current node, text nodes or general comment nodes will have the property.
• elm  current virtual node corresponding real DOM node.
• ns  namespace nodes
• content  compiled scopes
• functionalContext  scope of a function of the assembly
• Key  Key attribute node for identifying the node as help optimize the patch
• componentOptions  When you create a component instance will use the option information.
• child  of the current node corresponding to the component instance.
• parent  placeholder node assembly.
• raw  raw html
• isStatic  identifies static node
• isRootInset  whether the root node is inserted, it is <transition> package node, the attribute value is false.
• isConment  whether the current node is a comment node.
• isCloned  whether the current node is a clone node.
• isOnce  whether the current node has a v-once instruction.

 

VNode can be divided into the following categories:

 

 

 

• TextVNode  text node.
• ElementVNode  common element node.
• ComponentVNode  component nodes.
• EmptyVNode  no content of the comment node.
• CloneVNode  clone node may be any of the above types of nodes, the only difference is that isCloned property is true.

CreateElement basic usage

 

Basic parameters

createElementVue constitute a virtual template DOM, it has 3 parameters:

// @Returns} {vnode 
the createElement (
   // {String | Object | Function} 
  // a string of HTML tags, the object component options, or 
  // . Resolve any of the above asynchronous function required parameters a async 
  'div' , 

  // {Object} 
  // a data object template associated attributes contain 
  // you can use these features in a template optional parameters. 
  {
     // (as detailed in the next section) 
  }, 

  // {String | Array} 
  // child virtual node (vnodes), by the `createElement ()` constructed from 
  // may be used to generate a character string "text virtual node." optional. 
  [
     'Create h1 tag' , 
    the createElement ( 'h1' , 'Render function' ), 
    the createElement (the MyComponent, { 
      The props: { 
        someProp:'foobar'
      }
    })
  ]
)

 

Function template meanings of various parts

1.'div ': html node

{String | Object | Function}

A string of HTML tags, assembly options object, or

A parse any one of the foregoing async asynchronous function, the necessary parameters.

{2}: attribute nodes

{Object}

 A data object containing template related properties

 This way, you can use these properties in the template. Optional.

 Detailed property:

{
  // 和`v-bind:class`一样的 API
  // 接收一个字符串、对象或字符串和对象组成的数组
  'class': {
    foo: true,
    bar: false
  },
  // 和`v-bind:style`一样的 API
  // 接收一个字符串、对象或对象组成的数组
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 正常的 HTML 特性
  attrs: {
    id: 'foo'
  },
  // 组件 props
  props: {
    myProp: 'bar'
  },
  // DOM 属性
  domProps: {
    innerHTML: 'baz'
  },
  // 事件监听器基于 `on`
  // 所以不再支持如 `v-on:keyup.enter` 修饰器
  // 需要手动匹配 keyCode。
  on: {
    click: this.clickHandler
  },
  // 仅对于组件，用于监听原生事件，而不是组件内部使用
  // `vm.$emit` 触发的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
  // 赋值，因为 Vue 已经自动为你进行了同步。
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // 作用域插槽格式
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 如果组件是其他组件的子组件，需为插槽指定名称
  slot: 'name-of-slot',
  // 其他特殊顶层属性
  key: 'myKey',
  ref: 'myRef'
}

 

3.[ ]:html节点的子节点

{String | Array}

子节点 (VNodes)，由 `createElement()` 构建而成，

或使用字符串来生成“文本节点”。可选参数。

 

约束

　　所有的组件树中，如果VNode是组件或含有组件的slot，nameVNode必须唯一。在Render函数里创建了一个cloneVNode的工厂函数，通过递归将slot所有子节点都克隆了一份，并对VNode的关键属性也进行复制。

使用JavaScript代替模板功能

　　在Render函数中，不再需要Vue内置的指令，比如v-if、v-for。无论要实现什么功能，都可以使用原生JavaScript。render函数里没有与v-model对应的API，需要自己来实现逻辑。

　　对于事件修饰符和按键修饰符，基本需要自己实现：

修饰符	对应的句柄
.stop	event.stopPropagation()
.prevent	event.preventDefault()
.self	if(event.target!==event.currentTarget) return
.ente、.13	if(event.keyCode!==13) return 替换13位需要的keyCode
.ctrl、.alt、.shift、.meta	if(!event.ctrlKey) return 根据需要替换ctrlKey位altKey、shiftKey或metaKey

　　对于事件修饰符.capture和.once，Vue提供了特殊的前缀，可以直接写在on的配置里。

修饰符	前缀
.capture	!
.once	~
.capture.once或.once.capture	~!

写法如下：

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

View Code

　　在Render函数中会大量使用slot，在没有使用slot时会显示一个默认的内容，这部分需要自己实现。this.$slots.default等于undefined，就说明父组件中没有定义slot，这是可以自定义显示的内容。