{"record":{"id":"29c7ec6c27792c09","repo":"Meituan-Dianping/mpvue","slug":"avoid-mutating-a-prop-directly-since-the-value-wil","errorCode":null,"errorMessage":"Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: \"${key}\"","messagePattern":"Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders\\. Instead, use a data or computed property based on the prop's value\\. Prop being mutated: \"(.+?)\"","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/weex-vue-framework/factory.js","lineNumber":3102,"sourceCode":"  // instead of dynamic object key enumeration.\n  var keys = vm.$options._propKeys = [];\n  var isRoot = !vm.$parent;\n  // root instance props should be converted\n  observerState.shouldConvert = isRoot;\n  var loop = function ( key ) {\n    keys.push(key);\n    var value = validateProp(key, propsOptions, propsData, vm);\n    /* istanbul ignore else */\n    if (process.env.NODE_ENV !== 'production') {\n      if (isReservedAttribute(key) || config.isReservedAttr(key)) {\n        warn(\n          (\"\\\"\" + key + \"\\\" is a reserved attribute and cannot be used as component prop.\"),\n          vm\n        );\n      }\n      defineReactive$$1(props, key, value, function () {\n        if (vm.$parent && !isUpdatingChildComponent) {\n          warn(\n            \"Avoid mutating a prop directly since the value will be \" +\n            \"overwritten whenever the parent component re-renders. \" +\n            \"Instead, use a data or computed property based on the prop's \" +\n            \"value. Prop being mutated: \\\"\" + key + \"\\\"\",\n            vm\n          );\n        }\n      });\n    } else {\n      defineReactive$$1(props, key, value);\n    }\n    // static props are already proxied on the component's prototype\n    // during Vue.extend(). We only need to proxy props defined at\n    // instantiation here.\n    if (!(key in vm)) {\n      proxy(vm, \"_props\", key);\n    }\n  };","sourceCodeStart":3084,"sourceCodeEnd":3120,"githubUrl":"https://github.com/Meituan-Dianping/mpvue/blob/6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b/packages/weex-vue-framework/factory.js#L3084-L3120","documentation":"Vue warns when you assign directly to a prop (e.g. this.myProp = x) because props are reactive values owned by the parent; any parent re-render overwrites the mutation. In dev mode, defineReactive installs a setter watcher on each prop that fires this warning when the component's own code writes to it.","triggerScenarios":"Assigning to a declared prop inside the child component, e.g. this.title = 'new' in a lifecycle hook, method, watcher, or v-model on a prop without a local proxy.","commonSituations":"Trying to make a prop two-way bindable, mutating an object/array prop's reference, v-model=\"someProp\" in the child's template, or migrating Vue 1 code that allowed two-way prop binding.","solutions":["Use a local data property initialized from the prop and mutate that instead","Define a computed property with a getter on the prop and a setter that emits an event to the parent","Emit an event ($emit('input', val)) and let the parent update the prop via v-model or explicit binding","If mutating an object/array prop's contents is intentional, suppress via a local deep copy or document the mutation"],"exampleFix":"// before\nprops: ['count'],\ncreated() { this.count = 10; }\n// after\nprops: ['count'],\ndata() { return { localCount: this.count }; },\ncreated() { this.localCount = 10; }","handlingStrategy":"validation","validationCode":"function assertNoPropMutation(component, props) {\n  props.forEach(p => {\n    if (component[p] !== undefined) {\n      console.warn(`Avoid writing to prop '${p}'; use a local data copy.`);\n    }\n  });\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Never assign to this.someProp inside a component","Initialize local copies in data() or use computed with setter + $emit","Enable eslint-plugin-vue's no-mutating-props rule"],"tags":["vue","props","reactivity","one-way-data-flow"],"backgroundTag":"direct-prop-mutation","analyzedSha":"6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b","analyzedAt":"2026-09-02T05:17:40.946Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-09T11:17:12.671Z"}