vue的v-for源码解析

来源:程序思维浏览:3087次
今天给大家分享一下,vue里面的v-for源码解析,让你明白他的原理是如何实现的。


我们可以用 v-for 指令基于一个数组or对象来渲染一个列表,有五种使用方法,如下:

<!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的processFor()->parseFor()函数会根据v-for内容的不同解析出这四个变量,保存到AST(抽象语法树)对象的属性上:

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的值,返回一个对象,如下:

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函数,如下:

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函数等于:

with(this){return _c('div',{attrs:{"id":"app"}},_l((infos),function(item,key,index){return _c('p',[_v(_s(index)+":"+_s(key)+":"+_s(item))])}))}

_c函数相关:

this._c = function (a, b, c, d) { return createElement(contextVm, a, b, c, d, needNormalization); };

createElement函数创建虚拟dom:

function createElement (
    context,
    tag,
    data,
    children,
    normalizationType,
    alwaysNormalize
) {
  if (Array.isArray(data) || isPrimitive(data)) {
    normalizationType = children;
    children = data;
    data = undefined;
  }
  if (isTrue(alwaysNormalize)) {
    normalizationType = ALWAYS_NORMALIZE;
  }
  return _createElement(context, tag, data, children, normalizationType)
}

其中与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
}

好了,v-for的源码解析就写到这里,希望对大家有所帮助!
精品好课
jQuery视频教程从入门到精通
jquery视频教程从入门到精通,课程主要包含:jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
最新完整React视频教程从入门到精通纯干货纯实战
React是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习React高薪就...
HTML5视频播放器video开发教程
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器,利用mp4转成m3u8格式的视频,并在移动端和PC端进行播放支持m3u8直播格式,兼容...
Vue2+Vue3+ES6+TS+Uni-app开发微信小程序从入门到实战视频教程
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程,本课程教你如何快速学会VUE和uni-app并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己...
VUE2+VUE3视频教程从入门到精通(全网最全的Vue课程)
VUE是目前最火的前端框架之一,就业薪资很高,本课程教您如何快速学会VUE+ES6并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习VUE高薪就...
最新完整React+VUE视频教程从入门到精,企业级实战项目
React和VUE是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React和VUE并应用到实战,教你如何解决内存泄漏,常用库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习Re...
HTML5基础入门视频教程易学必会
HTML5基础入门视频教程,教学思路清晰,简单易学必会。适合人群:创业者,只要会打字,对互联网编程感兴趣都可以学。课程概述:该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
React实战视频教程仿京东移动端电商
React是前端最火的框架之一,就业薪资很高,本课程教您如何快速学会React并应用到实战,对正在工作当中或打算学习React高薪就业的你来说,那么这门课程便是你手中的葵花宝典。
收藏
扫一扫关注我们