Devacron.com

Vuejs v2.0.0-alpha.1 released

admin

ViewJS 2.0

First release of Viewjs 2.0 is available for download. Many improvements over the previous but also quite a few breaking changes. Quite exciting time to be a javascript developer with all these changes in popular frameworks if you ask me.  Keeps your mind busy! Have a look below for more info (from github)

High Level Changes

Other Breaking Changes

Directive interface change

In general, in 2.0 directives have a greatly reduced scope of responsibility: they are now only used for applying low-level direct DOM manipulations. In most cases, you should prefer using Components as the main code-reuse abstraction.

Directives no longer have instances – this means there’s no more this inside directive hooks and bind,update and unbind now receives everything as arguments. (Note the binding object is immutable – you can persist directive state on el if you absolutely need to):

// example directive
export default {
  bind (el, binding, vnode) {
    // the binding object exposes value, oldValue, arg and modifiers.
    // the context Vue instance can be accessed as vnode.context.
  },
  update (el, binding, vnode, oldVnode) { ... },

  // postupdate is a new hook that is called AFTER the entire component
  // has completed the current update cycle. This means all the DOM would
  // be in updated state when this hook is called. Also, this hook is always
  // called regardless of whether this directive's value has changed or not.
  postupdate (el, binding, vnode, oldVNode) { ... },

  unbind (el, binding, vnode) { ... }
}

You can use destructuring if you only care about the value:

export default {
  bind (el, { value }) {
    // ...
  }
}

elementDirective and directive params are deprecated.

Filter Usage and Syntax Change

In Vue 2.0, there are several changes to the filter system:

  1. Filters can now only be used inside text interpolations ({{}} tags). In the past we’ve found using filters with directives such as v-model, v-on etc. led to more complexity than convenience, and for list filtering on v-for it is more appropriate to move that logic into JavaScript as computed properties.
  2. Vue 2.0 will not ship with any built-in filters. It is recommended to use standalone libraries dedicated for solving problems in a specific domain, e.g. moment.js for formatting dates and accounting.js for formatting financial currencies. You are also welcome to create your own filter pack and share it with the community!
  3. The filter syntax has changed to be more inline with JavaScript function invocation, instead of taking space-delimited arguments: 
    {{ date | formatDate('YY-MM-DD') }}

Transition System

Transition CSS class change: now uses the same classes Angular and React CSSTransitionGroup does:

v-enter-active and v-leave-active gives you the ability to specify different easing curves for enter/leave transitions. In most cases, upgrading means simply replacing your current v-leavewith v-leave-active.

v-model changes

Props Behavior

Misc

Upgrade Tips

How to Deal with Deprecation of $dispatch and $broadcast?

The reason that we are deprecating $dispatch and $broadcast is that event flows that depend on the components tree structure can be hard to reason about when the components tree becomes large (simply put: it doesn’t scale well in large apps and we don’t want to set you up for pain later). $dispatch and$broadcast also do not solve the communication between sibling components. Instead, you can use a pattern similar to the EventEmitter in Node.js: a centralized event hub that allows components to communicate, no matter where they are in the components tree. Because Vue instances implement the event emitter interface, you can actually use an empty Vue instance for that purpose:

var bus = new Vue()
// in component A's method
bus.$emit('id-selected', 1)
// in component B's created hook
bus.$on('id-selected', function (id) {
  // ...
})

This pattern can serve as a replacement for $dispatch and $broadcast in simple scenarios. But for more complex cases, it is recommended to introduce a dedicated state management layer using Vuex.

How to Deal with the Deprecation of Array Filters?

For list filtering with v-for – one of the more common usage of filters – it is now recommended to use computed properties that return a processed copy of the original Array (see updated data grid example). The benefits is that you are no longer limited by the arbitrary filter syntax/API – it’s just plain JavaScript now, and you naturally have access to the filtered result because it is a computed property.

Also see this discussion thread.

How to Deal with the Deprecation of debounce for v-model?

Debouncing is used to limit how often we execute Ajax requests and other expensive operations. Vue’sdebounce attribute parameter for v-model makes this easy, but it also debounces state updates rather than the expensive operations themselves, which comes with limitations.

These limitations become apparent when designing a search indicator. Take a look at that example. Using the debounce attribute, there’d be no way to detect a dirty input before the search begins, because we’d lose access to the input’s real-time state. By decoupling the debounce function from Vue, we’re able to debounce only the operation we want to limit.

There will be other times when debouncing isn’t quite the right wrapper function. In the very common example of hitting an API for search suggestions, waiting to offer suggestions until after the user has stopped typing isn’t an ideal experience. What you probably want instead is a throttling function. Now since you’re already using a utility library like lodash for debounce, refactoring to use throttle instead takes only a few seconds!

Exit mobile version