前言

有时候有些面试中常常会问到v-for与v-if谁的优先级高，这里就通过剖析源码去解答一下这个问题。

上面的内容是在 当咱们谈及v-model，咱们在探讨什么?的根底上剖析的，所以浏览上面内容之前可先看这篇文章。

持续从编译登程

以上面的例子登程剖析：

new Vue({    el:'#app',    template:`        <ul>            <li v-for="(item,index） in items" v-if="index!==0">                {{item}}            </li>        </ul>    `})

从上篇文章能够晓得，编译有三个步骤

  • parse : 解析模板字符串生成 AST语法树
  • optimize : 优化语法树，次要时标记动态节点，进步更新页面的性能
  • codegen : 生成js代码，次要是render函数和staticRenderFns函数

咱们再次顺着这三个步骤对上述例子进行剖析。

parse

parse过程中，会对模板应用大量的正则表达式去进行解析。结尾的例子会被解析成以下AST节点：

// 其实ast有很多属性，我这里只展现波及到剖析的属性ast = {  'type': 1,  'tag': 'ul',  'attrsList': [],  attrsMap: {},  'children': [{    'type': 1,    'tag': 'li',    'attrsList': [],    'attrsMap': {      'v-for': '(item,index) in data',      'v-if': 'index!==0'     },     // v-if解析进去的属性    'if': 'index!==0',    'ifConditions': [{      'exp': 'index!==0',      'block': // 指向el本身    }],    // v-for解析进去的属性    'for': 'items',    'alias': 'item',    'iterator1': 'index',    'parent': // 指向其父节点    'children': [      'type': 2,      'expression': '_s(item)'      'text': '{{item}}',      'tokens': [        {'@binding':'item'},      ]    ]  }]}

对于v-for指令，除了记录在attrsMap和attrsList，还会新增for(对应要遍历的对象或数组)，alias，iterator1,iterator2对应v-for指令绑定内容中的第一,第二，第三个参数，结尾的例子没有第三个参数，因而没有iterator2属性。

对于v-if指令，把v-if指令中绑定的内容取出放在if中，与此同时初始化ifConditions属性为数组，而后往里面寄存对象：{exp,block}，其中exp寄存v-if指令中绑定的内容，block指向el。

optimize 过程在此不做剖析，因为本例子没有动态节点。

codegen

上一篇文章从const code = generate(ast, options)开始剖析过其生成代码的过程，generate外部会调用genElement用来解析el，也就是AST语法树。咱们来看一下genElement的源码：

export function genElement (el: ASTElement, state: CodegenState): string {  if (el.parent) {    el.pre = el.pre || el.parent.pre  }  if (el.staticRoot && !el.staticProcessed) {    return genStatic(el, state)  } else if (el.once && !el.onceProcessed) {    return genOnce(el, state)  // 其实从此处能够初步晓得为什么v-for优先级比v-if高，  // 因为解析ast树生成渲染函数代码时，会先解析ast树中波及到v-for的属性  // 而后再解析ast树中波及到v-if的属性  // 而且genFor在会把el.forProcessed置为true，避免反复解析v-for相干属性  } else if (el.for && !el.forProcessed) {    return genFor(el, state)  } else if (el.if && !el.ifProcessed) {    return genIf(el, state)  } else if (el.tag === 'template' && !el.slotTarget && !state.pre) {    return genChildren(el, state) || 'void 0'  } else if (el.tag === 'slot') {    return genSlot(el, state)  } else {    // component or element    let code    if (el.component) {      code = genComponent(el.component, el, state)    } else {      let data      if (!el.plain || (el.pre && state.maybeComponent(el))) {        data = genData(el, state)      }      const children = el.inlineTemplate ? null : genChildren(el, state, true)      code = `_c('${el.tag}'${        data ? `,${data}` : '' // data      }${        children ? `,${children}` : '' // children      })`    }    // module transforms    for (let i = 0; i < state.transforms.length; i++) {      code = state.transforms[i](el, code)    }    return code  }}

接下来顺次看看genFor和genIf的函数源码：

export function genFor (el, state , altGen, altHelper) {  const exp = el.for  const alias = el.alias  const iterator1 = el.iterator1 ? `,${el.iterator1}` : ''  const iterator2 = el.iterator2 ? `,${el.iterator2}` : ''  el.forProcessed = true // avoid recursion  return `${altHelper || '_l'}((${exp}),` +     `function(${alias}${iterator1}${iterator2}){` +      `return ${(altGen || genElement)(el, state)}` + //递归调用genElement    '})'}

在咱们的例子里，当他解决li的ast树时，会先调用genElement,解决到for属性时，此时forProcessed为虚值，此时调用genFor解决li树中的v-for相干的属性。而后再调用genElement解决li树，此时因为forProcessed在genFor中已被标记为true。因而genFor不会被执行，继而执行genIf解决与v-if相干的属性。

export function genIf (el,state,altGen,altEmpty) {  el.ifProcessed = true // avoid recursion  // 调用genIfConditions次要解决el.ifConditions属性  return genIfConditions(el.ifConditions.slice(), state, altGen, altEmpty)}function genIfConditions (conditions, state, altGen, altEmpty) {  if (!conditions.length) {    return altEmpty || '_e()' // _e用于生成空VNode  }  const condition = conditions.shift()  if (condition.exp) { //condition.exp即v-if绑定值，例子中则为'index!==0'    // 生成一段带三目运算符的js代码字符串    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) {    return altGen      ? altGen(el, state)      : el.once        ? genOnce(el, state)        : genElement(el, state)  }}

参考 前端进阶面试题具体解答

最初，通过codegen生成的js代码如下：

function render() {  with(this) {    return _c('ul', _l((items), function (item, index) {      return (index !== 0) ? _c('li') : _e()    }), 0)  }}

其中：

  1. _c: 调用 createElement 去创立 VNode
  2. _l: renderList函数，次要用来渲染列表
  3. _e: createEmptyVNode函数，次要用来创立空VNode

总结

为什么v-for的优先级比v-if的高？总结来说是编译有三个过程，parse->optimize->codegen。在codegen过程中，会先解析AST树中的与v-for相干的属性，再解析与v-if相干的属性。除此之外，也能够晓得Vue对v-for和v-if是怎么解决的。