warn using reserved attrs as prop (close #4241)

Author: yyx990803

src/core/instance/state.js

@@ -18,7 +18,8 @@ import {
   isPlainObject,
   bind,
   validateProp,
-  noop
+  noop,
+  makeMap
 } from '../util/index'
 
 export function initState (vm: Component) {
@@ -30,6 +31,8 @@ export function initState (vm: Component) {
   initWatch(vm)
 }
 
+const isReservedProp = makeMap('key,ref,slot')
+
 function initProps (vm: Component) {
   const props = vm.$options.props
   if (props) {
@@ -42,6 +45,12 @@ function initProps (vm: Component) {
       const key = keys[i]
       /* istanbul ignore else */
       if (process.env.NODE_ENV !== 'production') {
+        if (isReservedProp(key)) {
+          warn(
+            `"${key}" is a reserved attribute and cannot be used as component prop.`,
+            vm
+          )
+        }
         defineReactive(vm, key, validateProp(key, props, propsData, vm), () => {
           if (vm.$parent && !observerState.isSettingProps) {
             warn(

test/unit/features/options/props.spec.js

@@ -441,4 +441,13 @@ describe('Options props', () => {
       expect(spy.calls.count()).toBe(2)
     }).then(done)
   })
+
+  it('warn reserved props', () => {
+    new Vue({
+      props: {
+        key: String
+      }
+    })
+    expect(`"key" is a reserved attribute`).toHaveBeenWarned()
+  })
 })