Patched elements keep inline styles from old vnodes

Vue.js version

2.0.6+

Reproduction Link

https://jsfiddle.net/gw8g8cos/

Steps to reproduce

$ vue init webpack-simple .
$ npm install vue@2.0.7 vue-template-compiler@2.0.7

<template>
<div>
    <section style="text-align: center" v-if="loading">
        Should be centered.
    </section>
    <section style="margin-top: 6rem;" v-if="!loading">
        Should not be centered.
    </section>
</div>
</template>

<script>
export default {
    name: 'app',
    data () {
        return {
            loading: true
        }
    },
    mounted: function() {
        setTimeout(() => {
            this.loading = false;
        }, 2000);
    }
}
</script>

What is Expected?

Patched elements should not keep inline styles from old vnodes.

What is actually happening?

During the update operation, patched elements will retain styles from vnodes that will no longer exist in the DOM.

Temporarily solution for end-users: changing inline styles to classes, choosing different tag names or adding a key directive will fix the issue. Thanks to @LinusBorg for the latter.

It looks like this PR has introduced this regression https://github.com/vuejs/vue/pull/4138. I’ve opened a pull request with a failing test that confirms this issue.

[defcc]

https://github.com/vuejs/vue/blob/dev/src/platforms/web/runtime/modules/style.js#L48

const style = normalizeStyleBinding(vnode.data.style) || {}
vnode.data.style = style.__ob__ ? extend({}, style) : style
const newStyle = getStyle(vnode, true)

The style now only holds the style binding, which will be removed in the next render. The static style and style binding should be removed both when reusing the same node.

[defcc]

I’ll make a PR to fix it