从零写一个 Vue（七）v-if 和 v-for

最新推荐文章于 2023-03-28 19:27:25 发布

buppt

最新推荐文章于 2023-03-28 19:27:25 发布

阅读量326

点赞数

分类专栏：从零写一个 Vue vue 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/buppt/article/details/106965028

版权

本文是Vue实现系列的第七篇，详细介绍了如何在YourVue中实现v-if和v-for。v-if在parse阶段为元素的AST添加if和ifConditions属性，利用三元运算符在render阶段生成不同VNode。v-for则在AST中添加for、alias等属性，gencode阶段通过genFor生成新的render函数，遍历数组、字符串、number或object，返回VNode数组，用于创建和更新DOM。

摘要由CSDN通过智能技术生成

写在前面

本篇是从零实现 vue2 系列第七篇，在 YourVue 中实现 v-if 和 v-for。

代码仓库：https://github.com/buppt/YourVue

正文

在之前的 main.js 中加入这两个指令

<div v-if="count===1">count === 1</div>
<div v-else-if="count===2">count === 2</div>
<div v-else>count != 1 && count != 2</div>
<div v-for="(item, key, index) in items">
    <p>{
   {item}}</p>
</div>

v-if

vue 在 parse 阶段，遇到 v-if 会执行下面的函数，

function processIf (el) {
  var exp = getAndRemoveAttr(el, 'v-if'); //获取 if 表达式
  if (exp) {
    el.if = exp; //增加 if 属性
    addIfCondition(el, {  // 增加 ifConditions 属性，属性值是一个对象
      exp: exp, // exp 表示当前 v-if 的值
      block: el // block 是当前 ast 对象的引用
    });
  } else {
    if (getAndRemoveAttr(el, 'v-else') != null) { //增加 el.else 属性
      el.else = true;
    }
    var elseif = getAndRemoveAttr(el, 'v-else-if'); //添加 elseif 属性
    if (elseif) {
      el.elseif = elseif;
    }
  }
}
function addIfCondition (el, condition) { //增加 ifConditions 属性
  if (!el.ifConditions) {
    el.ifConditions = [];
  }