Vue's Render function

1. Nodes, trees, and virtual DOM
2. Virtual DOM

2.1 Diving into Data Objects
2.2 Constraints

3. Template function in Render function

3.1 v-if and v-for
3.2 v-model
3.3 Events & Key Modifiers
3.4 Slots
3.5 Examples

1. Nodes, trees, and virtual DOM

<div>
  <h1>My title</h1>
  Some text content
  <!-- TODO: Add tagline -->
</div>

Each element is a node. Each paragraph of text is also a node. Even comments are nodes. A node is a section of a page. Just like a family tree, each node can have children (that is, each part can contain other parts).

Updating all of these nodes efficiently can be difficult, but fortunately you don't have to do it manually. You just need to tell Vue what you want the HTML on the page to be, which can be in a template:

<h1>{{ blogTitle }}</h1>

Or in a render function:

render: function (createElement) {
  return createElement('h1', this.blogTitle)
}

In both cases, Vue will automatically keep the page updated even if blogTitle changes.

2. Virtual DOM

Vue creates a virtual DOM to track how it changes the real DOM. Please look carefully at this line of code:

return createElement('h1', this.blogTitle)

What exactly does createElement return? Not actually an actual DOM element. A more accurate name might be createNodeDescription , because the information it contains tells Vue what kind of node needs to be rendered on the page, including description information of its child nodes. We describe such nodes as " virtual node ", which are often abbreviated as " VNode ". "Virtual DOM" is what we call the entire VNode tree built by the Vue component tree.

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // An HTML tag name, component options object, or // an async function that resolves to any of the above. Required field.
  'div',

  // {Object}
  // A data object corresponding to the attribute in the template. Optional.
  {
    // (see next section for details)
  },

  // {String | Array}
  // Child virtual nodes (VNodes), constructed by `createElement()`,
  // You can also use strings to generate "text virtual nodes". Optional.
  [
    'Write some text first',
    createElement('h1', 'A headline'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

2.1 Diving into Data Objects

In render functions, some template attributes will have top-level fields in the Vnode data object, which also allows binding to normal attributes, as well as DOM property such as innerHTML (which overrides the v-html directive).

{
  // Same API as `v-bind:class`,
  // Accepts a string, object, or an array of strings and objects 'class': {
    foo: true,
    bar: false
  },
  // Same API as `v-bind:style`,
  // Accepts a string, object, or array of objects style: {
    color: 'red',
    fontSize: '14px'
  },
  // Normal HTML attribute
  attrs: {
    id: 'foo'
  },
  // Component prop
  props: {
    myProp: 'bar'
  },
  // DOM properties
  domProps: {
    innerHTML: 'baz'
  },
  // Event listener is inside `on`,
  // But modifiers like `v-on:keyup.enter` are no longer supported.
  // Need to manually check keyCode in the processing function.
  on: {
    click: this.clickHandler
  },
  // Only used for components to listen to native events, not events triggered by // `vm.$emit` inside components.
  nativeOn: {
    click: this.nativeClickHandler
  },
  // Custom directives. Note that you cannot use `oldValue` in `binding`
  // Assignment, because Vue has automatically synchronized it for you.
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers:
        bar: true
      }
    }
  ],
  // The format of a scoped slot is // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // If the component is a subcomponent of another component, you need to specify a name for the slot slot: 'name-of-slot',
  // Other special top-level properties
  key: 'myKey',
  ref: 'myRef',
  // If you apply the same ref name to multiple elements in the rendering function,
  // Then `$refs.myRef` will become an array.
  refInFor: true
}

2.2 Constraints

VNode must be unique

All VNode in a component tree must be unique. This means that the following render function is illegal:

render: function (createElement) {
  var myParagraphVNode = createElement('p', 'hi')
  return createElement('div', [
    // Error - Duplicate VNode
    myParagraphVNode, myParagraphVNode
  ])
}

If you really need to repeat an element/component a lot of times, you can use a factory function to do it. For example, the following render function renders 20 identical paragraphs in a perfectly legal way:

render: function (createElement) {
  return createElement('div',
    Array.apply(null, { length: 20 }).map(function () {
      return createElement('p', 'hi')
    })
  )
}

3. Template function in Render function

3.1 v-if and v-for

As long as something can be easily done in native JavaScript , Vue 's render functions don't provide proprietary alternatives. For example, v-if and v-for used in templates:

<ul v-if="items.length">
  <li v-for="item in items">{{ item.name }}</li>
</ul>
<p v-else>No items found.</p>

These can all be rewritten in the render function using JavaScript if/else and map :

props: ['items'],
render: function (createElement) {
  if (this.items.length) {
    return createElement('ul', this.items.map(function (item) {
      return createElement('li', item.name)
    }))
  } else {
    return createElement('p', 'No items found.')
  }
}

3.2 v-model

There is no direct counterpart to v-model in the render function - you have to implement the corresponding logic yourself:

props: ['value'],
render: function (createElement) {
  var self = this
  return createElement('input', {
    domProps: {
      value: self.value
    },
    on: {
      input: function (event) {
        self.$emit('input', event.target.value)
      }
    }
  })
}

That’s the price of going low-level, but it gives you much finer control over the details of the interaction than v-model .

3.3 Events & Key Modifiers

For the . passive , . capture , and . once event modifiers, Vue provides corresponding prefixes that can be used on:

For example:

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

For all other modifiers, the private prefix is not necessary, since you can use the event method from within the event handler:

Here is an example using all modifiers:

on: {
  keyup: function (event) {
    // If the element that triggers the event is not the element to which the event is bound // then return if (event.target !== event.currentTarget) return
    // If the enter key was not pressed or // the shift key was not pressed at the same time // then return if (!event.shiftKey || event.keyCode !== 13) return
    // Stop event bubbling event.stopPropagation()
    // Prevent the element's default keyup event event.preventDefault()
    // ...
  }
}

3.4 Slots

You can access the contents of static slots via this.$slots , where each slot is an array of VNode :

render: function (createElement) {
  // `<div><slot></slot></div>`
  return createElement('div', this.$slots.default)
}

You can also access scoped slots through this.$scopedSlots , each scoped slot is a function that returns a number of VNode :

props: ['message'],
render: function (createElement) {
  // `<div><slot :text="message"></slot></div>`
  return createElement('div', [
    this.$scopedSlots.default({
      text: this.message
    })
  ])
}

If you want to pass scoped slots to child components using a render function, you can use the scopedSlots field in VNode data object:

render: function (createElement) {
  // `<div><child v-slot="props"><span>{{ props.text }}</span></child></div>`
  return createElement('div', [
    createElement('child', {
      // Pass `scopedSlots` in the data object
      // The format is { name: props => VNode | Array<VNode> }
      scopedSlots: {
        default: function (props) {
          return createElement('span', props.text)
        }
      }
    })
  ])
}

3.5 Examples

import { CreateElement, RenderContext } from 'vue/types/umd'

export default {
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null
    }
  },
  render: (h: CreateElement, ctx: RenderContext) => {
    const params: any = {
      row: ctx.props.row,
      index: ctx.props.index
    }
    if (ctx.props.column) params.column = ctx.props.column
    return ctx.props.render(h, params)
  }
}

This is the end of this article about vue 's Render function. For more relevant Render function content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: