v-html gets completely refreshed rather than patched when being re-rendered

[Philipp-M]

Vue.js version

2.0.7

Reproduction Link

http://jsfiddle.net/v4f2typt/

Steps to reproduce

just look at the moving 'some html', the animation should run for 4 seconds, also check the element tab in the developer tools, where it is visible that the elements representing the v-html are changed

What is Expected?

the animation will complete, and the DOM element doesn't get reinserted

What is actually happening?

I guess, that the html in v-html gets removed and reinserted once the style has changed

[defcc]

It's not just because computed style change. When the data changed, vue will rerender your app according to some strategies.

Maybe we could apply diff to the nodes generated by the v-html rather than reset it.

[yyx990803]

This is expected: v-html is an alias for innerHTML. If you want patch behavior, you have to write your markup in Vue templates. This is a wontfix imo. v-html is already an escape hatch and you should only use it when you absolute have to. Patching the content involves way too many edge cases for very little gain, if any.

[yyx990803]

Actually, in this case it should not be overwritten - we should cache the previous innerHTML and avoid setting it again if it stays the same.

[defcc]

We could check the oldProp value with the new one here. https://github.com/vuejs/vue/blob/dev/src/platforms/web/runtime/modules/dom-props.js#L23. I'll make a patch.