聊一聊v-if
首先来举个栗子
<div>
<p v-if="value == 1">v-if块的内容</p>
<p v-else-if="value == 2">v-else-if块的内容</p>
<p v-else>v-else块的内容</p>
</div>
最后渲染在页面上的DOM元素只会是三个p元素中的一个。那么这是为什么咩？
Vue进行了如下转化template ---> ast ---> render函数，最后根据生成的render函数来生成相应的DOM，这里就不拓展讲了。在生成ast和render函数的时候，Vue对v-if这一类指令进行了解析。
生成AST
这一部分是将template模板转换成相应的ast语法树，这部分源码在compiler/parser/index.js下。
/*匹配if属性，分别处理v-if、v-else以及v-else-if属性*/
function processIf (el) {
/*取出v-if属性*/
const exp = getAndRemoveAttr(el, 'v-if')
if (exp) {
/*存在v-if属性*/
el.if = exp
/*在el的ifConditions属性中加入{exp, block}*/
addIfCondition(el, {
exp: exp,
block: el
})
} else {
/*不存在v-if属性*/
if (getAndRemoveAttr(el, 'v-else') != null) {
el.else = true
}
const elseif = getAndRemoveAttr(el, 'v-else-if')
if (elseif) {
el.elseif = elseif
}
}
}
/*在el的ifConditions属性中加入condition*/
function addIfCondition (el, condition) {
if (!el.ifConditions) {
el.ifConditions = []
}
el.ifConditions.push(condition)
}
这段代码所做的事情就是：如果元素中有v-if的话，就将v-if的条件取出来加入到el.ifConditions里面，如果有 v-else，v-else-if属性的话就将相应的标志位置为成true。
因为我们只把v-if的条件挂在了el.ifConditions下面，但v-else，v-else-if都还未进行处理，所以接下来需要将它们也加入进去。
if (currentParent && !element.forbidden) {
if (element.elseif || element.else) {
/*当遇到当前ele有v-else或者v-elseif属性的时候，需要处理if属性，在其上级兄弟元素中必然存在一个v-if属性*/
processIfConditions(element, currentParent)
}
}
/*处理if条件*/
function processIfConditions (el, parent) {
//找到当前元素的上一个兄弟元素
const prev = findPrevElement(parent.children)
if (prev && prev.if) {
addIfCondition(prev, {
exp: el.elseif,
block: el
})
} else if (process.env.NODE_ENV !== 'production') {
warn(
`v-${el.elseif ? ('else-if="' + el.elseif + '"') : 'else'} ` +
`used on element <${el.tag}> without corresponding v-if.`
)
}
}
当遇到当前ele有v-else或者v-elseif属性的时候，需要处理if属性，在其上级兄弟元素中必然存在v-if属性，然后将当前元素的else-if上表达式添加到上个元素的ifConditions上。
转换后的ast树
{
type: 1,
tag: 'div',
plain: false,
children: [{
type: 1,
tag: 'p',
children: [{
text: 'v-if块的内容',
type: 3
}]
if: 'value == 1',
ifConditions: [{
exp: "value == 1",
block: {
type: 1,
tag: 'p',
children: [{
text: 'v-if块的内容',
type: 3
}],
if: 'value == 1',
ifConditions: [],
plain: true
}
}, {
exp: "value == 2",
block: {
type: 1,
tag: 'p',
children: [{
text: 'v-else-if块的内容',
type: 3
}],
elseif: 'value == 2',
plain: true
}
}, {
exp: undefined,
block: {
type: 1,
tag: 'p',
children: [{
text: 'v-else块的内容',
type: 3
}],
else: true,
plain: true
}
}]
}]
}
ast树中的转换已经进行完毕了，接下来要根据刚刚挂载这颗ast树上的相应属性。来生成相应的render函数了。
生成render函数
这部分源码在compiler/codegen/index.js下。
function genElement (el: ASTElement): string {
******************************
else if (el.for && !el.forProcessed) {
/*处理v-for*/
return genFor(el)
} else if (el.if && !el.ifProcessed) {
/*处理v-if*/
return genIf(el)
}
****************************
}
其中genIf函数就是对于v-if的处理
function qizhon genIf (el: any): string {
/*标记位，避免递归处理*/
el.ifProcessed = true
return genIfConditions(el.ifConditions.slice())
}
/*处理if条件*/
function genIfConditions (conditions: ASTIfConditions): string {
if (!conditions.length) {
return '_e()'
}
const condition = conditions.shift()
if (condition.exp) {
return `(${condition.exp})?${genTernaryExp(condition.block)}:${genIfConditions(conditions)}`
} else {
return `${genTernaryExp(condition.block)}`
}
// v-if with v-once should generate code like (a)?_m(0):_m(1)
/*v-if与v-once同时存在的时候应该使用三元运算符，譬如说(a)?_m(0):_m(1)*/
function genTernaryExp (el) {
return el.once ? genOnce(el) : genElement(el)
}
}
genIfConditions函数将el上的ifConditions上收集的if，else，else-if属性进行递归处理，最后生成render函数
with(this){
return _c('div',
{attrs:{"id":"app"}},[
(value == 1)?
_c('p',[_v("v-if块的内容")])
:(value == 2)?_c('p',[_v("v-else-if块的内容")]):_c('p',[_v("v-else块的内容")])
]
)
}
最终在执行render函数时，会根据vue中绑定变量的值，来决定创建哪一部分的template
网友评论