Skip to content

Dev Tools inspection accidentally modifies actual mixins when merging options #2037

Closed
@lehni

Description

@lehni

Vue devtools version

6.5.0

Link to minimal reproduction

https://sfc.vuejs.org/#eNq9Vc1u2zAMfhXBGJAWSGysuwVusHXnoYcOu8w7ODYdK7UlQ5KTFEbefdSf7ThZ2qHYLon4o4/kR5Hugi9NE+5aCJZBrKBuqlTBKmGExDndmQMey4+rHy2QT+QbPVBGHtqNjCNUOvMjAxJ54fueDwJaBjmOLGQcjQKhKDNBG2VcaN1woYgGLASvySyM8Kzzm43MGtKb8Tw1u6AjgMFJu8HBuOVQpG2lSGdzzTjeZsCUXJJOY8x1nLlHO2ov/ImjPt1gHtiIizptwq3kDEk0aIkzyCRAMIufBJiBlpOgVKqRyyiSRabT2sqQi02Ep1C0TNEaQpD1Yi34XoJA4CSYjzAiVO5ALASwHASIa5gT1zNcV9QRSzGt1WRvJZZxiaNGcAxBfs6QptkvkxLUVPNlVXMyU3tu/koBRi54K5yr5rdVkPeEeAXGvLklnSe4z0U37bVcHBSG7c8ovTSwJE9KULZxxBF/e2lztFob8rSQgu5M5pIeXkscE5wm/pBK81qn05Sok3G6W3UdYWkN5HjEQbrzhobsFrS4TwIfIgmc6SSNrhfwvrsaNR5k3SrFGSJBJYF8ziqaPSOkLPn+6znsE6pJr3dYFuKtQ3t5nvJUpZoeFyhRAlQrmFYkaloSa6vKZ+Qqsn3Bi+a3BlXyfOg4IeN6RnF0/0sqw56he/K43kKmwmd4kTfG9oE3inI2ON1OY18cdreJdG/PV5bufL9y/DMYbyU/X73TaOCuLiY4KBxfLF2jOlJqfVe/Vw9in+oZ68STbl4bPn50nf2xSqzRbcr31DjevaNBfmeNCPLWGtH1ao3DB+HftPJ/0GG+T39LjC38CjfH3xuFoLc=

Steps to reproduce & screenshots

See this video:

vue-devtools-bug.mov

What is expected?

When not using dev-tools, each component shows its computed getters correctly when clicking the buttons, as shown in the first half of the movie.

What is actually happening?

After reloading the page to bust the internal cache and using the dev tools to inspect each component, component One suddenly inherits a computed getter form MixinTwo which shouldn't be there.

Any additional comments?

The leak happens in component OneTwo, where I believe it first receives the original computed object from MixinOne (instead of a clone), see:

https://github.com/vuejs/devtools/blob/4696a73bf30aca5a6254aab4e0beb984a9aa294d/packages/app-backend-vue3/src/components/data.ts#L486

And when MixinTwo is applied, this original computed object from MixinOne wrongly receives new entries:

https://github.com/vuejs/devtools/blob/4696a73bf30aca5a6254aab4e0beb984a9aa294d/packages/app-backend-vue3/src/components/data.ts#L488

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions