move props definition to component prototype when possible

yyx990803 · yyx990803 · commit e870e6c6afd3 · 2017-02-14T12:20:43.000-05:00
diff --git a/src/core/global-api/extend.js b/src/core/global-api/extend.js
@@ -2,7 +2,7 @@
 
 import config from '../config'
 import { warn, mergeOptions } from '../util/index'
-import { defineComputed } from '../instance/state'
+import { defineComputed, proxy } from '../instance/state'
 
 export function initExtend (Vue: GlobalAPI) {
   /**
@@ -48,6 +48,12 @@ export function initExtend (Vue: GlobalAPI) {
     )
     Sub['super'] = Super
 
+    // For props and computed properties, we define the proxy getters on
+    // the Vue instances at extension time, on the extended prototype. This
+    // avoids Object.defineProperty calls for each instance created.
+    if (Sub.options.props) {
+      initProps(Sub)
+    }
     if (Sub.options.computed) {
       initComputed(Sub)
     }
@@ -79,6 +85,13 @@ export function initExtend (Vue: GlobalAPI) {
   }
 }
 
+function initProps (Comp) {
+  const props = Comp.options.props
+  for (const key in props) {
+    proxy(Comp.prototype, `_props`, key)
+  }
+}
+
 function initComputed (Comp) {
   const computed = Comp.options.computed
   for (const key in computed) {
diff --git a/src/core/instance/state.js b/src/core/instance/state.js
@@ -21,6 +21,13 @@ import {
   noop
 } from '../util/index'
 
+const sharedPropertyDefinition = {
+  enumerable: true,
+  configurable: true,
+  get: noop,
+  set: noop
+}
+
 export function initState (vm: Component) {
   vm._watchers = []
   const opts = vm.$options
@@ -71,7 +78,9 @@ function initProps (vm: Component, propsOptions: Object) {
     } else {
       defineReactive(props, key, value)
     }
-    proxy(vm, props, key)
+    if (!(key in vm)) {
+      proxy(vm, `_props`, key)
+    }
   }
   observerState.shouldConvert = true
 }
@@ -101,7 +110,7 @@ function initData (vm: Component) {
         vm
       )
     } else if (!isReserved(keys[i])) {
-      proxy(vm, data, keys[i])
+      proxy(vm, `_data`, keys[i])
     }
   }
   // observe data
@@ -128,28 +137,21 @@ function initComputed (vm: Component, computed: Object) {
   }
 }
 
-const computedSharedDefinition = {
-  enumerable: true,
-  configurable: true,
-  get: noop,
-  set: noop
-}
-
 export function defineComputed (target: any, key: string, userDef: Object | Function) {
   if (typeof userDef === 'function') {
-    computedSharedDefinition.get = createComputedGetter(key)
-    computedSharedDefinition.set = noop
+    sharedPropertyDefinition.get = createComputedGetter(key)
+    sharedPropertyDefinition.set = noop
   } else {
-    computedSharedDefinition.get = userDef.get
+    sharedPropertyDefinition.get = userDef.get
       ? userDef.cache !== false
         ? createComputedGetter(key)
         : userDef.get
       : noop
-    computedSharedDefinition.set = userDef.set
+    sharedPropertyDefinition.set = userDef.set
       ? userDef.set
       : noop
   }
-  Object.defineProperty(target, key, computedSharedDefinition)
+  Object.defineProperty(target, key, sharedPropertyDefinition)
 }
 
 function createComputedGetter (key) {
@@ -249,15 +251,12 @@ export function stateMixin (Vue: Class<Component>) {
   }
 }
 
-function proxy (vm: Component, source: Object, key: string) {
-  Object.defineProperty(vm, key, {
-    configurable: true,
-    enumerable: true,
-    get: function proxyGetter () {
-      return source[key]
-    },
-    set: function proxySetter (val) {
-      source[key] = val
-    }
-  })
+export function proxy (target: Object, sourceKey: string, key: string) {
+  sharedPropertyDefinition.get = function proxyGetter () {
+    return this[sourceKey][key]
+  }
+  sharedPropertyDefinition.set = function proxySetter (val) {
+    this[sourceKey][key] = val
+  }
+  Object.defineProperty(target, key, sharedPropertyDefinition)
 }
