normalizeArrayChildren v-for case

Question

文档：另一个场景是当编译 slot、v-for 的时候会产生嵌套数组的情况，会调用 normalizeArrayChildren 方法。

触发 normalizeArrayChildren 函数下只有在 ALWAYS_NORMALIZE 规范化下才会执行，也就是下面 vm.$createElement 才会触发的。当 编译 slot、v-for 的时候走的是vm._c 方法不是吗？为什么会触发 normalizeArrayChildren 情况呢？

  // bind the createElement fn to this instance
  // so that we get proper render context inside it.
  // args order: tag, data, children, normalizationType, alwaysNormalize
  // internal version is used by render functions compiled from templates
  // 内部版本由模板编译的呈现函数使用
  vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
  
  // normalization is always applied for the public version, used in
  // user-written render functions.
  // 用于用户编写的呈现函数。
  vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)

Answer 1

ustbhuangyi 2019-05-23 11:06:12

嗯，如果是通过 vm._c 创建的元素，是不需要 normalize 的，那就只有手写 render 函数主动调用vm.$createElement 创建元素的场景了，另外 slot 中是有可能执行 $createElement 的。 

• 提问者 Arey_jy #1

  那vue源码这样说明 v-for 注释，不是有问题吗

• ustbhuangyi 回复 提问者 Arey_jy #2

  v-for 感觉确实有问题，非用户手动调用 this._l 的情况下

Answer 2

提问者 Arey_jy 2019-05-23 10:46:13

<div id="app">
<ul>
<li v-for="item in list">
<p>p{{ item }}</p>
<span>span{{ item }}</span>
</li>
</ul>
</div>

new Vue({
    el: '#app',
    data () {
        return {
            list: [1, 2, 3]
        }
    }
})

生成的 codegen:

_c('div', {
    attrs: {
        "id": "app"
    }
},
[_c('ul', _l((list),
function(item) {
    return _c('li', [_c('p', [_v("p" + _s(item))]), _v(" "), _c('span', [_v("span" + _s(item))])])
}))])

_l 函数虽然是返回了 数组 vnode，但是 normalizeType=undefined  alwayNormalize= false, 这样不会走进 children 规范化判断中的，如果要执行 normalizeChildren 函数只能是手写 render function 呀，编译的v-for 是进入不了的，不是吗？

Answer 3

ustbhuangyi 2019-05-23 10:10:52

首先 v-for 会编译成 vm._l 方法，也就是 renderList 方法，它返回的是一个 VNode 数组



所以 normalizeArrayChildren 要考虑这种 case 

其实源码注释也提到了

• 提问者 Arey_jy #1

  黄老师，看下我更新的例子，v-for情况进入不了