normalizeArrayChildren v-for case

来源：2-7 createElement

Arey_jy

2019-05-22

文档：另一个场景是当编译 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)

写回答

3回答

ustbhuangyi

2019-05-23

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

//img.mukewang.com/szimg/5ce60e110001e63816080304.jpg

ustbhuangyi

Arey_jy

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

2019-05-23

共2条回复

Arey_jy

提问者

2019-05-23

<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))])])
}))])

//img.mukewang.com/szimg/5ce608280001d22808730322.jpg

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

ustbhuangyi

2019-05-23

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

//img.mukewang.com/szimg/5ce600fa000125cb14181536.jpg

所以 normalizeArrayChildren 要考虑这种 case

其实源码注释也提到了