refactor prop handling (fix vuejs#2587)

yyx990803 · yyx990803 · commit 155a8cc3f24e · 2016-03-30T15:57:08.000-04:00
diff --git a/src/compiler/compile-props.js b/src/compiler/compile-props.js
@@ -1,6 +1,7 @@
 import config from '../config'
 import { parseDirective } from '../parsers/directive'
-import { defineReactive } from '../observer/index'
+import { isSimplePath } from '../parsers/expression'
+import { defineReactive, withoutConversion } from '../observer/index'
 import propDef from '../directives/internal/prop'
 import {
   warn,
@@ -216,23 +217,61 @@ function makePropsLinkFn (props) {
 }
 
 /**
- * Set a prop's initial value on a vm and its data object.
+ * Process a prop with a rawValue, applying necessary coersions,
+ * default values & assertions and call the given callback with
+ * processed value.
  *
  * @param {Vue} vm
  * @param {Object} prop
- * @param {*} value
+ * @param {*} rawValue
+ * @param {Function} fn
  */
 
-export function initProp (vm, prop, value) {
-  const key = prop.path
-  value = coerceProp(prop, value)
+function processPropValue (vm, prop, rawValue, fn) {
+  const isSimple = prop.dynamic && isSimplePath(prop.parentPath)
+  let value = coerceProp(prop, rawValue)
   if (value === undefined) {
     value = getPropDefaultValue(vm, prop)
   }
+  const coerced = value !== rawValue
   if (!assertProp(prop, value, vm)) {
     value = undefined
   }
-  defineReactive(vm, key, value)
+  if (isSimple && !coerced) {
+    withoutConversion(() => {
+      fn(value)
+    })
+  } else {
+    fn(value)
+  }
+}
+
+/**
+ * Set a prop's initial value on a vm and its data object.
+ *
+ * @param {Vue} vm
+ * @param {Object} prop
+ * @param {*} value
+ */
+
+export function initProp (vm, prop, value) {
+  processPropValue(vm, prop, value, value => {
+    defineReactive(vm, prop.path, value)
+  })
+}
+
+/**
+ * Update a prop's value on a vm.
+ *
+ * @param {Vue} vm
+ * @param {Object} prop
+ * @param {*} value
+ */
+
+export function updateProp (vm, prop, value) {
+  processPropValue(vm, prop, value, value => {
+    vm[prop.path] = value
+  })
 }
 
 /**
@@ -276,7 +315,7 @@ function getPropDefaultValue (vm, prop) {
  * @param {Vue} vm
  */
 
-export function assertProp (prop, value, vm) {
+function assertProp (prop, value, vm) {
   if (
     !prop.options.required && ( // non-required
       prop.raw === null ||      // abscent
@@ -331,7 +370,7 @@ export function assertProp (prop, value, vm) {
  * @return {*}
  */
 
-export function coerceProp (prop, value) {
+function coerceProp (prop, value) {
   var coerce = prop.options.coerce
   if (!coerce) {
     return value
@@ -340,6 +379,14 @@ export function coerceProp (prop, value) {
   return coerce(value)
 }
 
+/**
+ * Assert the type of a value
+ *
+ * @param {*} value
+ * @param {Function} type
+ * @return {Object}
+ */
+
 function assertType (value, type) {
   var valid
   var expectedType
@@ -370,12 +417,26 @@ function assertType (value, type) {
   }
 }
 
+/**
+ * Format type for output
+ *
+ * @param {String} type
+ * @return {String}
+ */
+
 function formatType (type) {
   return type
     ? type.charAt(0).toUpperCase() + type.slice(1)
     : 'custom type'
 }
 
+/**
+ * Format value
+ *
+ * @param {*} value
+ * @return {String}
+ */
+
 function formatValue (val) {
   return Object.prototype.toString.call(val).slice(8, -1)
 }
diff --git a/src/directives/internal/prop.js b/src/directives/internal/prop.js
@@ -5,9 +5,7 @@
 
 import Watcher from '../../watcher'
 import config from '../../config'
-import { isSimplePath } from '../../parsers/expression'
-import { withoutConversion } from '../../observer/index'
-import { assertProp, initProp, coerceProp } from '../../compiler/compile-props'
+import { initProp, updateProp } from '../../compiler/compile-props'
 
 const bindingModes = config._propBindingModes
 
@@ -21,22 +19,12 @@ export default {
     const childKey = prop.path
     const parentKey = prop.parentPath
     const twoWay = prop.mode === bindingModes.TWO_WAY
-    const isSimple = isSimplePath(parentKey)
 
     const parentWatcher = this.parentWatcher = new Watcher(
       parent,
       parentKey,
       function (val) {
-        val = coerceProp(prop, val)
-        if (assertProp(prop, val, child)) {
-          if (isSimple) {
-            withoutConversion(() => {
-              child[childKey] = val
-            })
-          } else {
-            child[childKey] = val
-          }
-        }
+        updateProp(child, prop, val)
       }, {
         twoWay: twoWay,
         filters: prop.filters,
@@ -47,14 +35,7 @@ export default {
     )
 
     // set the child initial value.
-    const value = parentWatcher.value
-    if (isSimple && value !== undefined) {
-      withoutConversion(() => {
-        initProp(child, prop, value)
-      })
-    } else {
-      initProp(child, prop, value)
-    }
+    initProp(child, prop, parentWatcher.value)
 
     // setup two-way binding
     if (twoWay) {
diff --git a/test/unit/specs/directives/internal/prop_spec.js b/test/unit/specs/directives/internal/prop_spec.js
@@ -691,10 +691,13 @@ describe('prop', function () {
     expect('did you mean `prop-c`').toHaveBeenWarned()
   })
 
-  it('should use default for undefined values', function () {
+  it('should use default for undefined values', function (done) {
     var vm = new Vue({
       el: el,
       template: '<comp :a="a"></comp>',
+      data: {
+        a: undefined
+      },
       components: {
         comp: {
           template: '{{a}}',
@@ -707,6 +710,15 @@ describe('prop', function () {
       }
     })
     expect(vm.$el.textContent).toBe('1')
+    vm.a = 2
+    Vue.nextTick(function () {
+      expect(vm.$el.textContent).toBe('2')
+      vm.a = undefined
+      Vue.nextTick(function () {
+        expect(vm.$el.textContent).toBe('1')
+        done()
+      })
+    })
   })
 
   it('non reactive values passed down as prop should not be converted', function (done) {
@@ -814,4 +826,32 @@ describe('prop', function () {
       done()
     })
   })
+
+  it('prop coerced value should be reactive', function (done) {
+    var vm = new Vue({
+      el: el,
+      template: '<comp :obj="obj"></comp>',
+      data: {
+        obj: { ok: true }
+      },
+      components: {
+        comp: {
+          props: {
+            obj: {
+              coerce: function () {
+                return { ok: false }
+              }
+            }
+          },
+          template: '<div>{{ obj.ok }}</div>'
+        }
+      }
+    })
+    expect(vm.$el.textContent).toBe('false')
+    vm.$children[0].obj.ok = true
+    Vue.nextTick(function () {
+      expect(vm.$el.textContent).toBe('true')
+      done()
+    })
+  })
 })
