diff --git a/src/platforms/web/runtime/modules/style.ts b/src/platforms/web/runtime/modules/style.ts
index 13898eabfd1..04bb016e334 100644
--- a/src/platforms/web/runtime/modules/style.ts
+++ b/src/platforms/web/runtime/modules/style.ts
@@ -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 {
diff --git a/test/unit/features/directives/show.spec.ts b/test/unit/features/directives/show.spec.ts
index 86641b4af4f..c1f02fd477a 100644
--- a/test/unit/features/directives/show.spec.ts
+++ b/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)
+  })
 })