fix #4530 with smaller change scope

Author: yyx990803

flow/compiler.js

@@ -6,7 +6,7 @@ declare type CompilerOptions = {
   directives?: { [key: string]: Function }; // platform specific directives
   isUnaryTag?: (tag: string) => ?boolean; // check if a tag is unary for the platform
   isReservedTag?: (tag: string) => ?boolean; // check if a tag is a native for the platform
-  mustUseProp?: (tag: string, attr: string) => ?boolean; // check if an attribute should be bound as a property
+  mustUseProp?: (tag: string, type: ?string, name: string) => boolean; // check if an attribute should be bound as a property
   isPreTag?: (attr: string) => ?boolean; // check if a tag needs to preserve whitespace
   getTagNamespace?: (tag: string) => ?string; // check the namespace for a tag
   transforms?: Array<Function>; // a list of transforms on parsed AST before codegen

src/compiler/parser/index.js

@@ -443,7 +443,7 @@ function processAttrs (el) {
             name = camelize(name)
           }
         }
-        if (isProp || platformMustUseProp(el.tag, name)) {
+        if (isProp || platformMustUseProp(el.tag, el.attrsMap.type, name)) {
           addProp(el, name, value)
         } else {
           addAttr(el, name, value)

src/core/config.js

@@ -15,7 +15,7 @@ export type Config = {
   parsePlatformTagName: (x: string) => string;
   isUnknownElement: (x?: string) => boolean;
   getTagNamespace: (x?: string) => string | void;
-  mustUseProp: (tag?: string, x?: string) => boolean;
+  mustUseProp: (tag: string, type: ?string, name: string) => boolean;
   // internal
   _assetTypes: Array<string>;
   _lifecycleHooks: Array<string>;

src/core/instance/render.js

@@ -247,7 +247,8 @@ export function renderMixin (Vue: Class<Component>) {
           if (key === 'class' || key === 'style') {
             data[key] = value[key]
           } else {
-            const hash = asProp || config.mustUseProp(tag, key)
+            const type = data.attrs && data.attrs.type
+            const hash = asProp || config.mustUseProp(tag, type, key)
               ? data.domProps || (data.domProps = {})
               : data.attrs || (data.attrs = {})
             hash[key] = value[key]

src/platforms/web/util/attrs.js

@@ -4,9 +4,9 @@ import { makeMap } from 'shared/util'
 
 // attributes that should be using props for binding
 const acceptValue = makeMap('input,textarea,option,select')
-export const mustUseProp = (tag: string, attr: string): boolean => {
+export const mustUseProp = (tag: string, type: ?string, attr: string): boolean => {
   return (
-    (attr === 'value' && acceptValue(tag)) ||
+    (attr === 'value' && acceptValue(tag)) && type !== 'button' ||
     (attr === 'selected' && tag === 'option') ||
     (attr === 'checked' && tag === 'input') ||
     (attr === 'muted' && tag === 'video')

test/unit/modules/vdom/patch/edge-cases.spec.js

@@ -114,4 +114,25 @@ describe('vdom patch: edge cases', () => {
     })
     .then(done)
   })
+
+  // #4530
+  it('should not reset value when patching bewteen dyanmic/static bindings', done => {
+    const vm = new Vue({
+      data: { ok: true },
+      template: `
+        <div>
+          <input type="button" v-if="ok" value="a">
+          <input type="button" :value="'b'">
+        </div>
+      `
+    }).$mount()
+    expect(vm.$el.children[0].value).toBe('a')
+    vm.ok = false
+    waitForUpdate(() => {
+      expect(vm.$el.children[0].value).toBe('b')
+      vm.ok = true
+    }).then(() => {
+      expect(vm.$el.children[0].value).toBe('a')
+    }).then(done)
+  })
 })