{"record":{"id":"a9f1f03f2745af67","repo":"Meituan-Dianping/mpvue","slug":"avoid-using-observed-data-object-as-vnode-data-a9f1f0","errorCode":null,"errorMessage":"Avoid using observed data object as vnode data: ${JSON.stringify(data)}\nAlways create fresh vnode data objects in each render!","messagePattern":"Avoid using observed data object as vnode data: (.+?)\nAlways create fresh vnode data objects in each render!","errorType":"console","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/core/vdom/create-element.js","lineNumber":53,"sourceCode":"    normalizationType = children\n    children = data\n    data = undefined\n  }\n  if (isTrue(alwaysNormalize)) {\n    normalizationType = ALWAYS_NORMALIZE\n  }\n  return _createElement(context, tag, data, children, normalizationType)\n}\n\nexport function _createElement (\n  context: Component,\n  tag?: string | Class<Component> | Function | Object,\n  data?: VNodeData,\n  children?: any,\n  normalizationType?: number\n): VNode {\n  if (isDef(data) && isDef((data: any).__ob__)) {\n    process.env.NODE_ENV !== 'production' && warn(\n      `Avoid using observed data object as vnode data: ${JSON.stringify(data)}\\n` +\n      'Always create fresh vnode data objects in each render!',\n      context\n    )\n    return createEmptyVNode()\n  }\n  // object syntax in v-bind\n  if (isDef(data) && isDef(data.is)) {\n    tag = data.is\n  }\n  if (!tag) {\n    // in case of component :is set to falsy value\n    return createEmptyVNode()\n  }\n  // warn against non-primitive key\n  if (process.env.NODE_ENV !== 'production' &&\n    isDef(data) && isDef(data.key) && !isPrimitive(data.key)\n  ) {","sourceCodeStart":35,"sourceCodeEnd":71,"githubUrl":"https://github.com/Meituan-Dianping/mpvue/blob/6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b/src/core/vdom/create-element.js#L35-L71","documentation":"Vue's virtual DOM patches by comparing vnode data objects. If the `data` argument passed to createElement (or h) is a reactive, observed object (it has an `__ob__` property), Vue refuses to use it because mutating/observing shared data across renders corrupts the patching process. It warns and renders an empty vnode instead, so the element silently disappears.","triggerScenarios":"Calling `h(tag, someReactiveDataObject, children)` where the data object came from `data()` state, props, or a store getter, e.g. `h('div', this.attrsFromState)` in a render function or functional component.","commonSituations":"Spreading reactive component state into vnode data; reusing a cached vnode-data object stored in Vuex/redux-like state; programmatically building vnodes from observed API responses.","solutions":["Clone the object so it is plain: `h('div', { ...data })`","Recreate the vnode data object inline in the render function on every call","Strip reactivity with `JSON.parse(JSON.stringify(data))` if spreading is not enough (e.g. nested observed objects)","If the object is intentionally static, freeze it before Vue observes it: `Object.freeze(data)`"],"exampleFix":"// before\nrender(h) {\n  return h('div', this.rowData) // rowData is reactive\n}\n// after\nrender(h) {\n  return h('div', { ...this.rowData })\n}","handlingStrategy":"validation","validationCode":"function isObservedData (data) {\n  return data != null && typeof data === 'object' && '__ob__' in data\n}\n// before calling h():\nif (isObservedData(data)) data = { ...data }","typeGuard":"function isPlainObject (v) {\n  if (v === null || typeof v !== 'object') return false\n  const proto = Object.getPrototypeOf(v)\n  return proto === Object.prototype || proto === null\n}","tryCatchPattern":null,"preventionTips":["Always build vnode data objects inline inside render functions","Never store vnode data in reactive state or Vuex","Spread cloned data when derived from observed sources","Object.freeze truly static vnode data before Vue observes it"],"tags":["vdom","render-function","reactivity"],"backgroundTag":"observed-object-as-vnode-data","analyzedSha":"6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b","analyzedAt":"2026-09-02T05:17:40.946Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-09T11:17:12.671Z"}