Frontend · Vue.js

Vue 2.7.16's Final Patch Broke v-show When Combined With Inline Styles

By zhedream · Jul 13, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Any Vue 2 project using a caret range without a committed lock file can silently absorb this regression on the next clean install. The bug is permanent because Vue 2 is EOL, so teams still on Vue 2 need to pin 2.7.15 or refactor the affected patterns now.

Summary

Vue 2.7.16, codenamed Swan Song, shipped a style-handling fix that removed a same-value skip check, causing every update to rewrite all inline style properties. When `v-show` sets `display: none` on a hidden element, the style module immediately overwrites it with whatever `display` value the inline `style` attribute declares. The result is that `v-show` stops working on any element that also has an inline `style` containing `display`.

The bug only surfaces on fresh installs. Projects that pinned Vue with a caret range like `^2.7.14` and never regenerated their lock file silently pulled 2.7.16 when dependencies were reinstalled on a new machine. Code that ran fine for years suddenly broke with zero changes to the source.

Three workarounds exist: downgrade to 2.7.15, swap `v-show` for `v-if`, or move the `display` rule from an inline style into a class. Vue 2 is end-of-life and will receive no further patches, so the regression is permanent.

Takeaways

— Vue 2.7.16 always rewrites inline style properties during updates, which overwrites the `display: none` that `v-show` sets.

— The regression only triggers when an element carries both `v-show` and an inline `style` attribute that declares a `display` value.

— A caret range like `^2.7.14` in package.json allowed 2.7.16 to install silently on a fresh `npm install`.

— Vue 2 is end-of-life; the issue (vuejs/vue#13140) will not receive an official patch.

— Three mitigations: pin to 2.7.15, replace `v-show` with `v-if`, or move the `display` rule from inline style to a class.

— Committing the lock file would have prevented the version drift that caused the breakage.

Conclusions

A single patch-level version bump inside a caret range can introduce a breaking behavioral change that no code diff will reveal.

The instinct to blame recent code changes is useless when the runtime itself drifted; the investigation has to start from the installed dependency tree.

Vue 2's EOL status turns what would be a routine bug report into a permanent constraint — teams must work around it or migrate.

Concepts & terms

Caret range (^)

A semver range specifier in package.json (e.g., `^2.7.14`) that allows minor and patch updates up to but not including the next major version. It can silently pull in breaking changes if a patch introduces a regression.

Lock file

A file (package-lock.json, yarn.lock, pnpm-lock.yaml) that records the exact version of every installed dependency. Committing it ensures all environments install identical dependency trees.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗