[bug] a custom component v-model bug

[lepture]

Tested in all 2.0.x versions.

https://jsfiddle.net/2x50quv8/

When custom component is bind with v-model, computed properties will be called every time when value changed.

Open the jsfiddle link, click on a, b, c, the console will print hello on every click.

Even worse, if you text in the input, which has no relationship with the haha-test component, the haha-test component would still echo hello in console.log.

But if you don't v-model the tag, there will be no console.log.

[defcc]

Thanks @lepture . Simliar to #4060

You could define ['a', 'b', 'c'] in your data as a workaround. I updated the fiddle here

<haha-test v-model="tag" :tags="tagList"></haha-test>

data: {
    tagList: ['a', 'b', 'c'],
    tag: '',
    text: '',
  }

[yyx990803]

Technically, this is expected behavior. Due to the way templates are compiled into render functions in 2.0, you are essentially passing down a fresh array every time the parent component re-renders, thus triggering the child's props to be considered "changed", and finally causing computed property to be computed again.

This only happens if you use inline literal values for props in the template. If you do what @defcc suggested, there would be no re-calculation because tagList remains the same exact array across re-renders.

If the prop is always static (i.e. you only care about the initial value, OR you intend to mutate the prop), you can set it as a local data variable in data():
https://jsfiddle.net/2x50quv8/2/

Finally - apart from the computed being called / child re-render, the UX behavior is correct. The only downside is probably some unnecessary computation, but in practice, this is fairly cheap and I wouldn't worry too much about it unless it ends up causing noticeable performance issues.