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

時間 2019-12-08

標籤 vue.js vue 源碼分析十八指令詳解欄目 JavaScript 简体版

原文原文鏈接

咱們能夠用 v-for 指令基於一個數組or對象來渲染一個列表，有五種使用方法，以下:html

<!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

在解析模板的時候，Vue的processFor()->parseFor()函數會根據v-for內容的不一樣解析出這四個變量，保存到AST對象的屬性上：express

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的值，返回一個對象，以下:npm

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相關，以下:數組

接下來在generate生成rendre函數的時候會調用genFor()生成對應的_l函數，以下:app

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函數等於:ide

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的第三個參數)。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。