search

vuejs / devtools-v6

⚙️ Browser devtools extension for debugging Vue.js applications.
https://devtools-v6.vuejs.org/
MIT License
24.68k stars 4.14k forks source link

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

Closed lehni closed 11 months ago

lehni commented 1 year ago

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:

https://user-images.githubusercontent.com/213275/228797233-964e6be0-5633-42dd-80bb-c5a92f61d68f.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

lehni commented 1 year ago

The fix could be as simple as this in that second statement:

to[key] = Object.assign({}, to[key], from[key]);