欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-09 20:57:20
我们可以用 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的第三个参数)。