Fix: nested child elements can not be updated correctly, fix #5618

[gebilaoxiong]

#5618

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:

[gebilaoxiong]

Well, it's an interesting thing to name the title

[pengchongfu]

_renndered is set when process.env.NODE_ENV !== 'production'.

and not only slot, hand-written render functions could have this problem too.

[gebilaoxiong]

@pengchongfu

I did not find any problems in the render function

html:

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

javascript:

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

    for (var i = 0; i < this.count; i++) {
      list.push(h('span', [this.count]))
    }

    return h('div', [
      list,
      h('input', {attrs: { 
        value: 'a',
        type: 'text'
      }})
    ])
  }
})

You can input something in the input box,
then modify the value of count in the console

and input`s value did not changed

[gebilaoxiong]

@pengchongfu

Can you give me a example about hand-written render functions? 🌹

[pengchongfu]

@gebilaoxiong , demo, hack... maybe we should ignore it 😂

and _rendered is not set in production, see this line

[gebilaoxiong]

@pengchongfu

💋 Thanks , I'll take a look at this question

[gebilaoxiong]

@pengchongfu

Now when using render function skip to set the key.

[pengchongfu]

@gebilaoxiong , but all array in hand-written render function will not get a key, I don't know whether it is a good solution.

[gebilaoxiong]

@pengchongfu

I think this happens only when there are nested arrays in children

just like:

children: [
  [vnode, vnode...]
]

In the render of the template, it will be treated as v-for

but slot and render function will also can generate this structure

so we just skip to set the key

[gebilaoxiong]

@pengchongfu wait, I have a better way to solve this problem！

[gebilaoxiong]

@pengchongfu

I marked the v-for generated elements

Only v-for generated elements will be set key

avoid render function and slot to generate the same structure cause the error

[gebilaoxiong]

@yyx990803

Well, it looks like I'm the last one waiting for today

In addition to deleting the code, do we have other ways to solve this problem? 😄

[yyx990803]

Instead of adding a property to every vnode, we can simply mark the ret array here with something like:

if (isDef(ret)) {
  (ret: any)._isVList = true // work around flow
}

Then check children._isVList in normalizeArrayChildren.

[gebilaoxiong]

@yyx990803

Fix bug is really a very interesting thing

Maybe my level is not enough, need to chew and get the truth

[yyx990803]

I pushed a commit to ensure nestedIndex is always passed down for nested arrays. This is necessary in cases where there are two v-for lists nested under non v-for arrays, e.g.

[[[v-for list], ..., [[v-for list]]]

[gebilaoxiong]

understand, thank you very much