make props available in created() and data()

Author: yyx990803

examples/grid/grid.js

@@ -4,21 +4,18 @@ Vue.component('demo-grid', {
   replace: true,
   props: ['data', 'columns', 'filter-key'],
   data: function () {
+    var reversed = {}
+    this.columns.forEach(function (key) {
+      reversed[key] = false
+    })
     return {
       data: null,
       columns: null,
       sortKey: '',
       filterKey: '',
-      reversed: {}
+      reversed: reversed
     }
   },
-  compiled: function () {
-    // initialize reverse state
-    var self = this
-    this.columns.forEach(function (key) {
-      self.reversed.$add(key, false)
-    })
-  },
   methods: {
     sortBy: function (key) {
       this.sortKey = key
@@ -40,4 +37,4 @@ var demo = new Vue({
       { name: 'Jet Li', power: 8000 }
     ]
   }
-})
+})

src/compiler/compile.js

@@ -127,16 +127,30 @@ function teardownDirs (vm, dirs, destroying) {
 }
 
 /**
- * Compile the root element of an instance. There are
- * 3 types of things to process here:
+ * Compile link props on an instance.
  *
- * 1. props on parent container (child scope)
- * 2. other attrs on parent container (parent scope)
- * 3. attrs on the component template root node, if
+ * @param {Vue} vm
+ * @param {Element} el
+ * @param {Object} options
+ * @return {Function}
+ */
+
+exports.compileAndLinkProps = function (vm, el, props) {
+  var propsLinkFn = compileProps(el, props)
+  var propDirs = linkAndCapture(function () {
+    propsLinkFn(vm, null)
+  }, vm)
+  return makeUnlinkFn(vm, propDirs)
+}
+
+/**
+ * Compile the root element of an instance.
+ *
+ * 1. attrs on parent container (parent scope)
+ * 2. attrs on the component template root node, if
  *    replace:true (child scope)
  *
- * Also, if this is a block instance, we only need to
- * compile 1 & 2 here.
+ * If this is a block instance, we only need to compile 1.
  *
  * This function does compile and link at the same time,
  * since root linkers can not be reused. It returns the
@@ -152,13 +166,7 @@ function teardownDirs (vm, dirs, destroying) {
  exports.compileAndLinkRoot = function (vm, el, options) {
   var containerAttrs = options._containerAttrs
   var replacerAttrs = options._replacerAttrs
-  var props = options.props
-  var propsLinkFn, parentLinkFn, replacerLinkFn
-
-  // 1. props
-  propsLinkFn = props
-    ? compileProps(el, containerAttrs || {}, props)
-    : null
+  var parentLinkFn, replacerLinkFn
 
   // only need to compile other attributes for
   // non-block instances
@@ -191,7 +199,6 @@ function teardownDirs (vm, dirs, destroying) {
 
   // link self
   var selfDirs = linkAndCapture(function () {
-    if (propsLinkFn) propsLinkFn(vm, null)
     if (replacerLinkFn) replacerLinkFn(vm, el)
   }, vm)
 
@@ -406,7 +413,6 @@ function makeChildLinkFn (linkFns) {
  * a props link function.
  *
  * @param {Element|DocumentFragment} el
- * @param {Object} attrs
  * @param {Array} propDescriptors
  * @return {Function} propsLinkFn
  */
@@ -416,7 +422,7 @@ var settablePathRE = /^[A-Za-z_$][\w$]*(\.[A-Za-z_$][\w$]*|\[[^\[\]]+\])*$/
 var literalValueRE = /^(true|false)$|^\d.*/
 var identRE = require('../parsers/path').identRE
 
-function compileProps (el, attrs, propDescriptors) {
+function compileProps (el, propDescriptors) {
   var props = []
   var i = propDescriptors.length
   var descriptor, name, assertions, value, path, prop, literal, single
@@ -449,9 +455,12 @@ function compileProps (el, attrs, propDescriptors) {
         'must be valid identifiers.'
       )
     }
-    value = attrs[name]
-    /* jshint eqeqeq:false */
-    if (value != null) {
+    value = el.getAttribute(name)
+    if (value !== null) {
+      // important so that this doesn't get compiled
+      // again as a normal attribute binding
+      el.removeAttribute(name)
+      // create a prop descriptor
       prop = {
         name: name,
         raw: value,
@@ -464,9 +473,6 @@ function compileProps (el, attrs, propDescriptors) {
         if (el && el.nodeType === 1) {
           el.removeAttribute(name)
         }
-        // important so that this doesn't get compiled
-        // again as a normal attribute binding
-        attrs[name] = null
         prop.dynamic = true
         prop.parentPath = textParser.tokensToExp(tokens)
         // check prop binding type.
@@ -491,9 +497,7 @@ function compileProps (el, attrs, propDescriptors) {
       }
       props.push(prop)
     } else if (assertions && assertions.required) {
-      _.warn(
-        'Missing required prop: ' + name
-      )
+      _.warn('Missing required prop: ' + name)
     }
   }
   return makePropsLinkFn(props)
@@ -514,6 +518,7 @@ function makePropsLinkFn (props) {
       prop = props[i]
       path = prop.path
       if (prop.dynamic) {
+        // dynamic prop
         if (vm.$parent) {
           if (prop.mode === propBindingModes.ONE_TIME) {
             // one time binding
@@ -654,7 +659,6 @@ function compileDirectives (elOrAttrs, options) {
     attr = attrs[i]
     name = attr.name
     value = attr.value
-    if (value === null) continue
     if (name.indexOf(config.prefix) === 0) {
       dirName = name.slice(config.prefix.length)
       dirDef = resolveAsset(options, 'directives', dirName)

src/directives/prop.js

@@ -1,3 +1,8 @@
+// NOTE: the prop internal directive is compiled and linked
+// during _initScope(), before the created hook is called.
+// The purpose is to make the initial prop values available
+// inside `created` hooks and `data` functions.
+
 var _ = require('../util')
 var Watcher = require('../watcher')
 var bindingModes = require('../config')._propBindingModes
@@ -38,25 +43,34 @@ module.exports = {
         }
       })
     )
-    
-    // set the child initial value first, before setting
-    // up the child watcher to avoid triggering it
-    // immediately.
+
+    // set the child initial value.
+    // !!! We need to set it also on raw data here, because
+    // props are initialized before data is fully observed
     var value = this.parentWatcher.value
     if (_.assertProp(prop, value)) {
-      child.$set(childKey, value)
+      if (childKey === '$data') {
+        child._data = value
+      } else {
+        child[childKey] = child._data[childKey] = value
+      }
     }
 
     // only setup two-way binding if this is not a one-way
     // binding.
     if (prop.mode === bindingModes.TWO_WAY) {
-      this.childWatcher = new Watcher(
-        child,
-        childKey,
-        withLock(function (val) {
-          parent.$set(parentKey, val)
-        })
-      )
+      // important: defer the child watcher creation until
+      // the created hook (after data observation)
+      var self = this
+      child.$once('hook:created', function () {
+        self.childWatcher = new Watcher(
+          child,
+          childKey,
+          withLock(function (val) {
+            parent[parentKey] = val
+          })
+        )
+      })
     }
   },
 

src/instance/compile.js

@@ -139,6 +139,10 @@ exports._destroy = function (remove, deferCleanup) {
   while (i--) {
     this._children[i].$destroy()
   }
+  // teardown props
+  if (this._propsUnlinkFn) {
+    this._propsUnlinkFn()
+  }
   // teardown all directives. this also tearsdown all
   // directive-owned watchers.
   if (this._unlinkFn) {
@@ -185,4 +189,4 @@ exports._cleanup = function () {
   this._callHook('destroyed')
   // turn off all instance listeners.
   this.$off()
-}
+}

src/instance/init.js

@@ -73,8 +73,9 @@ exports._init = function (options) {
     this
   )
 
-  // set data after merge.
-  this._data = options.data || {}
+  // initialize data as empty object.
+  // it will be filled up in _initScope().
+  this._data = {}
 
   // initialize data observation and scope inheritance.
   this._initScope()

src/instance/misc.js

@@ -83,4 +83,4 @@ exports._resolveComponent = function (id, cb) {
     // normal component
     cb(factory)
   }
-}
+}

src/instance/scope.js

@@ -1,4 +1,5 @@
 var _ = require('../util')
+var compiler = require('../compiler')
 var Observer = require('../observer')
 var Dep = require('../observer/dep')
 
@@ -12,35 +13,30 @@ var Dep = require('../observer/dep')
 
 exports._initScope = function () {
   this._initProps()
+  this._initMeta()
+  this._initMethods()
   this._initData()
   this._initComputed()
-  this._initMethods()
-  this._initMeta()
 }
 
 /**
  * Initialize props.
  */
 
 exports._initProps = function () {
-  // make sure all props properties are observed
-  var data = this._data
-  var props = this.$options.props
-  var prop, key, i
-  if (props) {
-    i = props.length
-    while (i--) {
-      prop = props[i]
-      // props can be strings or object descriptors
-      key = _.camelize(
-        (typeof prop === 'string'
-          ? prop
-          : prop.name).replace(/^data-/, '')
+  var options = this.$options
+  var el = options.el
+  var props = options.props
+  this._propsUnlinkFn = el && props
+    ? compiler.compileAndLinkProps(
+        this, el, props
       )
-      if (!(key in data) && key !== '$data') {
-        data[key] = undefined
-      }
-    }
+    : null
+  if (props && !el) {
+    _.warn(
+      'Props will not be compiled if no `el` option is ' +
+      'provided at instantiation.'
+    )
   }
 }
 
@@ -49,8 +45,14 @@ exports._initProps = function () {
  */
 
 exports._initData = function () {
-  // proxy data on instance
+  var propsData = this._data
+  var optionsDataFn = this.$options.data
+  var optionsData = optionsDataFn && optionsDataFn()
+  if (optionsData) {
+    this._data = _.extend(optionsData, propsData)
+  }
   var data = this._data
+  // proxy data on instance
   var keys = Object.keys(data)
   var i, key
   i = keys.length

src/util/options.js

@@ -65,18 +65,20 @@ strats.data = function (parentVal, childVal, vm) {
         parentVal.call(this)
       )
     }
-  } else {
-    // instance merge, return raw object
-    var instanceData = typeof childVal === 'function'
-      ? childVal.call(vm)
-      : childVal
-    var defaultData = typeof parentVal === 'function'
-      ? parentVal.call(vm)
-      : undefined
-    if (instanceData) {
-      return mergeData(instanceData, defaultData)
-    } else {
-      return defaultData
+  } else if (parentVal || childVal) {
+    return function mergedInstanceDataFn () {
+      // instance merge
+      var instanceData = typeof childVal === 'function'
+        ? childVal.call(vm)
+        : childVal
+      var defaultData = typeof parentVal === 'function'
+        ? parentVal.call(vm)
+        : undefined
+      if (instanceData) {
+        return mergeData(instanceData, defaultData)
+      } else {
+        return defaultData
+      }
     }
   }
 }

src/watcher.js

@@ -86,7 +86,11 @@ p.get = function () {
     if (config.warnExpressionErrors) {
       _.warn(
         'Error when evaluating expression "' +
-        this.expression + '"', e
+        this.expression + '". ' +
+        (config.debug
+          ? '' :
+          'Turn on debug mode to see stack trace.'
+        ), e
       )
     }
   }