Vue.js 源碼分析(十七) 指令篇 v-if、v-else-if和v-else 指令詳解

時間 2019-12-08

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

原文原文鏈接

v-if 指令用於條件性地渲染一塊內容。這塊內容只會在指令的表達式返回true值的時候被渲染。javascript

v-else-if，顧名思義，充當 v-if 的「else-if 塊」，能夠連續使用：html

也可使用 v-else 指令來表示 v-if 的「else 塊」：vue

挺好理解的，就和大多數的語言的if()....else if()...else邏輯語句是同樣的，例如:java

<!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-if="no<0">n小於0</p>
        <p v-else-if="no==0">no等於0</p>
        <p v-else>no大於0</p>
    </div>
    <script>var app = new Vue({el:'#app',data:{no:2}})</script>
</body>
</html>

渲染爲:npm

有兩個注意點：數組

　　v-else和v-else-if 必須緊跟在帶 v-if 或者 v-else-if 的元素以後，一下子將源碼的時候會講到爲何app

　　由於 v-if 是一個指令，因此必須將它添加到一個元素上。可是若是想切換多個元素呢？此時能夠把一個 <template> 元素當作不可見的包裹元素，函數

源碼分析源碼分析

Vue內部會把v-if、v-else、v-else-if解析稱爲一個三元運算符，若是有多個v-else,則三元運算符內再嵌套一個三元運算符，以例子裏的爲例:spa

解析模板解析到<p v-if="no<0">n小於0</p>這個DOM元素時會執行到processIf()函數

function processIf (el) {               //第9402行  解析v-if指令
  var exp = getAndRemoveAttr(el, 'v-if');   //獲取表達式，例如:"no<0"  
  if (exp) {                                  //若是存在v-if屬性
    el.if = exp;                                  //增長if屬性
    addIfCondition(el, {                          //調用addIfCondition()函數給el增長一個ifConditions屬性,值是一個對象，其中 exp表示當前v-if的值，block是當前AST對象的引用(一下子給v-else和v-else-if用的)
      exp: exp,
      block: el
    });
  } else {                                  //若是不存在v-if屬性
    if (getAndRemoveAttr(el, 'v-else') != null) {     //若是存在else命令，則在el.else上增長一個else屬性
      el.else = true;
    }
    var elseif = getAndRemoveAttr(el, 'v-else-if'); //若是存在v-else-if指令，則添加elseif屬性
    if (elseif) {
      el.elseif = elseif;
    }
  }
}
function addIfCondition (el, condition) { //第9453行 增長一個ifConditions屬性，
  if (!el.ifConditions) {
    el.ifConditions = [];                     //若是ifConditions屬性不存在則初始化爲一個空數組
  }
  el.ifConditions.push(condition);            //將參數condition這個對象push進來
}

對於v-if節點只是增長一個if和ifConditions屬性，對於<p v-if="no<0">n小於0</p>來講，對應的AST對象增長的屬性以下:

解析模板時，對於v-else和v-else-if來講,並無把當前對應的AST對象加到AST樹中，而是把本身對應的AST對象添加到最近的v-if的ifConditions裏，代碼以下:

if (currentParent && !element.forbidden) {      //第9223行 若是當前對象不是根對象， 且不是style和text/javascript類型script標籤
  if (element.elseif || element.else) {             //若是有elseif或else指令存在(設置了v-else或v-elseif指令)
    processIfConditions(element, currentParent);      //則調用processIfConditions()函數
  } else if (element.slotScope) { // scoped slot    //若是element是做用域插槽
    currentParent.plain = false;
    var name = element.slotTarget || '"default"';(currentParent.scopedSlots || (currentParent.scopedSlots = {}))[name] = element;
  } else {
    currentParent.children.push(element);
    element.parent = currentParent;
  }
}

processIfConditions會在以前的AST節點，也就是v-if的AST節點的ifConditions上把當前的ast對象添加進去，以下:

function processIfConditions (el, parent) {       //第9421行  解析v-else、v-else-if指令
  var prev = findPrevElement(parent.children);         //調用findPrevElement獲取el以前的AST對象(只查找普通元素AST)
  if (prev && prev.if) {                                //若是prev存在，且它含有v-if指令
    addIfCondition(prev, {                                  //則調用addIfCondition給prev的ifConditions添加一條語句
      exp: el.elseif,
      block: el
    });
  } else {
    warn$2(
      "v-" + (el.elseif ? ('else-if="' + el.elseif + '"') : 'else') + " " +
      "used on element <" + (el.tag) + "> without corresponding v-if."
    );
  }
}

function findPrevElement (children) {           //第9436行 查找children前一個文本AST對象
  var i = children.length;
  while (i--) {                                   //遍歷children，從後開始
    if (children[i].type === 1) {                     //若是是普通節點
      return children[i]                                //則直接返回該元素
    } else {
      if ("development" !== 'production' && children[i].text !== ' ') {   //開發模式下，若是該節點不是普通節點，則報錯
        warn$2(
          "text \"" + (children[i].text.trim()) + "\" between v-if and v-else(-if) " +
          "will be ignored."
        );
      }
      children.pop();
    }
  }
}

執行完後整個AST對象樹以下:

接下來執行generate生成rendre函數時時發現有有if屬性就執行genIf()函數:

function genIf (                //第10205行  //渲染v-if指令
  el,
  state,
  altGen,
  altEmpty
) {
  el.ifProcessed = true; // avoid recursion                                   //避免遞歸
  return genIfConditions(el.ifConditions.slice(), state, altGen, altEmpty)    //調用genIfConditions函數
}
  
function genIfConditions (      //第10215行 拼湊if表達式 conditions:好比:[{exp: "ok", block: {…}}] 
  conditions,
  state,
  altGen,
  altEmpty
) {
  if (!conditions.length) {             //若是conditions不存在
    return altEmpty || '_e()'             //則直接返回altEmpty
  }

  var condition = conditions.shift();    //獲取內容，好比:{exp: "no<0", block: {…}}
  if (condition.exp) {                   //拼湊三元運算符
    return ("(" + (condition.exp) + ")?" + (genTernaryExp(condition.block)) + ":" + (genIfConditions(conditions, state, altGen, altEmpty)))
  } else {
    return ("" + (genTernaryExp(condition.block)))
  }

  // v-if with v-once should generate code like (a)?_m(0):_m(1)
  function genTernaryExp (el) {         //再次調用genElement()函數
    return altGen
      ? altGen(el, state)
      : el.once
        ? genOnce(el, state)
        : genElement(el, state)
  }
}

最後渲染的render函數爲:

_c('div',{attrs:{"id":"app"}},[(no<0)?_c('p',[_v("n小於0")]):(no==0)?_c('p',[_v("no等於0")]):_c('p',[_v("no大於0")])])

其中

(no<0)?_c('p',[_v("n小於0")]):(no==0)?_c('p',[_v("no等於0")]):_c('p',[_v("no大於0")])

就是對應的例子裏的v-if、v-else、v-else-if結構了

相關標籤/搜索

每日一句

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