fix(v-show): determine v-show when updating styles

src/platforms/web/runtime/modules/style.ts

@@ -82,7 +82,7 @@ function updateStyle(oldVnode: VNodeWithData, vnode: VNodeWithData) {
  // to mutate it.
  vnode.data.normalizedStyle = isDef(style.__ob__) ? extend({}, style) : style
 
- const newStyle = getStyle(vnode, true)
+ const newStyle = getStyle(vnode, true) as any
 
  for (name in oldStyle) {
  if (isUndef(newStyle[name])) {
@@ -94,6 +94,14 @@ function updateStyle(oldVnode: VNodeWithData, vnode: VNodeWithData) {
  // ie9 setting to null has no effect, must use empty string
  setProp(el, name, cur == null ? '' : cur)
  }
+ // determines if `v-show` is set, it has a higher priority.
+ if ('__vOriginalDisplay' in el) {
+ setProp(el, 'display', el.__vOriginalDisplay)
+ const vShowDirective = data.directives?.find(d => d.name === 'show')
+ if (vShowDirective && !vShowDirective.value) {
+ setProp(el, 'display', 'none')
+ }
+ }
 }
 
 export default {

test/unit/features/directives/show.spec.ts

@@ -94,4 +94,21 @@ describe('Directive v-show', () => {
  })
  .then(done)
  })
+
+ it('should prefer to use v-show to update display', done => {
+ const vm = new Vue({
+ template: '<div v-show="display" :style="style">{{ count }}</div>',
+ data: { display: false, count: 1, style: { display: 'block' } }
+ }).$mount()
+ expect(vm.$el.style.display).toBe('none')
+ vm.count++
+ waitForUpdate(() => {
+ expect(vm.$el.style.display).toBe('none')
+ vm.display = true
+ })
+ .then(() => {
+ expect(vm.$el.style.display).toBe('block')
+ })
+ .then(done)
+ })
 })