昨天在项目中遇到一个问题:
angular ng-repeat中DOM的重新渲染机制(项目中遇到问题)-LMLPHP
文本框中输入值只要变化就要请求接口获取数据赋值给couponData,这样性能不好。所以和服务器端沟通改成了服务器端一次性返回所有数据,这样前端只要获取一次数据然后保存在对象里面,然后当输入值变化根据匹配规则自己来判断。
但是输入值变化每次请求接口获取值赋给couponData之后是可以重新渲染DOM元素的;一次获取保存在对象里面是不能重新渲染DOM元素的!我就查了一下原因如下:
输入值变化每次请求接口获取值赋给couponData之后,看一下couponData值如下(每次发请求这个$$hashkey都会变化):
angular ng-repeat中DOM的重新渲染机制(项目中遇到问题)-LMLPHP

我们可以看到 ng-repeat 往数组里每个元素加了一个 $$hashKey 的属性,用于绑定DOM。这个 key 是由 Angular 内部的 nextUid() 方法生成,类似数据库自增,但是是使用字符串。

查看 ng-repeat 的源码可以发现,当 ng-repeat 的数组被替换时, 它默认并不会重新利用已有的 Dom 元素,而是直接将其全部删除并重新生成新的数组 Dom 元素:

// 将上次生成的所有 dom 移除
for (key in lastBlockMap) {
if (lastBlockMap.hasOwnProperty(key)) {
block = lastBlockMap[key];
elementsToRemove = getBlockElements(block.clone);
$animate.leave(elementsToRemove);
forEach(elementsToRemove, function(element) { element[NG_REMOVED] = true; });
block.scope.$destroy();
}
}

这就是每次都请求接口赋值给couponData之后是会重新生成新的 $$hashKey 值,所以会重新渲染DOM元素;所以只获取值一次保存在对象里面不会重新渲染的原因是因为$$hashKey 没有变化导致的,是重用DOM元素,为了解决这个问题,我用随机数方式重新复制给$$hashkey就可以了。

05-11 20:46