Vue.js 源码分析(十八) 指令篇 v-for 指令详解

程序员文章站 2022-04-15 14:04:39

我们可以用 v-for 指令基于一个数组or对象来渲染一个列表，有五种使用方法，如下: 挺简单的，后台只要提供一个接口，返回一个数组或对象，前端通过v-for就可以渲染了，我们以上面对象的第三个格式为例讲一下源码，如下: 源码分析在解析模板的时候，Vue的processFor()->parseFo ......

我们可以用 v-for 指令基于一个数组or对象来渲染一个列表，有五种使用方法，如下:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <script>
        vue.config.productiontip=false;
        vue.config.devtools=false;
    </script>
    <div id="app">
        <p v-for="item in items">{{item}}</p>                                   <!--数组格式一，渲染结果:<p>11</p><p>12</p>    -->         
        <p v-for="(item,index) in items">{{index}}->{{item}}</p>                <!--数组格式二，渲染结果:<p>0->11</p><p>1->12</p>-->
        <p v-for="item in infos">{{item}}</p>                                   <!--对象格式一，渲染结果:<p>gege</p><p>12</p>-->
        <p v-for="(item,key) in infos">{{key}}:{{item}}</p>                     <!--对象格式二，渲染结果:<p>name:gege</p><p>age:12</p>-->
        <p v-for="(item,key,index) in infos">{{index}}:{{key}}:{{item}}</p>     <!--对象格式三，渲染结果:<p>0:name:gege</p><p>1:age:12</p>-->
    </div>
    <script>
        var app = new vue({
            data(){
                return {
                    items:[11,12],                        //v-for可以是个对象
                    infos:{name:'gege',age:12}            //也可以是个数组
                }
            },
            el:'#app'
        })
    </script> 
</body>
</html>

挺简单的，后台只要提供一个接口，返回一个数组或对象，前端通过v-for就可以渲染了，我们以上面对象的第三个格式为例讲一下源码，如下:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <script>
        vue.config.productiontip=false;
        vue.config.devtools=false;
    </script>
    <div id="app">
        <p v-for="(item,key,index) in infos">{{index}}:{{key}}:{{item}}</p>    
    </div>
    <script>
        var app = new vue({
            data(){return {infos:{name:'gege',age:12}}},
            el:'#app'
        })
    </script> 
</body>
</html>

源码分析

在解析模板的时候，vue的processfor()->parsefor()函数会根据v-for内容的不同解析出这四个变量，保存到ast对象的属性上：

function processfor (el) {            //第9367行 处理for指令
  var exp;
  if ((exp = getandremoveattr(el, 'v-for'))) {    //如果获取了v-for属性
    var res = parsefor(exp);                      //调用parsefor函数解析该属性
    if (res) {                                    //如果res存在
      extend(el, res);                              //则调用extend()添加ast对象上
    } else {
      warn$2(
        ("invalid v-for expression: " + exp)
      );
    }
  }
}

parsefor()用于解析v-for的值，返回一个对象，如下:

function parsefor (exp) {               //第9383行 解析v-for属性 exp:v-for的值 ;例如:"(item,key,index) in infos"
  var inmatch = exp.match(foraliasre);                      //用正则匹配  foraliasre定义在9403行等于:/([^]*?)\s+(?:in|of)\s+([^]*)/; 
  if (!inmatch) { return }                                  //如果不能匹配，则返回false
  var res = {};
  res.for = inmatch[2].trim();                              //for的值，这里等于:infos
  var alias = inmatch[1].trim().replace(stripparensre, ''); //去除两边的括号，此时alias等于:item,key,index
  var iteratormatch = alias.match(foriteratorre);           //匹配别名和索引
  if (iteratormatch) {                                      //如果匹配到了，即是这个格式:v-for="(item,index) in data"
    res.alias = alias.replace(foriteratorre, '');               //获取别名
    res.iterator1 = iteratormatch[1].trim();                    //获取索引
    if (iteratormatch[2]) {
      res.iterator2 = iteratormatch[2].trim();
    }
  } else {
    res.alias = alias;
  }
  return res                                                 //返回对象，比如:{alias: "item",for: "infos",iterator1: "key",iterator2: "index"}
}

执行到这里后例子里的v-for保存了四个属性与v-for相关，如下:

Vue.js 源码分析(十八) 指令篇 v-for 指令详解

接下来在generate生成rendre函数的时候会调用genfor()生成对应的_l函数，如下:

function genfor (         //渲染v-for指令
  el,
  state,
  altgen,
  althelper
) {
  var exp = el.for;                                                 //获取for的值
  var alias = el.alias;                                             //获取别名
  var iterator1 = el.iterator1 ? ("," + (el.iterator1)) : '';       //获取索引(v-for的值为对象时则为key)
  var iterator2 = el.iterator2 ? ("," + (el.iterator2)) : '';       ///获取索引(v-for的值为对象时))

  if ("development" !== 'production' &&
    state.maybecomponent(el) &&
    el.tag !== 'slot' &&
    el.tag !== 'template' &&
    !el.key
  ) {
    state.warn(
      "<" + (el.tag) + " v-for=\"" + alias + " in " + exp + "\">: component lists rendered with " +
      "v-for should have explicit keys. " +
      "see https://vuejs.org/guide/list.html#key for more info.",
      true /* tip */
    );
  }

  el.forprocessed = true; // avoid recursion
  return (althelper || '_l') + "((" + exp + ")," +                //拼凑_l函数
    "function(" + alias + iterator1 + iterator2 + "){" +
      "return " + ((altgen || genelement)(el, state)) +
    '})'
}

最后生成的render函数等于:

with(this){return _c('div',{attrs:{"id":"app"}},_l((infos),function(item,key,index){return _c('p',[_v(_s(index)+":"+_s(key)+":"+_s(item))])}))}

其中与v-for相关的如下:

_l((infos),function(item,key,index){return _c('p',[_v(_s(index)+":"+_s(key)+":"+_s(item))

_l的第一个参数为我们的v-for的目标，也就是infos,一会儿会遍历该对象的

渲染生成vnode时就会执行vue内部的_l函数，也就是全局的renderlist,如下:

function renderlist (     //第3691行   渲染v-for指令
  val,  
  render
) {
  var ret, i, l, keys, key;
  if (array.isarray(val) || typeof val === 'string') {    //如果val是个数组
    ret = new array(val.length);                            //将ret定义成val一样大小的数组
    for (i = 0, l = val.length; i < l; i++) {                 //遍历val数组
      ret[i] = render(val[i], i);                                 //依次调用render函数，参数1为值 参数2为索引 返回vnode，并把结果vnode保存到ret里面
    }
  } else if (typeof val === 'number') {
    ret = new array(val);
    for (i = 0; i < val; i++) {
      ret[i] = render(i + 1, i);
    }
  } else if (isobject(val)) {
    keys = object.keys(val);
    ret = new array(keys.length);
    for (i = 0, l = keys.length; i < l; i++) {
      key = keys[i];
      ret[i] = render(val[key], key, i);
    }
  }
  if (isdef(ret)) {                                       //如果ret存在(成功调用了)
    (ret)._isvlist = true;                                  //则给该数组添加一个_isvlist标记，值为true
  }
  return ret                                                //最后返回ret
}

最后一起打包成vnode数组并返回，作为其他元素的子节点(_c的第三个参数)。

上一篇：两张图示轻松看懂 UML 类图

下一篇： Oracle转SqlServer

Vue.js 源码分析(十八) 指令篇 v-for 指令详解

Vue.js 源码分析(二十二) 指令篇 v-model指令详解

Vue.js 源码分析(十六) 指令篇 v-on指令详解

Vue.js 源码分析(十四) 基础篇组件自定义事件详解

Vue.js 源码分析(十二) 基础篇组件详解

Vue.js 源码分析(二十四) 高级应用自定义指令详解

Vue.js 源码分析(十五) 指令篇 v-bind指令详解

Vue.js 源码分析(十一) 基础篇过滤器 filters属性详解