only set a key to VNode have similar shape, fix #5618

[pengchongfu]

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Build-related changes
• Other, please describe:

Does this PR introduce a breaking change? (check one)

• Yes
• No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• It's submitted to the dev branch for v2.x (or to a previous version branch), not the master branch
• When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
• All tests are passing: https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md#development-setup
• New/updated tests are included

If adding a new feature, the PR's description includes:

• A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

Other information:

in issue #5618 , then VNode in the first layer of the array don't get a key when father component call normalizeChildren,
but get a key when child component call normalizeChildren.

this leads to a changeable key, and component was re-created.

[yyx990803]

Thanks!

• Flow definition on line 39 needs to be updated (the argument is no longer optional)
• We can use a shorter initial index string (like 0)

[pengchongfu]

test still failed, I am try to find the reason.

[gebilaoxiong]

@pengchongfu

You can compile the code, and then copy the test case to the console debugging

[pengchongfu]

@gebilaoxiong , thanks.

• My change seems to introduce a bug : (. I hava test locally and found this test failed.

• I make a demo, I know it is a little hack. compVm._watcher was inactive, I am try to find the reason.

my fault, compVm._watcher changed. see this demo

[pengchongfu]

@yyx990803 , my change would introduce new bug :(, because if we force every VNode has a key by order, this will have side effect for patch, see this demo.

I have update my change, maybe we should filter the VNode before set a key.
only set a key to VNode have similar shape, likely generated by v-for.

[gebilaoxiong]

I think here only need to determine whether c is created by slot, avoid to set key

[gebilaoxiong]

Let me fix it 🙂

[gebilaoxiong]

hi, I looked at your code

there is a problem about the nested child as a v-for created

<div id="app"></div>

const vm = new Vue({
  el: '#app',
  data: { n: 1 },
  render(h) {
    const list = []

    for (let i = 0; i < this.n; i++) {
      list.push(h('input', {
        attrs: {
          value: 'a',
          type: 'text'
        }
      }))
    }

    const b = h('input', {
      attrs: {
        value: 'b',
        type: 'text'
      }
    })
    
    return h('div', [
      [...list, b]
    ])
  }
})

If the nested list is followed by the same type of element...

steps to reproduce

Enter some data in the last input box

modify the value of n in the console :

vm.n++

What is expected

it will create a new input, and the value of this input is b

What is actually happening?

But the correct should be create a element In front of b

Conclusion

It is always problematic to distinguish whether the element is a loop

So I think here should only set the key for v-for created, or should remove this code

to avoid other situations

[pengchongfu]

@gebilaoxiong , you are right, the best way is coding carefully...