Warn when defining a method with same name as a prop (#4950)

chriscasola · yyx990803 · commit 3dc9338479c6 · 2017-02-18T09:09:27.000-05:00
* Warn when defining a method with same name as a prop

* update error message
diff --git a/src/core/instance/state.js b/src/core/instance/state.js
@@ -183,14 +183,23 @@ function createComputedGetter (key) {
 }
 
 function initMethods (vm: Component, methods: Object) {
+  const props = vm.$options.props
   for (const key in methods) {
     vm[key] = methods[key] == null ? noop : bind(methods[key], vm)
-    if (process.env.NODE_ENV !== 'production' && methods[key] == null) {
-      warn(
-        `method "${key}" has an undefined value in the component definition. ` +
-        `Did you reference the function correctly?`,
-        vm
-      )
+    if (process.env.NODE_ENV !== 'production') {
+      if (methods[key] == null) {
+        warn(
+          `method "${key}" has an undefined value in the component definition. ` +
+          `Did you reference the function correctly?`,
+          vm
+        )
+      }
+      if (props && hasOwn(props, key)) {
+        warn(
+          `method "${key}" has already been defined as a prop.`,
+          vm
+        )
+      }
     }
   }
 }
diff --git a/test/unit/features/options/props.spec.js b/test/unit/features/options/props.spec.js
@@ -306,6 +306,27 @@ describe('Options props', () => {
     expect('already declared as a prop').toHaveBeenWarned()
   })
 
+  it('should warn methods already defined as a prop', () => {
+    new Vue({
+      template: '<test a="1"></test>',
+      components: {
+        test: {
+          template: '<div></div>',
+          props: {
+            a: null
+          },
+          methods: {
+            a () {
+
+            }
+          }
+        }
+      }
+    }).$mount()
+    expect(`method "a" has already been defined as a prop`).toHaveBeenWarned()
+    expect(`Avoid mutating a prop directly`).toHaveBeenWarned()
+  })
+
   it('treat boolean props properly', () => {
     const vm = new Vue({
       template: '<comp ref="child" prop-a prop-b="prop-b"></comp>',
