vue-template-compiler 2.0.0-alpha.5

on Node.js Yarn

New

• The render function now receives the component instance's $createElement method as its only argument. This avoids having to aliasing this.$createElement to something less verbose:

  Vue.extend({
    render (h) {
      return h('div', null, 'hello!')
    }
  })

• Functional components:

  A component can be defined as a stateless functional component with functional: true.

  • A functional component has no instance and is simply a function that receives props and children vnodes via arguments, and also return vnode(s).
  • Unlike stateful components, functional components are not restricted by the "single root node" rule and can return an Array of multiple vnodes.
  • A functional component's render function receives the following arguments:
    • createElement: the parent component's $createElement method.
    • props: an object containing props
    • children: children inside the component's tag as vnodes

  Example usage:

  Vue.component('wrap-with-tag', {
    functional: true,
    props: ['tag'],
    render (h, props, children) {
      return h(props.tag, null, children)
    }
  })

  When used in template:

  <wrap-with-tag tag="div">hello</wrap-with-tag>

  Will render:

  <div>hello</div>

Breaking Changes

• v-ref is now no longer a directive: it is now a special attribute similar to key and transition:

  <!-- before -->
  <comp v-ref:foo></comp>
  
  <!-- after -->
  <comp ref="foo"></comp>

  Dynamic ref bindings are now also supported:

  <comp :ref="dynamicRef"></comp>

• The <render> tag is removed in favor of stateless functional components.

• It is now prohibited to replace a component instance's root $data. This prevents some edge cases in the reactivity system and makes the component state more predictable (especially with type-checking systems).