Meituan-Dianping/mpvue · error

The data property " " is already declared as a prop. Use…

Error message

The data property "${key}" is already declared as a prop. Use prop default value instead.

What it means

Raised in initData when a data key also exists in the props option. Props are initialized before data and proxied on the instance first, so the data entry would collide with the prop binding; moreover props are owned by the parent and re-supplied on every parent re-render, making the local data value unreachable. Vue skips proxying the data key, and the prop's value (or its default) is what the instance actually reads.

Solutions

1. Remove the duplicated key from data and rely on the prop, declaring a prop default if a fallback value is needed
2. If the component needs a locally mutable version, keep the prop and add a differently-named data property initialized from it

When it happens

Trigger: Thrown at src/core/instance/state.js:145 when the library encounters an invalid state.

Common situations: See trigger scenarios.

AI-assisted analysis of Meituan-Dianping/mpvue@6c5d78ee04 (2026-09-02). Data as JSON: /api/errors/7ac0b795a518dfe7. Report an issue: GitHub.

Appendix: source

Thrown at src/core/instance/state.js:145

    )
  }
  // proxy data on instance
  const keys = Object.keys(data)
  const props = vm.$options.props
  const methods = vm.$options.methods
  let i = keys.length
  while (i--) {
    const key = keys[i]
    if (process.env.NODE_ENV !== 'production') {
      if (methods && hasOwn(methods, key)) {
        warn(
          `method "${key}" has already been defined as a data property.`,
          vm
        )
      }
    }
    if (props && hasOwn(props, key)) {
      process.env.NODE_ENV !== 'production' && warn(
        `The data property "${key}" is already declared as a prop. ` +
        `Use prop default value instead.`,
        vm
      )
    } else if (!isReserved(key)) {
      proxy(vm, `_data`, key)
    }
  }
  // observe data
  observe(data, true /* asRootData */)
}

function getData (data: Function, vm: Component): any {
  try {
    return data.call(vm)
  } catch (e) {
    handleError(e, vm, `data()`)
    return {}

View on GitHub (pinned to 6c5d78ee04)