Skip to content

0.12.11

Compare
Choose a tag to compare
@yyx990803 yyx990803 released this 25 Aug 16:58
· 3593 commits to main since this release

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