Improvements
- Two-way filters for
v-model have been reworked. A v-model binding with read filters will no longer attempt to format the value when the user is still typing; instead it formats the value on blur. This results in a much more natural UX and makes two-way filters much more usable. Demo
<select v-model="x" options="options"> now supports Object values. That is to say you can provide the options array like this:
options = [
{ text: 'a', value: { msg: 'A' }},
{ text: 'b', value: { msg: 'B' }},
{ text: 'c', value: { msg: 'C' }}
]
And the bound value x will be the actual object instead of a serialized string.
- filterBy filter has been improved (#1094):
1. It now accepts multiple dataKeys arguments
2. Each dataKey argument can be either a String or an Array of Strings.
3. You can alternatively provide a custom filter function as the first argument.
Example:
<!-- multiple dataKeys -->
<div v-repeat="user in users | filterBy searchText in 'fieldA' 'fieldB'">
<!-- Array dataKeys -->
<!-- fields = ['fieldA', 'fieldB'] -->
<div v-repeat="user in users | filterBy searchText in fields">
<!-- filter by function -->
<div v-repeat="user in users | filterBy myCustomFilterFunction">
currency filter can now accept an empty string argument to output the result without a currency symbol.- When in
debug mode, Vue will also print async stack traces for warnings. Previously the stack trace stops at the internal batcher handler due to Vue's async update queue; now the stack trace goes all the way back to what originally triggered the update.
- Component asset names can also be in PascalCase in addition to camelCase:
myComponent and MyComponent will both be interpreted as my-component during the lookup.
- Data object properties prefixed with
_ and $ are now also observed; this means they can be used for data binding, however if it is a root-level property it will not be proxied on the vm instance.
For example:
var vm = new Vue({
data: {
_test: 123
}
})
vm._test // -> undefined
vm.$data._test // -> 123
<!-- also need to access via $data in templates -->
<p>{{ $data._test }}</p>
- #### Computed Property Caching
You can now turn off caching for a specific computed property so that it behaves like a simple getter.
By default, a computed propoerty's cache is only invalidated when one of its reactive dependencies have changed, but this can result in confusion when the user assumes it behaves like a getter.
For example:
computed: {
example: function () {
return Date.now() + this.msg
}
}
The cache for vm.example only invalidates when vm.msg has changed, because Vue has no way to detect whether Date.now() has changed or not (polling is obviously a bad idea). So, when you access vm.example, it will not change unless vm.msg has changed.
This is different from a simple getter-like behavior, where the function is re-evaludated every time the property is accessed. If that is what you want, you can turn off caching for that property like this:
computed: {
example: {
get: function () { /* same getter */ },
cache: false
}
}
New
- Added
debounce filter which can be used with v-on for debouncing DOM events.
Example:
<input v-on="input: onInput | denounce 300">
Fixed
v-attr should also set corresponding properties for selected and checked.- #1139 error when compiling props for a component with fragment
el
- #1150
keep-alive and wait-for not working together
- #1152 dynamic component left undestroyed with
keep-alive + wait-for
- #1155 select option with empty string initial value not initialized properly
- #1162 computed properties evaluation affected by order of data manipulations
- #1185
v-if linker cache not taking transclusion host into account
- #1191 resolveAsset not working properly for transcluded components in strict mode
vuejs/vue
