{"record":{"id":"1a2e87d20896b2c3","repo":"Meituan-Dianping/mpvue","slug":"the-data-property-key-is-already-declared-as","errorCode":null,"errorMessage":"The data property \"${key}\" is already declared as a prop. Use prop default value instead.","messagePattern":"The data property \"(.+?)\" is already declared as a prop\\. Use prop default value instead\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/weex-vue-framework/factory.js","lineNumber":3155,"sourceCode":"    );\n  }\n  // proxy data on instance\n  var keys = Object.keys(data);\n  var props = vm.$options.props;\n  var methods = vm.$options.methods;\n  var i = keys.length;\n  while (i--) {\n    var key = keys[i];\n    if (process.env.NODE_ENV !== 'production') {\n      if (methods && hasOwn(methods, key)) {\n        warn(\n          (\"method \\\"\" + key + \"\\\" has already been defined as a data property.\"),\n          vm\n        );\n      }\n    }\n    if (props && hasOwn(props, key)) {\n      process.env.NODE_ENV !== 'production' && warn(\n        \"The data property \\\"\" + key + \"\\\" is already declared as a prop. \" +\n        \"Use prop default value instead.\",\n        vm\n      );\n    } else if (!isReserved(key)) {\n      proxy(vm, \"_data\", key);\n    }\n  }\n  // observe data\n  observe(data, true /* asRootData */);\n}\n\nfunction getData (data, vm) {\n  try {\n    return data.call(vm)\n  } catch (e) {\n    handleError(e, vm, \"data()\");\n    return {}","sourceCodeStart":3137,"sourceCodeEnd":3173,"githubUrl":"https://github.com/Meituan-Dianping/mpvue/blob/6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b/packages/weex-vue-framework/factory.js#L3137-L3173","documentation":"For each data key, Vue checks if it is already a declared prop; if so it warns that the data declaration is redundant and will not proxy it, pointing to the prop's default value mechanism instead. Props are initialized before data, so the data property would shadow or duplicate the prop.","triggerScenarios":"Declaring data() { return { someProp: x } } where someProp is also listed in the props option of the same component.","commonSituations":"Copying prop values into data to 'make them editable', scaffolding tools generating both, or mixins whose data keys overlap with the host component's props.","solutions":["Remove the data entry and rely on the prop, defining a default via the prop's default option","If a local mutable copy is needed, rename it (e.g. localFoo) and initialize from the prop","Use a computed property wrapping the prop instead of duplicating state"],"exampleFix":"// before\nprops: { value: String },\ndata() { return { value: '' }; }\n// after\nprops: { value: { type: String, default: '' } }","handlingStrategy":"validation","validationCode":"function checkDataPropCollisions(options) {\n  const props = options.props || [];\n  const propNames = Array.isArray(props) ? props : Object.keys(props);\n  const dataKeys = Object.keys(typeof options.data === 'function' ? options.data() : (options.data || {}));\n  return dataKeys.filter(k => propNames.includes(k));\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Never redeclare a prop name in data","Use prop defaults for initial values","Prefix local mutable copies (localFoo) when deriving from props"],"tags":["vue","props","data","naming-collision"],"backgroundTag":"option-name-collision","analyzedSha":"6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b","analyzedAt":"2026-09-02T05:17:40.946Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-09T11:17:12.671Z"}