franciscolourenco
commented
7 years ago What about providing an interface to create custom v-model modifiers as a way to replace 2 way filters? It seems they are already being used to parse user input (for example v-model.trim). If the parsing/ formatting is simple and independent from a specific data property, using a modifier would allow the parsing/formatting to be reused with much less boilerplate than by setting a computed property for each individual data property, or creating a new component for each input type where we want the parsing/formatting to be applied.
kemar
jeremenichelli
LinusBorg
fergaldoyle
roblav96
smolinari
judocode
yyx990803
marceloadsj
blocka
zephraph
chrisvfritz
gwildu
simplesmiler
dubcanada
sqal
remcohuijser
Towerful
kharysharpe
iamajoe
taoeffect
Uninen
sebastiandedeyne
vebdhuz
PaulKiddle
IanSun
johnleider
Both of these are being deprecated in favor of more explicit named indices and keys. This syntax is a bit magical and has limitations in nested loops. As a bonus, there will be two fewer points of syntax for newcomers to learn.
value in arr(value, index) in arr(switched order of arguments to be more consistent with JavaScript'sforEachandmap)value in obj(value, key) in obj(switched order of arguments, partly to be more consistent with many common object iterators, such as lodash's)(value, key, index) in obj(index will now be available in object iteration for visual purposes, such as table striping)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
thisinside directive hooks andbind,updateandunbindnow receives everything as arguments.Note the
bindingobject is immutable, settingbinding.valuewill have no effect, and properties added to it will not be persisted. You can persist directive state onelif you absolutely need to:You can use destructuring if you only care about the value:
In addition, the
updatehook has a few changes:bind.binding.value === binding.oldValueto skip unnecessary updates, but there are also cases where you'd want to always apply updates, e.g. when the directive is bound to an Object that might have been mutated instead of replaced.elementDirective, directive params and directive options such asacceptStatement,deepetc. are all deprecated.Filter Usage and Syntax Change
In Vue 2.0, there are several changes to the filter system:
{{}}tags). In the past we've found using filters with directives such asv-model,v-onetc. led to more complexity than convenience, and for list filtering onv-forit is more appropriate to move that logic into JavaScript as computed properties.The filter syntax has changed to be more inline with JavaScript function invocation, instead of taking space-delimited arguments:
Transition System
Transition CSS class changes:
The always-on
v-transitionclass is no longer added and Vue now uses the same classes Angular and React CSSTransitionGroup does:v-enter: applied before element is inserted, remove after 1 tick. (starting state for enter)v-enter-active: applied before element is inserted, removed when transition/animation finishes. (active + ending state for enter)v-leave: applied right when the leave transition is triggered, remove after 1 tick (starting state for leave)v-leave-active: applied right when the leave transition is triggered, removed when the transition/animation finishes. (active + ending state for leave)v-enter-activeandv-leave-activegives you the ability to specify different easing curves for enter/leave transitions. In most cases, upgrading means simply replacing your currentv-leavewithv-leave-active. (For CSS animations, usev-enter-active+v-leave-active)Transition API Change
The
<transition>componentAll single-element transition effects are now applied by wrapping the target element/component with the
<transition>built-in component. This is an abstract component, which means it does not render an extra DOM element, nor does it show up in the inspected component hierarchy. It simply applies the transition behavior to the wrapped content inside.The simplest usage example:
The component defines a number of props and events that maps directly to the old transition definition options:
Props
Used to automatically generate transition CSS class names. e.g.
name: 'fade'will auto expand to.fade-enter,.fade-enter-active, etc. Defaults to"v".Whether to apply transition on initial render. Defaults to
false.Whether to apply CSS transition classes. Defaults to
true. If set tofalse, will only trigger JavaScript hooks registered via component events.Specify the type of transition events to wait for to determine transition end timing. Available values are
"transition"and"animation". By default, it will automatically detect the type that has a longer duration.Controls the timing sequence of leaving/entering transitions. Available modes are
"out-in"and"in-out"; defaults to simultaneous.Individually configure transition CSS classes.
Example applying transition to dynamic components:
Events
Corresponds to the JavaScript hooks available in 1.x API.
Example:
When the entering transition completes, the component's
transitionCompletemethod will be called with the transitioned DOM element as the argument.Some notes:
leave-cancelledis no longer available for insertion/removals. Once a leave transition starts, it cannot be cancelled. It is, however, still available forv-showtransitions.enterandleavehooks, the presence ofcbas the second argument indicates the user wants explicit control of the ending timing of the transition.The
<transition-group>componentAll multi-element transition effects are now applied by wrapping the elements with the
<transition-group>built-in component. It exposes the same props and events as<transition>does. The difference being that:<transition>,<transition-group>renders a real DOM element. By default it renders a<span>, and you can configure what element is should render via thetagprop. You can also use it with theisattribute, e.g.<ul is="transition-group">.<transition-group>does not support themodeprop.<transition-group>must be uniquely keyed.Example:
Moving Transitions
<transition-group>supports moving transitions via CSS transform. When a child's position on screen has changed after an updated, it will get applied a moving CSS class (auto generated from thenameprop or configured with themoveClassprop). If the CSStransformproperty is "transition-able" when the moving class is applied, the element will be smoothly animated to its destination using the FLIP technique.See a live demo here.
Creating Reusable Transitions
Now that transitions are applied via components, they are no longer considered an asset type, so the global
Vue.transition()method and thetransitionoption are both deprecated. You can just configure the transition inline with component props and events. But how do we create reusable transition effects now, especially those with custom JavaScript hooks? Well, the answer is creating your own transition components (they are particularly suitable as functional components):You can then use it like this:
v-model changes
The
lazyandnumberparams are now modifiers:.trim- trims the input, as the name suggests.debounceparam has been deprecated. (See upgrade tip at bottom)v-modelno longer cares about initial inlinevalue. It will always treat the Vue instance data as the source of truth. This means the following will render with a value of 1 instead of 2:Same goes for
<textarea>with existing content. So instead of:Do:
The main idea is that the JS side should be considered the source of truth, not your templates.
v-modelno longer works when used on av-foriterated primitive value:This doesn't work because it's the equivalent of this in JavaScript:
As you can see, setting
strto another value in the iterator function will do nothing because it's just a local variable in the function scope. Instead, you should use an array of objects so thatv-modelcan update the field on the object:Props Behavior
.onceand.syncare deprecated. Props are now always one-way down. To produce side effects in the parent scope, a component needs to explicitly emit an event instead of relying on implicit binding.aand then setthis.a = someOtherValuein the component. Due to the new rendering mechanism, whenever the parent component re-renders, the child component's local changes will be overwritten. In general, in 2.0 you should treat props as immutable. Most use cases of mutating a prop can be replaced by either a data property or a computed property.keep-alive
keep-aliveis no longer a special attribute: it is now a wrapper component, similar to<transition>:This makes it possible to use
keep-aliveon multiple conditional children (note the children should eventually evaluate to a single child - any child other than the first one will be ignored):When used together with
<transition>, make sure to nest it inside:Slots
<slot>s with the same name in the same template. When a slot is rendered it is "used up" and cannot be rendered elsewhere in the same render tree.<slot>no longer preserves theslotattribute. Use a wrapper element to style them, or, for advanced use cases, modify the inserted content programmatically using render functions.Refs
v-refis now no longer a directive: it is now a special attribute similar tokeyandtransition:Dynamic ref bindings are now also supported:
vm.$elsandvm.$refsare merged. When used on a normal element the ref will be the DOM element, and when used on a component the ref will be the component instance.vm.$refsare no longer reactive, because they are registered/updated during the render process itself. Making them reactive would require duplicate renders for every change.On the other hand,
$refsare designed primarily for programmatic access in JavaScript - it is not recommended to rely on$refsin templates because it entails referring to state that does not belong to the instance itself.Misc
track-byhas been replaced withkey. It now follows the same rule for binding an attribute: withoutv-bind:or:prefix, it is treated as a literal string. In most cases you'd want to use a dynamic binding, which expects a full expression instead of a string key. For example:Interpolation inside attributes are deprecated:
Attribute binding behavior change: only
null,undefinedandfalseare considered falsy when binding attributes. This means0and empty strings will render as-is. For enumerated attributes. This means:draggable="''"will render asdraggable="true".Also, for enumerated attributes, in addition to the falsy values above, the string value of "false" will also render as attr="false".
v-onnow only listens to custom events $emitted by that component. (no longer listens to DOM events)v-elseno longer works withv-show- just use negation expression.{{* foo }}) deprecated - usev-onceinstead.:styleno longer supports inline!importantpropsDatainstead)eloption can no longer be used inVue.extend. It can now only be used as an instance creation option.Vue.setandVue.deletecannot work on Vue instances. It is now mandatory to properly declare all top-level reactive properties in thedataoption.$data. This prevents some edge cases in the reactivity system and makes the component state more predictable (especially with type-checking systems).User watchers created via
vm.$watchare now fired before the associated component re-renders. This gives the user a chance to further update other state before the component re-render, thus avoiding unnecessary updates. For example, you can watch a component prop and update the component's own data when the prop changes.To do something with the DOM after component updates, just use the updated lifecycle hook.
Upgrade Tips
How to Deal with Deprecation of
$dispatchand$broadcast?The reason that we are deprecating
$dispatchand$broadcastis 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).$dispatchand$broadcastalso 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:And don't forget to use $off to unbind the event.
This pattern can serve as a replacement for
$dispatchand$broadcastin 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
debounceforv-model?Debouncing is used to limit how often we execute Ajax requests and other expensive operations. Vue's
debounceattribute parameter forv-modelmakes 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
debounceattribute, 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 usethrottleinstead takes only a few seconds!