vue-template-compiler 2.0.0-beta.1

on Node.js NPM

Vue 2.0 is now in beta phase!

This means the API and feature set is now considered complete, and we will try our best at avoiding further breaking changes until the official 2.0 release. The team will now focus on stability, documentation and updating supporting libraries e.g. vue-router to work with 2.0.

Note: if you are upgrading from a previous 2.0-alpha and using vue-loader or vueify, make sure to fully re-install your npm dependencies.

Changes from 2.0.0-alpha.8

Fixed

• #3176 fix v-for list update edge case
• #3179 fix v-model on component value always casted to string
• various other internal stability fixes

Breaking Changes

• Custom directive change:

  • update hook will now always be called when the component is updated. This makes the lifecycle more consistent with the new rendering model. The user can simply check for binding.value !== binding.oldValue to persist the old behavior, or always perform the update (e.g. when the directive is bound to an object that might be mutated instead of replaced).
  • hook naming change: postupdate -> componentUpdated.

• Transition hooks naming change (now same with 1.x):

  • onEnter -> enter
  • onLeave -> leave

• Server-side rendering:

  • The component-level caching option server.getCacheKey is renamed to serverCacheKey (no longer necessary to nest under the server block):

    export default {
      // ...
      serverCacheKey: props => props.item.id
    }

  • createRenderer and createBundleRenderer no longer uses lru-cache as the default cache implementation. The user is now responsible for providing the cache implementation which should adhere to the following interface:

    {
      get: (key: string, [cb: Function]) => string | void,
      set: (key: string, val: string) => void,
      has?: (key: string, [cb: Function]) => boolean | void // optional
    }

    For more details, see docs for SSR caching.

• Functional component render function signature change:

  The first argument is still h which is $createElement bound to the parent instance. Everything else is now passed in the second argument which is a context object:

  export default {
    functional: true,
    render (h, context) {
      // extracted and validated props for the functional component itself
      context.props
  
      // raw data for the functional component's vnode
      // without extracted props
      context.data
  
      // **a function** that returns the child elements
      // nested inside the functional component's tag
      context.children
  
      // the parent component instance
      context.parent
    }
  }

  This avoids having to remember the argument order and makes it easier when you only need some of the arguments:

  export default {
    functional: true,
    render (h, { data, children }) {
      // simple identity higher-order component
      return h(SomeOtherComponent, data, children)
    }
  }

  Notably, context.children is now a function instead of already resolved children Array. This is because in most cases when you create a higher-order-component, you will be passing the children function down directly so that it can be invoked in the proper component for better dependency tracking.