Vue—v

时间：2019-10-17 18:02:12 阅读：207 评论：0 收藏：0 [点我收藏+]

标签：ram slot dash alt val item param ide fun

v-for 示例

<body>
    <div id='app'>
        <p v-for='(item, index) in arr'>{{item.name}}-{{index}}</p>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        arr:[
            {id: 1, name: 'Lucy'},
            {id: 2, name: 'Jack'},
            {id: 3, name: 'Tom'}
        ]
      }
    })
  </script>

对于v-for指令，通过processFor方法来进行解析

processFor函数

function  (el) {
	var exp;
	if ((exp = getAndRemoveAttr(el, 'v-for'))) {
		var res = parseFor(exp);
		if (res) {
			extend(el, res);
		} else {
			warn$2(
				("Invalid v-for expression: " + exp),
				el.rawAttrsMap['v-for']
			);
		}
	}
}

var forAliasRE = /([sS]*?)s+(?:in|of)s+([sS]*)/;
function parseFor (exp) {
	var inMatch = exp.match(forAliasRE);
	if (!inMatch) { return }
	var res = {};
	res.for = inMatch[2].trim();
	var alias = inMatch[1].trim().replace(stripParensRE, '');
	var iteratorMatch = alias.match(forIteratorRE);
	if (iteratorMatch) {
		res.alias = alias.replace(forIteratorRE, '').trim();
		res.iterator1 = iteratorMatch[1].trim();
		if (iteratorMatch[2]) {
			res.iterator2 = iteratorMatch[2].trim();
		}
	} else {
		res.alias = alias;
	}
	return res
}

从forAliasRE可知，v-for中使用in和of是一致的

此时inMatch的值为

[
	"(item, index) in arr", 
  "(item, index)", 
  "arr", 
  index: 0, 
  input: "(item, index) in arr", 
  groups: undefined
]

v-for有一下几种形式

1
2
3

v-for="item in items"
v-for="(item, index) in items"
v-for="(value, key, index) in object"

value是属性值，key是属性名，index是索引值

AST结构

经过静态内容处理后的p标签对应AST结构为
技术图片

下面便是根据AST结果生成对应的ren 大专栏 Vue—vder字符串

genFor函数

function genFor (
  el,
  state,
  altGen,
  altHelper
) {
  var exp = el.for;
  var alias = el.alias;
  var iterator1 = el.iterator1 ? ("," + (el.iterator1)) : '';
  var iterator2 = el.iterator2 ? ("," + (el.iterator2)) : '';

  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 
    );
  }

  el.forProcessed = true; // avoid recursion
  return (altHelper || '_l') + "((" + exp + ")," +
    "function(" + alias + iterator1 + iterator2 + "){" +
      "return " + ((altGen || genElement)(el, state)) +
    '})'
}

该函数返回了一个_l函数的字符串

1	_l((arr),function(item,index){return _c('p',[_v(_s(item.name)+"-"+_s(index))])})

_c是创建一个 vnode 对象
_v是创建一个 vnode文本节点
_l函数就是对应的renderList函数

renderList函数

function renderList (
  val,
  render
) {
  var ret, i, l, keys, key;
  if (Array.isArray(val) || typeof val === 'string') {
    ret = new Array(val.length);
    for (i = 0, l = val.length; i < l; i++) {
      ret[i] = render(val[i], i);
    }
  } 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)._isVList = true;
  }
  return ret
}

返回的数据
技术图片

我们这里传入的val就是arr ， render 就是生成 p 段落的 render 函数
代码中的三段 if 判断是因为我们v-for可以遍历的不止数组和对象，还有数组和字符串
最终返回的 ret 是一个 VNode 数组每一个元素都是一个 p 便签对应的 VNode

Vue—v

标签：ram slot dash alt val item param ide fun

原文地址：https://www.cnblogs.com/sanxiandoupi/p/11693163.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行