{"record":{"id":"e295e9741ab78db2","repo":"Meituan-Dianping/mpvue","slug":"the-computed-property-key-is-already-defined","errorCode":null,"errorMessage":"The computed property \"${key}\" is already defined in data.","messagePattern":"The computed property \"(.+?)\" is already defined in data\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/weex-vue-framework/factory.js","lineNumber":3205,"sourceCode":"      if (getter === undefined) {\n        warn(\n          (\"No getter function has been defined for computed property \\\"\" + key + \"\\\".\"),\n          vm\n        );\n        getter = noop;\n      }\n    }\n    // create internal watcher for the computed property.\n    watchers[key] = new Watcher(vm, getter, noop, computedWatcherOptions);\n\n    // component-defined computed properties are already defined on the\n    // component prototype. We only need to define computed properties defined\n    // at instantiation here.\n    if (!(key in vm)) {\n      defineComputed(vm, key, userDef);\n    } else if (process.env.NODE_ENV !== 'production') {\n      if (key in vm.$data) {\n        warn((\"The computed property \\\"\" + key + \"\\\" is already defined in data.\"), vm);\n      } else if (vm.$options.props && key in vm.$options.props) {\n        warn((\"The computed property \\\"\" + key + \"\\\" is already defined as a prop.\"), vm);\n      }\n    }\n  }\n}\n\nfunction defineComputed (target, key, userDef) {\n  if (typeof userDef === 'function') {\n    sharedPropertyDefinition.get = createComputedGetter(key);\n    sharedPropertyDefinition.set = noop;\n  } else {\n    sharedPropertyDefinition.get = userDef.get\n      ? userDef.cache !== false\n        ? createComputedGetter(key)\n        : userDef.get\n      : noop;\n    sharedPropertyDefinition.set = userDef.set","sourceCodeStart":3187,"sourceCodeEnd":3223,"githubUrl":"https://github.com/Meituan-Dianping/mpvue/blob/6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b/packages/weex-vue-framework/factory.js#L3187-L3223","documentation":"When initializing computed properties, Vue checks whether the key already exists on the instance; if it comes from instance data (vm.$data), the computed definition would be shadowed/conflict with reactive data, so Vue warns and skips defining the computed.","triggerScenarios":"A key with the same name appears in both data() and computed of the same component (or merged via mixin), e.g. data() { return { total: 0 } } and computed: { total() {...} }.","commonSituations":"Mixin merges adding a computed that collides with component data, renaming refactors leaving stale data keys, or generated options where both sections are derived from the same schema field.","solutions":["Remove the data entry and keep only the computed","Rename one of the two keys","If computed should derive from the data value, give the computed a distinct name"],"exampleFix":"// before\ndata() { return { total: 0 }; },\ncomputed: { total() { return this.a + this.b; } }\n// after\ncomputed: { total() { return this.a + this.b; } }","handlingStrategy":"validation","validationCode":"function checkComputedDataCollisions(options) {\n  const dataKeys = Object.keys(typeof options.data === 'function' ? options.data() : (options.data || {}));\n  return Object.keys(options.computed || {}).filter(k => dataKeys.includes(k));\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Pick distinct names for state vs derived values","Review mixin merges for key overlap","Prefer computed over duplicating data"],"tags":["vue","computed","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"}