Skip to content


Choose a tag to compare
@yyx990803 yyx990803 released this 07 Jul 21:57
· 2737 commits to main since this release

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


  • #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 =>
    • 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
        // raw data for the functional component's vnode
        // without extracted props
        // **a function** that returns the child elements
        // nested inside the functional component's tag
        // the parent component instance

    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.