refactor filter application

Author: yyx990803

src/api/data.js

@@ -1,4 +1,3 @@
-var _ = require('../util')
 var Watcher = require('../watcher')
 var Path = require('../parsers/path')
 var textParser = require('../parsers/text')
@@ -99,13 +98,10 @@ exports.$eval = function (text) {
     // the filter regex check might give false positive
     // for pipes inside strings, so it's possible that
     // we don't get any filters here
+    var val = this.$get(dir.expression)
     return dir.filters
-      ? _.applyFilters(
-          this.$get(dir.expression),
-          _.resolveFilters(this, dir.filters).read,
-          this
-        )
-      : this.$get(dir.expression)
+      ? this._applyFilters(val, null, dir.filters)
+      : val
   } else {
     // no filter
     return this.$get(text)

src/directive.js

@@ -31,7 +31,7 @@ function Directive (name, el, vm, descriptor, def, host) {
   this.raw = descriptor.raw
   this.expression = descriptor.expression
   this.arg = descriptor.arg
-  this.filters = _.resolveFilters(vm, descriptor.filters)
+  this.filters = descriptor.filters
   // private
   this._descriptor = descriptor
   this._host = host
@@ -78,14 +78,20 @@ p._bind = function (def) {
           }
         }
       : function () {} // noop if no update is provided
+    // pre-process hook called before the value is piped
+    // through the filters. used in v-repeat.
+    var preProcess = this._preProcess
+      ? _.bind(this._preProcess, this)
+      : null
     var watcher = this._watcher = new Watcher(
       this.vm,
       this._watcherExp,
       update, // callback
       {
         filters: this.filters,
         twoWay: this.twoWay,
-        deep: this.deep
+        deep: this.deep,
+        preProcess: preProcess
       }
     )
     if (this._initValue != null) {
@@ -139,11 +145,7 @@ p._checkStatement = function () {
       fn.call(vm, vm)
     }
     if (this.filters) {
-      handler = _.applyFilters(
-        handler,
-        this.filters.read,
-        vm
-      )
+      handler = vm._applyFilters(handler, null, this.filters)
     }
     this.update(handler)
     return true

src/directives/model/index.js

@@ -27,8 +27,8 @@ module.exports = {
 
   bind: function () {
     // friendly warning...
-    var filters = this.filters
-    if (filters && filters.read && !filters.write) {
+    this.checkFilters()
+    if (this.hasRead && !this.hasWrite) {
       _.warn(
         'It seems you are using a read-only filter with ' +
         'v-model. You might want to use a two-way filter ' +
@@ -51,6 +51,24 @@ module.exports = {
     handler.bind.call(this)
     this.update = handler.update
     this.unbind = handler.unbind
+  },
+
+  /**
+   * Check read/write filter stats.
+   */
+
+  checkFilters: function () {
+    var filters = this.filters
+    if (!filters) return
+    var i = filters.length
+    while (i--) {
+      var filter = _.resolveAsset(this.vm.$options, 'filters', filters[i].name)
+      if (typeof filter === 'function' || filter.read) {
+        this.hasRead = true
+      } else if (filter.write) {
+        this.hasWrite = true
+      }
+    }
   }
 
 }

src/directives/model/select.js

@@ -80,7 +80,7 @@ function initOptions (expression) {
     optionUpdateWatcher,
     {
       deep: true,
-      filters: _.resolveFilters(this.vm, descriptor.filters)
+      filters: descriptor.filters
     }
   )
   // update with initial value

src/directives/model/text.js

@@ -49,7 +49,7 @@ module.exports = {
     // the input with the filtered value.
     // also force update for type="range" inputs to enable
     // "lock in range" (see #506)
-    if ((this.filters && this.filters.read) || el.type === 'range') {
+    if (this.hasRead || el.type === 'range') {
       this.listener = function () {
         if (composing) return
         var charsOffset
@@ -156,5 +156,4 @@ module.exports = {
       _.off(el,'keyup', this.onDel)
     }
   }
-
 }

src/directives/repeat.js

@@ -23,19 +23,6 @@ module.exports = {
   bind: function () {
     // uid as a cache identifier
     this.id = '__v_repeat_' + (++uid)
-    // we need to insert the objToArray converter
-    // as the first read filter, because it has to be invoked
-    // before any user filters. (can't do it in `update`)
-    if (!this.filters) {
-      this.filters = {}
-    }
-    // add the object -> array convert filter
-    var objectConverter = _.bind(objToArray, this)
-    if (!this.filters.read) {
-      this.filters.read = [objectConverter]
-    } else {
-      this.filters.read.unshift(objectConverter)
-    }
     // setup anchor node
     this.anchor = _.createAnchor('v-repeat')
     _.replace(this.el, this.anchor)
@@ -219,13 +206,6 @@ module.exports = {
    */
 
   realUpdate: function (data) {
-    data = data || []
-    var type = typeof data
-    if (type === 'number') {
-      data = range(data)
-    } else if (type === 'string') {
-      data = _.toArray(data)
-    }
     this.vms = this.diff(data, this.vms)
     // update v-ref
     if (this.refID) {
@@ -399,8 +379,11 @@ module.exports = {
     }
     // sync back changes for two-way bindings of primitive values
     var type = typeof raw
-    if (type === 'string' || type === 'number') {
-      var dir = this
+    var dir = this
+    if (
+      this.rawType === 'object' &&
+      (type === 'string' || type === 'number')
+    ) {
       vm.$watch(alias || '$value', function (val) {
         dir._withLock(function () {
           if (dir.converted) {
@@ -532,6 +515,48 @@ module.exports = {
     } else {
       this.cache[data].pop()
     }
+  },
+
+  /**
+   * Pre-process the value before piping it through the
+   * filters, and convert non-Array objects to arrays.
+   *
+   * This function will be bound to this directive instance
+   * and passed into the watcher.
+   *
+   * @param {*} value
+   * @return {Array}
+   * @private
+   */
+
+  _preProcess: function (value) {
+    // regardless of type, store the un-filtered raw value.
+    this.rawValue = value
+    var type = this.rawType = typeof value
+    if (!isPlainObject(value)) {
+      this.converted = false
+      if (type === 'number') {
+        value = range(value)
+      } else if (type === 'string') {
+        value = _.toArray(value)
+      }
+      return value || []
+    } else {
+      // convert plain object to array.
+      var keys = Object.keys(value)
+      var i = keys.length
+      var res = new Array(i)
+      var key
+      while (i--) {
+        key = keys[i]
+        res[i] = {
+          $key: key,
+          $value: value[key]
+        }
+      }
+      this.converted = true
+      return res
+    }
   }
 
 }
@@ -556,43 +581,6 @@ function findNextVm (vm, anchor) {
   return el.__vue__
 }
 
-/**
- * Attempt to convert non-Array objects to array.
- * This is the default filter installed to every v-repeat
- * directive.
- *
- * It will be called with **the directive** as `this`
- * context so that we can mark the repeat array as converted
- * from an object.
- *
- * @param {*} obj
- * @return {Array}
- * @private
- */
-
-function objToArray (obj) {
-  // regardless of type, store the un-filtered raw value.
-  this.rawValue = obj
-  if (!isPlainObject(obj)) {
-    this.converted = false
-    return obj
-  }
-  var keys = Object.keys(obj)
-  var i = keys.length
-  var res = new Array(i)
-  var key
-  while (i--) {
-    key = keys[i]
-    res[i] = {
-      $key: key,
-      $value: obj[key]
-    }
-  }
-  // `this` points to the repeat directive instance
-  this.converted = true
-  return res
-}
-
 /**
  * Create a range array from given number.
  *

src/instance/misc.js

@@ -1,19 +1,40 @@
 var _ = require('../util')
 
 /**
- * Apply a filter to a list of arguments.
- * This is only used internally inside expressions with
- * inlined filters.
+ * Apply a list of filter (descriptors) to a value.
+ * Using plain for loops here because this will be called in
+ * the getter of any watcher with filters so it is very
+ * performance sensitive.
  *
- * @param {String} id
- * @param {Array} args
+ * @param {*} value
+ * @param {*} [oldValue]
+ * @param {Array} filters
+ * @param {Boolean} write
  * @return {*}
  */
 
-exports._applyFilter = function (id, args) {
-  var filter = _.resolveAsset(this.$options, 'filters', id)
-  _.assertAsset(filter, 'filter', id)
-  return (filter.read || filter).apply(this, args)
+exports._applyFilters = function (value, oldValue, filters, write) {
+  var filter, fn, args, arg, offset, i, l, j, k
+  for (i = 0, l = filters.length; i < l; i++) {
+    filter = filters[i]
+    fn = _.resolveAsset(this.$options, 'filters', filter.name)
+    _.assertAsset(fn, 'filter', filter.name)
+    if (!fn) continue
+    fn = write ? fn.write : (fn.read || fn)
+    if (typeof fn !== 'function') continue
+    args = write ? [value, oldValue] : [value]
+    offset = write ? 2 : 1
+    if (filter.args) {
+      for (j = 0, k = filter.args.length; j < k; j++) {
+        arg = filter.args[j]
+        args[j + offset] = arg.dynamic
+          ? this.$get(arg.value)
+          : arg.value
+      }
+    }
+    value = fn.apply(this, args)
+  }
+  return value
 }
 
 /**

src/parsers/text.js

@@ -162,15 +162,11 @@ function inlineFilters (exp, single) {
     if (!dir.filters) {
       return '(' + exp + ')'
     } else {
-      exp = dir.expression
-      for (var i = 0, l = dir.filters.length; i < l; i++) {
-        var filter = dir.filters[i]
-        var args = filter.args
-          ? ',' + JSON.stringify(filter.args).slice(1, -1)
-          : ''
-        exp = 'this._applyFilter("' + filter.name + '",[' + exp + args + '])'
-      }
-      return exp
+      return 'this._applyFilters(' +
+        dir.expression + // value
+        ',null,' +       // oldValue (null for read)
+        JSON.stringify(dir.filters) + // filter descriptors
+        ',false)'        // write?
     }
   }
 }